在 Shopify / Liquid 中添加非特色图片的预览

Question

在 Shopify 上，产品卡片显示 'featured media'（即所有图片的第一张图片），使用以下 liquid 代码（这是使用默认的 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]访问第二个媒体。

有用的链接：

在 Shopify / Liquid 中添加非特色图片的预览

Adding preview of Non-featured image in Shopify / Liquid

liquid

shopify