How to change to images rendering order

iPutin
Tourist
8 1 0

On the main product page the images are displayed in default order, I have to change the rendering order: that is. the first picture should be displayed instead second, but second instead the first one. The rest images displaying without changes. How can I achieve this rendering order ?  
I am attaching the code part where image rendering happen. 

main-product

<ul class="product__media-list grid grid--peek list-unstyled slider slider--mobile" role="list">
{%- if product.selected_or_first_available_variant.featured_media != null -%}
{%- assign media = product.selected_or_first_available_variant.featured_media -%}
<li class="product__media-item grid__item slider__slide{% if media.media_type != 'image' %} product__media-item--full{% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">
{% render 'product-thumbnail', media: media, position: 'featured', loop: section.settings.enable_video_looping, modal_id: section.id %}
</li>
{%- endif -%}
{%- for media in product.media -%}
{%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
<li class="product__media-item grid__item slider__slide{% if media.media_type != 'image' %} product__media-item--full{% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">
{% render 'product-thumbnail', media: media, position: forloop.index, loop: section.settings.enable_video_looping, modal_id: section.id %}
</li>
{%- endunless -%}
{%- endfor -%}
</ul>


product-thumbnail

<modal-opener class="product__modal-opener product__modal-opener--{{ media.media_type }} no-js-hidden" data-modal="#ProductModal-{{ modal_id }}">
<span class="product__media-icon motion-reduce" aria-hidden="true">
{%- liquid
case media.media_type
when 'video' or 'external_video'
render 'icon-play'
when 'model'
render 'icon-3d-model'
else
render 'icon-zoom'
endcase
-%}
</span>

<div class="product__media media" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;">
<img
srcset="{% if media.preview_image.width >= 288 %}{{ media.preview_image | img_url: '288x' }} 288w,{% endif %}
{% if media.preview_image.width >= 576 %}{{ media.preview_image | img_url: '576x' }} 576w,{% endif %}
{% if media.preview_image.width >= 750 %}{{ media.preview_image | img_url: '750x' }} 750w,{% endif %}
{% if media.preview_image.width >= 1100 %}{{ media.preview_image | img_url: '1100x' }} 1100w,{% endif %}
{% if media.preview_image.width >= 1500 %}{{ media.preview_image | img_url: '1500x' }} 1500w{% endif %}"
src="{{ media | img_url: '1500x' }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: 0.64 | round }}px, (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)"
loading="lazy"
width="576"
height="{{ 576 | divided_by: media.preview_image.aspect_ratio | ceil }}"
alt="{{ media.preview_image.alt | escape }}"
>
</div>
<button class="product__media-toggle" type="button" aria-haspopup="dialog" data-media-id="{{ media.id }}">
<span class="visually-hidden">
{%- if position == 'featured' %}
{{ 'products.product.media.open_featured_media' | t }}
{%- else -%}
{{ 'products.product.media.open_media' | t: index: position }}
{%- endif -%}
</span>
</button>
</modal-opener>

 

Replies 0 (0)