Images not working after updating my theme for media

Highlighted
New Member
3 0 0

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 imageimage.pngI 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?

0 Likes
Highlighted

Hello ,

Please share your site url.

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

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
2 0 1

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. 

0 Likes
Highlighted
New Member
3 0 0

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

0 Likes
Highlighted
New Member
3 0 0

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

0 Likes
Highlighted
New Member
2 0 1

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. 

1 Like