Product Images not loading on mobile

[shaunsnaith]

We are having issues with images for products loading on mobile devices.  According to the admin page of our site, site speed is around 54/55 so the site itself is not snail pace.  But for some reason the images on mobile just don't load.  The thumbnails are just grey boxes, no matter how many times I refresh the page.  The website is advancedacoustics-uk.com.  Is there something we need to chance with the code.  We've knocked the size of the image files down.  Try to attach a screenshot but this thing won't let me.

Any help would be appreciated

[shaunsnaith]

Thank you @Danishshopdev Could you tell me where in the admin panel I can turn off lazy loading?

[shaunsnaith]

I've got considerably less options than you.  Will have to change the code?  Could you direct me?

https://prnt.sc/oGFuY3p4qlh0

[tim]

You have a problem with  HTML on your product grid items.

Can you see that the "class" attribute misses closing quotation mark? You can also tell because the "src" on the next line is blue in color.

Looks like somebody has modified your theme code and missed the quote mark.

I'd start by fixing this.

[shaunsnaith]

Thank you Tim,

I'm confident changing the code but I am having problems finding the correct file where that code is located.  Would you be able to direct me?

https://prnt.sc/H67VFYh7YF8B

[shaunsnaith]

I don't have that file name but I do have this but I can't find an error if it the correct file;

https://prnt.sc/JdAXwrgg4Jes

[shaunsnaith]

I think I have found the line, all the quotation marks after this line are black telling me there's one missing?  When I put a quotation mark at the end it automatically adds another as if that is in the wrong place.  

class="{% if alt contains '3D' %}easySpanOpacity {% endif %}{{ screen }}{% unless nopad %}nopad {% endunless %}js lazyload {% if background or swatch %}lazybackground {{ position }} {% endif %}img-align {% if img_src.aspect_ratio > 1 %}landscape{% elsif img_src.aspect_ratio < 1 %}vertical{% else %}square{% endif %} {% if image.alt contains '3D' %}style="opacity:0.3;" {% endif %}

So I have done this

class="{% if alt contains '3D' %}easySpanOpacity {% endif %}{{ screen }}{% unless nopad %}nopad {% endunless %}js lazyload {% if background or swatch %}lazybackground {{ position }} {% endif %}img-align {% if img_src.aspect_ratio > 1 %}landscape{% elsif img_src.aspect_ratio < 1 %}vertical{% else %}square{% endif %}"{% if image.alt contains '3D' %}style="opacity:0.3;" {% endif %}

However there is still no change with the grey boxes showing instead of images.  Same problem is with the first picture of every collection page.  Grey boxes everywhere!

[shaunsnaith]

Do I need to replace the code or add the code?

[shaunsnaith]

I've done that but still seem to be having the same issue

https://1drv.ms/i/s!AsSpT6bsX8y9gqYetj3CqY5Ao27PgQ?e=ABX64a

Also the first picture in every collection is greyed out

Same with the home page, the first two pictures are plain plus the hero banner is not showing.

20230406_074741919_iOS.png

[tim]

Can you restore the code to its original state and change it from 

square{% endif %} {% if image.alt

to

square{% endif %}" {% if image.alt

Basically this adds a quotemark, but be sure there is a space after it.

Ideally, you should share the snippet code,  either here, but use an "Insert/Edit code" functionality, or use service like pastebin. 

Otherwise it's really difficult to read.

[shaunsnaith]

Sorry, I've been away for a few days.  Thank you Tim, I have put the code back and done as you suggested

class="{% if alt contains '3D' %}easySpanOpacity {% endif %}{{ screen }}{% unless nopad %}nopad {% endunless %}js lazyload {% if background or swatch %}lazybackground {{ position }} {% endif %}img-align {% if img_src.aspect_ratio > 1 %}landscape{% elsif img_src.aspect_ratio < 1 %}vertical{% else %}square{% endif %}" {% if image.alt contains '3D' %}style="opacity:0.3;" {% endif %}

However I still have the issue of greyed out product images.

[tim]

Hmm. They lazy load properly on my android phone.

I do not have iPhone and can only use IOS Simulator and there only the first product in collection is not loaded properly.

It may be because data-srcset properties are not 100% percent proper -- they have hanging comma at the end, but I need to see the entire snippet source code to suggest anything.

<img id="image-20848264282251template--15468279922827__main"
     class="js lazyload img-align landscape"      
     src="XXX_1x.jpg"
     srcset="XXX_1x.jpg"
     data-src="XXX_320x.jpg"
     data-srcset="XXX_220x.jpg 220w 165h,XXX_320x.jpg 320w 240h,"
     loading="lazy"
     height="240"
     width="320" 
     data-id="20848264282251template--15468279922827__main"
     data-source="XXX.jpg"
     data-aspectratio="1.3333333333333333"  
     alt="Soundproofing Mat - 1.25m by 3m by 2mm thick - 5kg Membrane Mass Loaded Vinyl"
     style="max-height:240px;max-width:320px;"
     >

[shaunsnaith]

I wasn't sure how much of the code you needed to see so here is what I think is relevant.

<img id="image-{{ id }}"
     class="{% if alt contains '3D' %}easySpanOpacity {% endif %}{{ screen }}{% unless nopad %}nopad {% endunless %}js lazyload {% if background or swatch %}lazybackground {{ position }} {% endif %}img-align {% if img_src.aspect_ratio > 1 %}landscape{% elsif img_src.aspect_ratio < 1 %}vertical{% else %}square{% endif %}" {% if image.alt contains '3D' %}style="opacity:0.3;" {% endif %}     
     src="{{ img_src | img_url: '1x' }}"
     srcset="{{ img_src | img_url: '1x' }}"
     data-src="{% if background %}{{ img_src | img_url: 'master' }}{% else %}{% if img_src.width < size %}{{ img_src | img_url: 'master' }}{% else %}{{ img_src | img_url: img_size }}{% endif %}{% endif %}"
     data-srcset="{% if datawidth == false %}{{ img_src | img_url: img_size }} 1x, {{ img_src | img_url: img_size, scale: 2 }} 2x{% else %}{{ img_set }}{% endif %}"
     loading="lazy"
     height="{{ img_height }}"
     width="{{ img_width }}" 
     data-id="{{ id | remove: 'thumb-' }}"
     data-source="{{ img_src | img_url: 'master' }}"
     data-aspectratio="{{ img_src.aspect_ratio }}"
   
     
     {% if section.settings.zoom_enable %}data-zoom="{{ img_src | img_url: '1024x1024', scale: 2 }}"{% endif %}
     alt="{{ alt | escape }}"
     {% unless background %}style="max-height:{{ img_height }}px;max-width:{{ img_width }}px;{% if swatch != true and section.settings.img_align %}height: {% if img_src.aspect_ratio > 1 %}auto{% else %}100%{% endif %};width: {% if img_src.aspect_ratio > 1 %}100%{% else %}auto{% endif %};{% endif %}"{% endunless %}>

<noscript>
  <img class="{% unless nopad %}nopad {% endunless %}lazyload lazyloaded {% if background or swatch %}lazybackground {{ position }} {% endif %}img-align {% if img_src.aspect_ratio > 1 %}landscape{% elsif img_src.aspect_ratio < 1 %}vertical{% else %}square{% endif %}" 
       src="{% if background %}{{ img_src | img_url: 'master' }}{% else %}{% if img_src.width < size %}{{ img_src | img_url: 'master' }}{% else %}{{ img_src | img_url: img_size }}{% endif %}{% endif %}" 
       loading="lazy"
       height="{{ img_height }}" 
       width="{{ img_width }}"
       alt="{{ alt }}" 
       {% unless background %}style="max-height:{{ img_height }}px;max-width:{{ img_width }}px;{% if section.settings.img_align %}height: {% if img_src.aspect_ratio > 1 %}auto{% else %}100%{% endif %};width: {% if img_src.aspect_ratio > 1 %}100%{% else %}auto{% endif %};{% endif %}"{% endunless %}>
</noscript>

[tim]

Hmm, this code does not seem to quite match the output.

In the output above data-src looks like:

data-srcset="XXX_220x.jpg 220w 165h,XXX_320x.jpg 320w 240h,"

 the code you shared has this

data-srcset="
{% if datawidth == false %}
  {{ img_src | img_url: img_size }} 1x, {{ img_src | img_url: img_size, scale: 2 }} 2x
{% else %}
  {{ img_set }}
{% endif %}"

So it should either output srcset in 1x/2x notation, or content of the img_set variable/snippet parameter.

The code of product.images.liquid which you've shared initially does not use any img_set but it's code code for product page as far as I can see (but it does not match the actual output as well).

This is not enough code to suggest a fix.

[shaunsnaith]

That code was from file image.load.liquid.  Again, I'm not sure how much code you want to see but here is the code from product.images.liquid

{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
<div id="main-product-image-{{ section.id }}" 
     class="featured-image featured-image-div-{{ section.id }} main-image-{{ section.id }} text-center"
     data-product-single-media-group >
  {% for media in product.media %}
  <div id="variant-image-{{ media.id }}" 
       class="variant-image variant-image-{{ section.id }} relative{% if media == featured_media %} visible{% else %} hidden{% endif %}"
       aria-hidden="{% if media == featured_media %}false{% else %}true{% endif %}" 
       data-image-id="{{ media.id }}"
       {% if media.media_type == 'video' or media.media_type == 'external_video' %} data-product-media-type-video data-enable-video-looping="{{ section.settings.loop_enable }}"{% endif %}
       {% if media.media_type == 'model' %} data-product-media-type-model{% endif %}
       {% if media.media_type == 'external_video' %} data-video-id="{{ media.external_id }}"{% endif %}
       data-product-single-media-wrapper
       data-media-id="{{ section.id }}-{{ media.id }}"
       tabindex="-1"
       {% unless section.settings.img_align %}style="max-width:{{ media.width }}px"{% endunless %}       
       >
    
    {% case media.media_type %}
    {% when 'image' %}
      {% if media.alt contains '3D' %}
        <div class="-spin-studio-active-wrapper">
            <img id="-spin-studio-large-thumb" data-product="{{ product.id }}" class="-spin-studio-large-thumb" />
        </div>
      {% else %}
    <div class="{% if section.settings.zoom_enable %}drift {% endif %}clearfix">
      <div class="relative lazycontainer{% unless media == featured_media %} lazyskip{% endunless %}{% if section.settings.img_align %} image-align{% endif %}">
        {%- liquid
          render 'image.load', id: media.id, img_src: media, size: 600, alt: media.alt
        -%}
      </div>
    </div>
      {% endif %}
    {% when 'external_video' %}
    {{ media | external_video_tag }} 
    {% when 'model' %}
    <div class="relative media-viewer text-left">
      {{ media | model_viewer_tag: reveal: 'interaction', toggleable: true, data-model-id: media.id, image_size: '600x600' }}
    </div>
    <button class="btn auto-full-width modelthreed hidden"
            aria-label="{{ 'products.general.media_view' | t }}"
            data-shopify-xr
            data-shopify-model3d-id="{{ media.id }}"
            data-shopify-title="{{ product.title | escape }}"
            data-shopify-xr-hidden>{%- render 'icons.theme', icon: 'threed', size: '14', icon_class: 'view' -%}&nbsp;&nbsp;{{ 'products.general.media_view' | t }}</button>
    {% when 'video' %}
    <div class="relative">
    {{ media | video_tag: controls: true, image_size: '600x600' }}
    </div>
    {% else %}
    {{ media | media_tag: image_size: '600x600' }}
    {% endcase %}
  </div>
  {% endfor %}
</div>

{% if product.media.size > 1 %}
<div class="glider-contain">
  <div{% if product.media.size > 4 %} id="thumbnails-{{ section.id }}"{% endif %} class="{% if product.media.size > 4 %}glider {% else %}twelve table-center negative-left negative-right {% endif %}thumbnails thumbs">
    <div class="{% if product.media.size > 4 %}glider-track{% else %}center{% endif %}">
      {% for media in product.media %}
      {%- liquid
        capture alt
           if img_src.alt != blank
            echo img_src.alt
           else
            echo product.title
           endif
        endcapture
      -%}
      <div class="three {% if product.media.size < 5 %}mobile {% endif %}thumb-image-{{ section.id }} image" data-image-id="{{ media.id }}"{% if product.media.size > 4 %} data-gslide="{{ forloop.index0 }}"{% endif %}>  
        <div class="title-align">
          <div class="relative lazycontainer">
            <a href="javascript&colon; void(0)" title="{{ alt | escape }}" class="img-align" tabindex="0" aria-current="{% if media == featured_media %}true{% else %}false{% endif %}">
              {% if media.alt contains '3D' %}
              <span class="easySpinIcon"><svg width="49" height="27" viewBox="0 0 49 27" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.6378 22.606C21.6378 22.066 21.6271 21.5895 21.6378 21.113C21.6485 20.4777 22.0665 20.2024 22.6237 20.4989C24.2527 21.3671 25.8816 22.2565 27.4891 23.146C27.9714 23.4107 27.9928 23.9295 27.5105 24.1942C25.8602 25.1048 24.2098 26.0048 22.538 26.8836C22.045 27.1377 21.6485 26.8836 21.6271 26.333C21.6164 25.8036 21.6271 25.2742 21.6271 24.6918C21.027 24.6389 20.4483 24.586 19.8696 24.5436C15.9687 24.2577 12.1428 23.5483 8.46702 22.193C5.92717 21.2613 3.51592 20.086 1.6405 18.0742C0.676 17.0577 0.0329992 15.8612 0.000849204 14.4107C-0.0205841 13.3307 0.365216 12.3777 0.986783 11.5095C2.25135 9.75184 4.03032 8.65066 5.93789 7.75066C6.83809 7.32713 7.78115 7.00948 8.70279 6.62831C9.035 6.49066 9.36722 6.46948 9.51725 6.84007C9.678 7.25301 9.32435 7.38007 9.01357 7.49654C7.2989 8.17419 5.65925 8.9789 4.30895 10.2495C3.25872 11.2448 2.49783 12.3777 2.57285 13.9024C2.63715 15.0989 3.21585 16.0518 4.00888 16.8883C5.51994 18.4765 7.43822 19.4401 9.46367 20.2236C12.668 21.4518 16.0116 22.1083 19.4302 22.426C19.7838 22.4577 20.1375 22.5001 20.4911 22.5212C20.8448 22.553 21.1984 22.5742 21.6378 22.606ZM33.2976 24.1095C36.6626 23.5271 39.9312 22.6483 42.9533 21.0389C44.5179 20.2024 45.9647 19.2071 47.0149 17.746C47.69 16.8036 48.0866 15.7554 47.9901 14.5801C47.8722 13.1295 47.1864 11.933 46.179 10.906C44.5393 9.23301 42.5032 8.19537 40.3706 7.31654C40.3063 7.28478 40.2205 7.25301 40.1669 7.27419C39.9633 7.34831 39.6311 7.41184 39.6097 7.52831C39.5775 7.70831 39.6954 8.00478 39.8562 8.12125C40.1134 8.32243 40.4563 8.42831 40.7564 8.58713C42.2781 9.40243 43.7142 10.313 44.6894 11.7742C45.3431 12.7483 45.6539 13.8071 45.3538 14.9824C45.0109 16.3377 44.1107 17.3118 43.0497 18.1377C41.1207 19.6307 38.9131 20.5518 36.5661 21.1554C34.6586 21.6424 32.7081 21.9707 30.7684 22.3307C30.0397 22.4683 29.6217 22.8918 29.686 23.5801C29.7503 24.2154 30.2004 24.5436 30.9399 24.5012C31.7115 24.353 32.5045 24.2471 33.2976 24.1095ZM44.4 2.52007C44.4107 1.13301 43.2212 -0.0105153 41.7959 7.2943e-05C40.4241 0.0106612 39.2346 1.18596 39.2346 2.53066C39.2346 3.87537 40.3384 4.93419 41.7423 4.94478C43.2533 4.95537 44.3893 3.92831 44.4 2.52007ZM43.0819 2.55184C43.0819 3.28243 42.5675 3.8436 41.8923 3.86478C41.185 3.88596 40.5956 3.28243 40.5849 2.53066C40.5742 1.75772 41.0671 1.2389 41.8066 1.22831C42.5782 1.22831 43.0926 1.75772 43.0819 2.55184ZM17.4047 3.34596L15.2614 5.48478L15.5722 6.73419H16.3974C17.5333 6.73419 18.1549 7.13654 18.1549 7.87772C18.1549 8.55537 17.6298 8.96831 16.8796 8.96831C15.9687 8.96831 15.3257 8.58713 14.7041 7.8989L13.3431 9.18007C14.1147 10.0801 15.2292 10.7154 16.8582 10.7154C18.8622 10.7154 20.0946 9.48713 20.0946 7.79301C20.0946 6.13066 18.9158 5.49537 17.6726 5.29419L19.9446 3.14478V1.67301H13.8575V3.34596H17.4047ZM27.6499 2.4989C26.8568 1.87419 26.0531 1.52478 24.8314 1.52478C22.1415 1.52478 20.8876 3.63184 20.8876 6.39537C20.8876 8.17419 21.2949 9.12713 21.9593 9.77301C22.5916 10.3977 23.3846 10.726 24.5527 10.726C26.5032 10.726 27.9821 9.46595 27.9821 7.63419C27.9821 5.77066 26.6103 4.78596 24.8207 4.78596C23.9312 4.78596 23.4061 5.06125 22.956 5.35772C23.0846 4.19301 23.6525 3.3036 24.7671 3.3036C25.5387 3.3036 26.0102 3.56831 26.6103 4.01301L27.6499 2.4989ZM26.0209 7.7189C26.0209 8.49184 25.4529 9.04243 24.4777 9.04243C23.5025 9.04243 22.9131 8.48125 22.9131 7.70831C22.9131 6.94596 23.4811 6.41654 24.4563 6.41654C25.4208 6.40596 26.0209 6.95654 26.0209 7.7189ZM36.7483 6.10949C36.7483 3.51537 35.1623 1.52478 32.7617 1.52478C30.3612 1.52478 28.7537 3.54713 28.7537 6.14125C28.7537 8.73537 30.3397 10.726 32.7403 10.726C35.1408 10.7154 36.7483 8.69301 36.7483 6.10949ZM34.7229 6.13066C34.7229 7.76125 33.962 8.94713 32.7724 8.94713C31.5722 8.94713 30.7898 7.74007 30.7898 6.0989C30.7898 4.45772 31.5507 3.28243 32.7403 3.28243C33.9406 3.28243 34.7229 4.50007 34.7229 6.13066Z" fill="#595959"/></svg></span>
                {% endif %}
              {%- liquid
                capture id
                  echo 'thumb-'
                  echo media.id
                endcapture
                render 'image.load', id: id, img_src: media.preview_image, size: 125, alt: media.alt, nopad: true 
                case media.media_type
                  when 'external_video'
                  	render 'icons.theme', icon: 'play', size: '16', icon_class: 'thumbnail'
                  when 'model'
                  	render 'icons.theme', icon: 'threed', size: '16', icon_class: 'thumbnail'
                  when 'video'
                  	render 'icons.theme', icon: 'play', size: '16', icon_class: 'thumbnail'
                endcase
              -%}
            </a>  
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
  {% if product.media.size > 4 %}
  <div id="glider-pagination-thumbs" class="glider-pagination relative">
    <button id="glider-button-prev-thumbs-{{ section.id }}" class="tabindex glider-button-prev thumbs" type="button" aria-label="{{ 'products.general.previous' | t }}">{%- render 'icons.theme', icon: 'left', size: '16' -%}</button>
    <button id="glider-button-next-thumbs-{{ section.id }}" class="tabindex glider-button-next thumbs" type="button" aria-label="{{ 'products.general.next' | t }}">{%- render 'icons.theme', icon: 'right', size: '16' -%}</button>
  </div>
  {% endif %}
</div>
{% endif %}

[tim]

This is product.images.liquid -- a snippet used to output images on product page (not product image on collection page).

Anyway, the relevant part here is this:

<div class="relative lazycontainer{% unless media == featured_media %} lazyskip{% endunless %}{% if section.settings.img_align %} image-align{% endif %}">
   {%- liquid
      render 'image.load', id: media.id, img_src: media, size: 600, alt: media.alt
   -%}
</div>

Which means that actual <img> tag is output by the image.load snippet.

Then we have the snippet code you've shared above which has the following code:

data-srcset="
{% if datawidth == false %}
  {{ img_src | img_url: img_size }} 1x, {{ img_src | img_url: img_size, scale: 2 }} 2x
{% else %}
  {{ img_set }}
{% endif %}"

Which should either output data-srcset in 1x/2x notation, which is not happens on site, 

or content of the img_set variable/snippet parameter, but none of the code you've shared calculates this variable.

So my only guess is that this img_src is calculated somewhere in the image.load snippet but you have not shared the entire code of the snippet?

[shaunsnaith]

Sorry about that, I wasn't sure how much you needed/wanted to see.  Here is the entire code for image.load.liquid

{%- liquid
  assign img_size = size | append: 'x'
  capture img_height
    if img_src.width < size
      echo img_src.height
    else
      echo size | divided_by: img_src.aspect_ratio
    endif
  endcapture
  assign img_height = img_height | round
  capture img_width
    if img_src.width < size
      echo img_src.width
    else
      echo size
    endif
  endcapture
  assign img_width = img_width | round
  capture img_set
    if img_src.width < 220
      assign height = img_src.width | divided_by: img_src.aspect_ratio | round
      echo img_src | img_url: 'master' | append: ' ' | append: img_src.width | append: 'w ' | append: height | append: 'h,'
    endif    
    if size < 220
      assign height = size | divided_by: img_src.aspect_ratio | round
      echo img_src | img_url: img_size | append: ' ' | append: size | append: 'w ' | append: height | append: 'h,'
    endif    
    if background or img_src.width >= 220 and size >= 220
      assign height = 220 | divided_by: img_src.aspect_ratio | round
      echo img_src | img_url: '220x' | append: ' 220w ' | append: height | append: 'h,'
    endif
    if background or img_src.width >= 320 and size >= 320
      assign height = 320 | divided_by: img_src.aspect_ratio | round
      echo img_src | img_url: '320x' | append: ' 320w ' | append: height | append: 'h,'
    endif
    if background or img_src.width >= 480 and size >= 480
      assign height = 480 | divided_by: img_src.aspect_ratio | round
      echo img_src | img_url: '480x' | append: ' 480w ' | append: height | append: 'h,'
    endif
    if background or img_src.width >= 600 and size >= 600
      assign height = 600 | divided_by: img_src.aspect_ratio | round
      echo img_src | img_url: '600x' | append: ' 600w ' | append: height | append: 'h,'
    endif
    if background or img_src.width >= 768 and size >= 768
      assign height = 768 | divided_by: img_src.aspect_ratio | round
      echo img_src | img_url: '768x' | append: ' 768w ' | append: height | append: 'h,'
    endif
    if background or img_src.width >= 960 and size >= 960
      assign height = 960 | divided_by: img_src.aspect_ratio | round
      echo img_src | img_url: '960x' | append: ' 960w ' | append: height | append: 'h,'
    endif
    if background or img_src.width >= 1024 and size >= 1024
      assign height = 1024 | divided_by: img_src.aspect_ratio | round
      echo img_src | img_url: '1024x' | append: ' 1024w ' | append: height | append: 'h,'
    endif
    if background or img_src.width >= 1280 and size >= 1280
      assign height = 1280 | divided_by: img_src.aspect_ratio | round
      echo img_src | img_url: '1280x' | append: ' 1280w ' | append: height | append: 'h,'
    endif
    if background and img_src.width >= 1600
      assign height = 1600 | divided_by: img_src.aspect_ratio | round
      echo img_src | img_url: '1600x' | append: ' 1600w ' | append: height | append: 'h,'
    endif
    if background and img_src.width >= 1900
      assign height = 1900 | divided_by: img_src.aspect_ratio | round
      echo img_src | img_url: '1900x' | append: ' 1900w ' | append: height | append: 'h,'
    endif
    if background and img_src.width >= 2560
      assign height = 2560 | divided_by: img_src.aspect_ratio | round
      echo img_src | img_url: '2560x' | append: ' 2560w ' | append: height | append: 'h,'
    endif
  endcapture 
-%}

<img id="image-{{ id }}"
     class="{% if alt contains '3D' %}easySpanOpacity {% endif %}{{ screen }}{% unless nopad %}nopad {% endunless %}js lazyload {% if background or swatch %}lazybackground {{ position }} {% endif %}img-align {% if img_src.aspect_ratio > 1 %}landscape{% elsif img_src.aspect_ratio < 1 %}vertical{% else %}square{% endif %}" {% if image.alt contains '3D' %}style="opacity:0.3;" {% endif %}     
     src="{{ img_src | img_url: '1x' }}"
     srcset="{{ img_src | img_url: '1x' }}"
     data-src="{% if background %}{{ img_src | img_url: 'master' }}{% else %}{% if img_src.width < size %}{{ img_src | img_url: 'master' }}{% else %}{{ img_src | img_url: img_size }}{% endif %}{% endif %}"
     data-srcset="{% if datawidth == false %}{{ img_src | img_url: img_size }} 1x, {{ img_src | img_url: img_size, scale: 2 }} 2x{% else %}{{ img_set }}{% endif %}"
     loading="lazy"
     height="{{ img_height }}"
     width="{{ img_width }}" 
     data-id="{{ id | remove: 'thumb-' }}"
     data-source="{{ img_src | img_url: 'master' }}"
     data-aspectratio="{{ img_src.aspect_ratio }}"
   
     
     {% if section.settings.zoom_enable %}data-zoom="{{ img_src | img_url: '1024x1024', scale: 2 }}"{% endif %}
     alt="{{ alt | escape }}"
     {% unless background %}style="max-height:{{ img_height }}px;max-width:{{ img_width }}px;{% if swatch != true and section.settings.img_align %}height: {% if img_src.aspect_ratio > 1 %}auto{% else %}100%{% endif %};width: {% if img_src.aspect_ratio > 1 %}100%{% else %}auto{% endif %};{% endif %}"{% endunless %}>

<noscript>
  <img class="{% unless nopad %}nopad {% endunless %}lazyload lazyloaded {% if background or swatch %}lazybackground {{ position }} {% endif %}img-align {% if img_src.aspect_ratio > 1 %}landscape{% elsif img_src.aspect_ratio < 1 %}vertical{% else %}square{% endif %}" 
       src="{% if background %}{{ img_src | img_url: 'master' }}{% else %}{% if img_src.width < size %}{{ img_src | img_url: 'master' }}{% else %}{{ img_src | img_url: img_size }}{% endif %}{% endif %}" 
       loading="lazy"
       height="{{ img_height }}" 
       width="{{ img_width }}"
       alt="{{ alt }}" 
       {% unless background %}style="max-height:{{ img_height }}px;max-width:{{ img_width }}px;{% if section.settings.img_align %}height: {% if img_src.aspect_ratio > 1 %}auto{% else %}100%{% endif %};width: {% if img_src.aspect_ratio > 1 %}100%{% else %}auto{% endif %};{% endif %}"{% endunless %}>
</noscript>

[tim]

Ok, I see.

Try this -- change from 

   endcapture 
 -%}

to 

   endcapture 
   assign img_src=img_src | split: "," | join: ", "
 -%}

This will remove the hanging comma.

Hopefully, it will solve the problem.

I must add that in my opinion the theme uses responsive images improperly -- they do not supply the sizes parameter which means that the biggest image is always used and you may as well remove the srcset/data-srcset at all...

[shaunsnaith]

That seems much better however for the first item in every collection we now have no images at all showing, not even a coloured box.  Desktop is all fine, the issue is still with mobile.

As for the issue with the theme they have brought out a new update but since the last update we have done a little custom work and I'm not sure how much of it we will loose such as custom add to cart colour, additional tabs in the product description, 3d images.  We are on 2.0.4 and it's now 5.0.1

Avenue Theme - Casual - Ecommerce Website Template (shopify.com)

Should really bite the bullet and get it done.

[jjwill]

Hi I am having the same issue with product image thumbnails not loading on iphone ios and only showing grey boxes. website is luggagebase.com