equaled featured_media and normal pictures to keep picture sorted
parent
14a4d3d381
commit
8d037b8189
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue