Добавление предварительного просмотра неэкспонированного изображения в Shopify / Liquid

Question

На Shopify на карточках продуктов отображаются «избранные носители» (то есть первое изображение всех его изображений) с использованием следующего жидкого кода (используется тема Shopify по умолчанию).

  {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
  {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
  {%- assign preview_image = product.featured_media.preview_image -%}
  {%- assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

  {% unless preview_image == blank %}
    {% include 'image-style', image: preview_image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
  {% endunless %}

Я хочу отображать другое изображение (например, второе) при наведении курсора на продукт. Это означает, что мне нужно иметь возможность вызывать другое изображение, а не только выбранное изображение.

Как изменить код из product.featured_media вместо того, чтобы называть другое изображение?

Большое спасибо!

Answer 1

Вы можете использовать атрибут product.media для доступа ко всем элементам мультимедиа, назначенным продуктам.

Это массив, поэтому вы можете использовать циклы, например,

{% for media in product.media %}
  {{ media | img_tag }}
{% endfor %}

Следовательно, вы можете получить доступ ко второму носителю, используя product.media[1].

Полезные ссылки:

• Фильтры мультимедиа
• Добавление мультимедиа в темы