From 373899d5ce910eeca3be4e361786ed82b12fb9d9 Mon Sep 17 00:00:00 2001
From: Jan Umbach <jan@umbach.dev>
Date: Wed, 29 May 2024 17:42:01 +0200
Subject: [PATCH] test

---
 snippets/product-media-gallery.liquid | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/snippets/product-media-gallery.liquid b/snippets/product-media-gallery.liquid
index 858af4c..ddb1c4f 100644
--- a/snippets/product-media-gallery.liquid
+++ b/snippets/product-media-gallery.liquid
@@ -67,12 +67,17 @@
       role="list">
 
       {% assign media_position = 0 %}
+      {% assign model_index = 0 %}
+      {% assign video_index = 0 %}
+      {% assign image_index = 0 %}
+      {% assign first_video = product.media | where: 'media_type', 'video' | first %}
+
 
       {%- for media in product.media -%}
         {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
           <li
             id="Slide-{{ section.id }}-{{ media.id }}{{ id_append }}"
-            class="product__media-item grid__item slider__slide{% if single_media_visible %} product__media-item--single{% endif %}{% 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 settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
+            class="product__media-item grid__item slider__slide{% if single_media_visible %} product__media-item--single{% endif %}{% if media_position == 0 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 settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
             data-media-id="{{ section.id }}-{{ media.id }}"
             {% if product.selected_or_first_available_variant.featured_image.alt != media.alt and product.selected_or_first_available_variant.featured_image.alt != blank %}
             style="display: none;"
@@ -106,10 +111,16 @@
         {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}
         <li
           id="Slide-{{ section.id }}-{{ featured_media.id }}{{ id_append }}"
-          class="product__media-item grid__item slider__slide is-active{% if single_media_visible %} product__media-item--single{% endif %}{% if featured_media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains featured_media.src %} product__media-item--variant{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
+          class="product__media-item grid__item slider__slide{% if media_position == 0 %} is-active{% endif %}{% if single_media_visible %} product__media-item--single{% endif %}{% if featured_media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains featured_media.src %} product__media-item--variant{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
           data-media-id="{{ section.id }}-{{ featured_media.id }}"
           thumbnail-alt-mobile={{ featured_media.alt }}>
-          {%- assign media_position = 1 -%}
+          {%- 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: featured_media
             , media_count: media_count
@@ -122,7 +133,7 @@
             , media_width: media_width
             , media_fit: section.settings.media_fit
             , constrain_to_viewport: section.settings.constrain_to_viewport
-            , lazy_load: false
+            , lazy_load: true
           %}
         </li>
       {%- endif -%}