From 8d037b81891b95f5410e8ffd9b0f3507051a3924 Mon Sep 17 00:00:00 2001
From: Jan Umbach <jan@umbach.dev>
Date: Wed, 29 May 2024 20:50:29 +0200
Subject: [PATCH] equaled featured_media and normal pictures to keep picture
 sorted

---
 snippets/product-media-gallery.liquid | 98 +++++++++------------------
 1 file changed, 31 insertions(+), 67 deletions(-)

diff --git a/snippets/product-media-gallery.liquid b/snippets/product-media-gallery.liquid
index 35b9376..4912abd 100644
--- a/snippets/product-media-gallery.liquid
+++ b/snippets/product-media-gallery.liquid
@@ -217,93 +217,57 @@
           calc((100vw - 8rem) / 3)
         {%- endcapture -%}
         {%- for media in product.media -%}
-          {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
-            {%- liquid
-              capture media_index
-                if media.media_type == 'model'
-                  increment model_index
-                elsif media.media_type == 'video' or media.media_type == 'external_video'
-                  increment video_index
-                elsif media.media_type == 'image'
-                  increment image_index
-                endif
-              endcapture
-              assign media_index = media_index | plus: 1
-            -%}
-            <li
-              {% 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;"
-              {% endif %}
-              thumbnail-alt={{ media.alt }}
-              id="Slide-Thumbnails-{{ section.id }}-{{ forloop.index }}{{ id_append }}"
-              class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains media.src %} thumbnail-list_item--variant{% endif %}"
-              data-target="{{ section.id }}-{{ media.id }}"
-              {% if media.media_type == 'video' or media.media_type == 'external_video' %}
-              data-is-video-type="true"
-              {% endif %}
-              data-media-position="{{ media_index }}">
-
-              {%- if media.media_type == 'model' -%}
-                <span class="thumbnail__badge" aria-hidden="true">
-                  {%- render 'icon-3d-model' -%}
-                </span>
-              {%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}
-                <span class="thumbnail__badge" aria-hidden="true">
-                  {%- render 'icon-play' -%}
-                </span>
-              {%- endif -%}
-              {%- capture thumbnail_id -%}
-                Thumbnail-{{ section.id }}-{{ forloop.index }}{{ id_append }}
-              {%- endcapture -%}
-              <button
-                class="thumbnail global-media-settings global-media-settings--no-shadow"
-                aria-label="{%- if media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
-                {% if media == product.selected_or_first_available_variant.featured_media or product.selected_or_first_available_variant.featured_media == null and forloop.index == 1 %}
-                aria-current="true"
-                {% endif %}
-                aria-controls="GalleryViewer-{{ section.id }}{{ id_append }}"
-                aria-describedby="{{ thumbnail_id }}">
-                {{
-                  media.preview_image | image_url: width: 416 | image_tag: loading: 'lazy', sizes: sizes, widths: '54, 74, 104, 162, 208, 324, 416', id: thumbnail_id, alt: media.alt | escape
-                }}
-              </button>
-            </li>
-          {%- endunless -%}
-        {%- endfor -%}
-        {%- if featured_media != null -%}
           {%- liquid
             capture media_index
-              if featured_media.media_type == 'model'
+              if media.media_type == 'model'
                 increment model_index
-              elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video'
+              elsif media.media_type == 'video' or media.media_type == 'external_video'
                 increment video_index
-              elsif featured_media.media_type == 'image'
+              elsif media.media_type == 'image'
                 increment image_index
               endif
             endcapture
             assign media_index = media_index | plus: 1
           -%}
           <li
-            id="Slide-Thumbnails-{{ section.id }}-0{{ id_append }}"
-            class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains featured_media.src %} {% comment %}thumbnail-list_item--variant --> .thumbnail-list_item--variant:not(:first-child) is the CSS{% endcomment %}{%   endif %}"
-            data-target="{{ section.id }}-{{ featured_media.id }}"
-            data-media-position="{{ media_index }}"
-            thumbnail-alt={{ featured_media.alt }}>
+            {% 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;"
+            {% endif %}
+            thumbnail-alt={{ media.alt }}
+            id="Slide-Thumbnails-{{ section.id }}-{{ forloop.index }}{{ id_append }}"
+            class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains media.src %} thumbnail-list_item--variant{% endif %}"
+            data-target="{{ section.id }}-{{ media.id }}"
+            {% if media.media_type == 'video' or media.media_type == 'external_video' %}
+            data-is-video-type="true"
+            {% endif %}
+            data-media-position="{{ media_index }}">
+
+            {%- if media.media_type == 'model' -%}
+              <span class="thumbnail__badge" aria-hidden="true">
+                {%- render 'icon-3d-model' -%}
+              </span>
+            {%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}
+              <span class="thumbnail__badge" aria-hidden="true">
+                {%- render 'icon-play' -%}
+              </span>
+            {%- endif -%}
             {%- capture thumbnail_id -%}
-              Thumbnail-{{ section.id }}-0{{ id_append }}
-            {%- endcapture -%}
+                Thumbnail-{{ section.id }}-{{ forloop.index }}{{ id_append }}
+              {%- endcapture -%}
             <button
               class="thumbnail global-media-settings global-media-settings--no-shadow"
-              aria-label="{%- if featured_media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif featured_media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
+              aria-label="{%- if media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
+              {% if media == product.selected_or_first_available_variant.featured_media or product.selected_or_first_available_variant.featured_media == null and forloop.index == 1 %}
               aria-current="true"
+              {% endif %}
               aria-controls="GalleryViewer-{{ section.id }}{{ id_append }}"
               aria-describedby="{{ thumbnail_id }}">
               {{
-                featured_media.preview_image | image_url: width: 416 | image_tag: loading: 'lazy', sizes: sizes, widths: '54, 74, 104, 162, 208, 324, 416', id: thumbnail_id, alt: featured_media.alt | escape
+                media.preview_image | image_url: width: 416 | image_tag: loading: 'lazy', sizes: sizes, widths: '54, 74, 104, 162, 208, 324, 416', id: thumbnail_id, alt: media.alt | escape
               }}
             </button>
           </li>
-        {%- endif -%}
+        {%- endfor -%}
       </ul>
       <button
         type="button"