From 44624cffb90745cd940a4b1ef1ab9a70506498dc Mon Sep 17 00:00:00 2001
From: Baldur Helgason <baldur.helgason@gmail.com>
Date: Wed, 27 Apr 2022 13:41:44 +0000
Subject: [PATCH] Fix first image lazy load on main product section (#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>
---
 sections/main-product.liquid | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index ca49f6a434f..73d525e7981 100644
--- 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 -%}