Fix first image lazy load on main product section (Shopify#1286)

* Make sure first image is not lazy loaded * Use a single liquid tag * Update sections/main-product.liquid Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com>
pthreemedia · Jun 13, 2022 · 44624cf · 44624cf
1 parent af80b6a
commit 44624cf
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
@@ -71,9 +71,15 @@
             {%- endif -%}
             {%- for media in product.media -%}
               {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
-                <li id="Slide-{{ section.id }}-{{ media.id }}" class="product__media-item grid__item slider__slide{% if product.selected_or_first_available_variant.featured_media == null and forloop.index == 1 %} is-active{% endif %}{% if media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains media.src %} product__media-item--variant{% endif %}{% if media.alt contains 'full' %} product-image-full-width{% endif %}{% if media.alt contains 'lifestyle' or media.alt contains 'Lifestyle' %} lifestyle-photo{% else %} product-photo{% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">
-                  {%- assign media_position = media_position | default: 0 | plus: 1 -%}
-                  {% render 'product-thumbnail', media: media, position: media_position, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: true %}
+                <li id="Slide-{{ section.id }}-{{ media.id }}" class="product__media-item grid__item slider__slide{% if product.selected_or_first_available_variant.featured_media == null and forloop.index == 1 %} is-active{% endif %}{% if media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains media.src %} product__media-item--variant{% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">
+                  {%- liquid
+                    assign media_position = media_position | default: 0 | plus: 1
+                    assign lazy_load = false
+                    if media_position > 1
+                      assign lazy_load = true
+                    endif
+                    render 'product-thumbnail', media: media, position: media_position, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: lazy_load
+                  -%}
                 </li>
               {%- endunless -%}
             {%- endfor -%}