How can I change the image rendering order on my product page?

Shopify Discussion
1

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




    {%- if product.selected_or_first_available_variant.featured_media != null -%}
    {%- assign media = product.selected_or_first_available_variant.featured_media -%}

  • {% render ‘product-thumbnail’, media: media, position: ‘featured’, loop: section.settings.enable_video_looping, modal_id: section.id %}

    • {%- endif -%}
    {%- for media in product.media -%}
    {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}

  • {% render ‘product-thumbnail’, media: media, position: forloop.index, loop: section.settings.enable_video_looping, modal_id: section.id %}

    • {%- endunless -%}
    {%- endfor -%}

product-thumbnail

|



{%- liquid
case media.media_type
when ‘video’ or ‘external_video’
render ‘icon-play’
when ‘model’
render ‘icon-3d-model’
else
render ‘icon-zoom’
endcase
-%}




<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 }}”
>



{%- if position == ‘featured’ %}
{{ ‘products.product.media.open_featured_media’ | t }}
{%- else -%}
{{ ‘products.product.media.open_media’ | t: index: position }}
{%- endif -%}




|
| - |