Hello
I am a beginner and working on the Sahara theme. I need to add thumbnails below the gallery if there is more than one image.They should be scrollable on mobile and replace the main image when clicked.
https://sgpngaecqcwkic5m-45221478564.shopifypreview.com
Here is the current code of the gallery:
{% comment %}
Renders a slider slide or a modal trigger
Accepts:
- media: {Object} Liquid media object
- output_type: {String} Output type. Accepts slider-slide or modal-trigger
- media_index: {Number} Loop index for translatables
- modal_id: {String} Modal id
Usage:
{% render 'product-media', media: product.media, output_type: 'slider-slide' %}
{% render 'product-media', media: product.media, output_type: 'modal-trigger' %}
{% endcomment %}
{%-
liquid
assign media_is_active = false
assign current_variant_media = product.selected_or_first_available_variant.featured_media.id
if media.id == current_variant_media
assign media_is_active = true
elsif current_variant_media == blank and media_index == 0
assign media_is_active = true
endif
-%}
{%- if output_type == 'slider-slide' -%}
{% liquid
assign padding_bottom_minus_part = 100 | divided_by: media.preview_image.aspect_ratio
assign padding_bottom = 0
assign media_ratio_class = blank
if media.preview_image.aspect_ratio < 1
assign media_ratio_class = 'media--portrait'
assign padding_bottom = padding_bottom_minus_part | minus: 100 | round
elsif media.preview_image.aspect_ratio > 1
assign media_ratio_class = 'media--landscape'
assign padding_bottom = 100 | minus: padding_bottom_minus_part | round
endif
# assign preserve_aspect_ratio = true
%}
{%- case media.media_type -%}
{%- when 'video' -%}
{{- media | video_tag: muted: true, loop: true -}}
{%- else -%}
{%- when 'external_video' -%}
{% render 'external-video', video: media, video_id: media.external_id, video_type: media.host %}
{%- else -%}
{%-
liquid
assign image_src=media.preview_image | image_url: width: 500
capture image_srcset
render 'srcset', image: media.preview_image
endcapture
assign sizes = 'auto'
assign image_alt = media.alt | escape
render 'image', src: image_src, srcset: image_srcset, sizes: sizes, alt: image_alt, width: media.preview_image.width, height: media.preview_image.width | divided_by: media.preview_image.aspect_ratio | ceil
-%}
{%- endcase -%}
{%- elsif output_type == 'slider-slide-thumbs' -%}
{% liquid
assign padding_bottom_minus_part = 100 | divided_by: media.preview_image.aspect_ratio
assign padding_bottom = 0
assign media_ratio_class = blank
if media.preview_image.aspect_ratio < 1
assign media_ratio_class = 'media--portrait'
assign padding_bottom = padding_bottom_minus_part | minus: 100 | round
elsif media.preview_image.aspect_ratio > 1
assign media_ratio_class = 'media--landscape'
assign padding_bottom = 100 | minus: padding_bottom_minus_part | round
endif
# assign preserve_aspect_ratio = true
%}
{%- if media.media_type == 'model' -%}
{% render 'icon-3d-model' %}
{%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}
{% render 'icon-video' %}
{%- endif -%}
{%-
liquid
assign image_src=media.preview_image | image_url: width: 500
capture image_srcset
render 'srcset', image: media.preview_image
endcapture
assign sizes = 'auto'
assign image_alt = media.alt | escape
render 'image', src: image_src, srcset: image_srcset, sizes: sizes, alt: image_alt, width: media.preview_image.width, height: media.preview_image.width | divided_by: media.preview_image.aspect_ratio | ceil
-%}
{%- else -%}
{%- if media.media_type == 'image' -%}
{% render 'icon-zoom' %}
{{- 'products.product.media.open_media' | t: index: media_index -}}
{%- else -%}
{%- assign media_is_model = false -%}
{%- if media.media_type == 'model' -%}
{%- assign media_is_model = true -%}
{%- endif -%}
{%- endif -%}
{%- endif -%}
Could you help with the solution?
