Images not working after updating my theme for media

coco_vega
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

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Saltman
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
coco_vega
New Member
3 0 0

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

0 Likes
coco_vega
New Member
3 0 0

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

0 Likes
Saltman
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. 

DensityDigital
New Member
2 0 1

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
New Member
1 0 0

This helped me! Thanks!

0 Likes