test

snippets/product-media-gallery.liquid

@@ -68,11 +68,59 @@
 
       {% assign media_position = 0 %}
       {% assign first_videoShown = false %}
-
-      <li class="grid__item"></li>
+      {% assign skipImageIndex = -1 %}
 
 
       {%- for media in product.media -%}
+        {%- unless media.id == product.selected_or_first_available_variant.featured_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 %}
+            {% assign isCorrectImageWithMatchingAlt = false %}
+
+            {% continue %}
+          {% else %}
+            {% assign isCorrectImageWithMatchingAlt = true %}
+            {% assign skipImageIndex = forloop.index %}
+          {% endif %}
+
+          <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 isCorrectImageWithMatchingAlt == true and first_videoShown == false and media.media_type == "video" %} is-active{% endif %}{% if media.media_type != 'image' %} product__media-item--full{% endif %}{% comment %}{% if section.settings.hide_variants and variant_images contains media.src %} product__media-item--variant{% endif %}{% endcomment %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
+            data-media-id="{{ section.id }}-{{ media.id }}"
+            {% unless isCorrectImageWithMatchingAlt %}
+            style="display: none;"
+            {% endunless %}
+            thumbnail-alt-mobile={{ media.alt }}>
+            {%- 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
+              , media_count: media_count
+              , position: media_position
+              , desktop_layout: section.settings.gallery_layout
+              , mobile_layout: section.settings.mobile_thumbnails
+              , loop: section.settings.enable_video_looping
+              , modal_id: section.id
+              , xr_button: true
+              , media_width: media_width
+              , media_fit: section.settings.media_fit
+              , constrain_to_viewport: section.settings.constrain_to_viewport
+              , lazy_load: lazy_load
+            %}
+          </li>
+          {% break %}
+        {%- endunless -%}
+      {%- endfor -%}
+
+      {%- for media in product.media -%}
+        {% if skipImageIndex != -1 and forloop.index == skipImageIndex %}
+          {% continue %}
+        {% endif %}
+
         {%- unless media.id == product.selected_or_first_available_variant.featured_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 %}
             {% assign isCorrectImageWithMatchingAlt = false %}