Images not working after updating my theme for media

[coco_vega]

hi everyone!

I wanted to add support for media to the Supply theme i am using for my store. I followed this guide https://shopify.dev/tutorials/add-theme-support-for-rich-media-3d-and-video and the video that I added to my store did work but now my images are not showing up.

this is how my product page looks now without the main imageI followed carefully every step, this is how my media.liquid file looks like

    {% case media.media_type %}
      {% when 'image' %}
            {%- capture img_wrapper_id -%}productPhotoWrapper-{{ section.id }}-{{ image.id }}{%- endcapture -%}
            {%- assign max_width = 700 -%}
            {%- assign max_height = 1024 -%}

            {%- include 'image-logic' with width: max_width, height: max_height -%}

            {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <div id="{{ img_wrapper_id }}" class="lazyload__image-wrapper{% unless image == featured_image %} hide{% endunless %}" data-image-id="{{ image.id }}" style="max-width: {{ max_width }}px">
              <div class="no-js product__image-wrapper" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
                <img id="{{ img_id }}"
                  {% if forloop.first == true %}
                  src="{{ featured_image | img_url: '300x300' }}"
                  {% endif %}
                  class="lazyload no-js lazypreload"
                  data-src="{{ img_url }}"
                  data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                  data-aspectratio="{{ image.aspect_ratio }}"
                  data-sizes="auto"
                  alt="{{ image.alt | escape }}"
                  {% if section.settings.product_image_zoom_enable %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}>
              </div>
            </div>
            {% if forloop.first == true %}
              <noscript>
                <img src="{{ image | img_url: '580x' }}"
                  srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x"
                  alt="{{ image.alt }}" style="opacity:1;">
              </noscript>
            {% endif %}
      {% when 'external_video' %}
        <div class="product-single__media" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100}}%;" data-media-id="{{ media.id }}">
          {{ media | external_video_tag }}
        </div>
      {% when 'video' %}
        <div class="product-single__media" data-media-id="{{ media.id }}">
          {{ media | video_tag: controls: true }}
        </div>
      {% when 'model' %}
        <div class="product-single__media" style="padding-top: 100%" data-media-id="{{ media.id }}">
          {{ media | model_viewer_tag }}
        </div>
      {% else %}
        <div class="product-single__media" style="padding-top: 100%;" data-media-id="{{ media.id }}">
          {{ media | media_tag }}
        </div>
    {% endcase %}

and this is how my product-template.liquid file looks like

  <div class="grid-item large--two-fifths">
    <div class="grid">
      <div class="grid-item large--eleven-twelfths text-center">
        <div class="product-photo-container" id="productPhotoContainer-{{ section.id }}">
          {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
              {% for media in product.media %}
      {% include 'media' %}
    {% endfor %}
        </div>

        {% if product.images.size > 1 %}
          <ul class="product-photo-thumbs grid-uniform" id="productThumbs-{{ section.id }}">

            {% for image in product.images %}
              <li class="grid-item medium-down--one-quarter large--one-quarter">
                <a href="{{ image.src | img_url: '1024x1024', scale: 2 }}" class="product-photo-thumb product-photo-thumb-{{ section.id }}" data-image-id="{{ image.id }}">
                  <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
                </a>
              </li>
            {% endfor %}

          </ul>
        {% endif %}

      </div>
    </div>
  </div>

What did i mess up?

[oscprofessional]

Hello coco_vega,

Please share your site url.

So that i can check and let you know the exact solution here.

[Saltman]

Did you find a solution? I am seeing the same exact thing after a quick test on this method. Its not picking up the main image for some reason. 

[coco_vega]

@oscprofessional  I removed the snippet with because it wasnt working so my website is currently looking fine.

[coco_vega]

@Saltman not yet : / and it tried with another theme and the same thing happened

[Saltman]

Ok cool. I ended up doing something else last night to add vids. Its an odd thing I am noticing. Not sure why its knocking out the main image. I saw something regarding the lazy loader no image in the inspector. Anyways, I just added the vid under the carousel after a bit of testing last night. Took longer than I expected. Here is an example of what I did just to get something working for now => iss automotive

I will try dorking around with it later. I just need to add some CSS to make iframe response. At least I can rapidly add vid to all the PDPs. 

[DensityDigital]

Possible solution (Im still working on this):

The image loop code bock that the tutorial asks you to copy from the product page references the media with 'image'. E.g 

 <img src="{{ image | img_url: '580x' }}" 

 You need to change all 'image' references to 'media' instead

 <img src="{{ media | img_url: '580x' }}"

The tutorial is missing this very crucial step. You should also replace the 'images' in the thumbnail code block to 'media' else your thumbnails will not work.

Possible solution, because at the moment of writing this the video seems to appear all the time whether or not its selected on the thumbnail.

[mosey101]

This helped me! Thanks!

[chr890]

Within the media.liquid file you will need to change image to media like this

{{ image | img_url: 'master' }}

to

{{ media | img_url: 'master' }}

and also for the alternative text

{{ image.alt | escape }}

to

{{ media.alt | escape }}

like this should work.