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

【问题标题】：Adding preview of Non-featured image in Shopify / Liquid在 Shopify / Liquid 中添加非特色图片的预览
【发布时间】：2020-04-08 19:29:00
【问题描述】：

在 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 更改为调用不同的图像？

非常感谢！

【问题讨论】：

标签： shopify liquid

【解决方案1】：

您可以使用product.media 属性访问分配给产品的所有媒体项。

这是一个数组，因此您可以使用循环，例如

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

因此，您可以使用product.media[1] 访问第二个媒体。

有用的链接：

【讨论】：

非常感谢，没想到这么简单。非常感谢。