仅循环遍历 Liquid 中的第一张图像

Question

我在 Shopify 中使用下一个代码来显示与变体图像中的 'alt' 文本匹配的图像。尽管我只通过 CSS 显示第一张图片，但此降价循环遍历所有图片并大大降低了页面速度；导致隐藏了很多图像。

有没有办法只循环第一张图片？

{% for image in product.images %}
 {% if image.alt == variant.title %}
  <img class="hidde" data-src="{{ image | img_url: '800x' }}" src="{{ image | img_url: '800x' }}" alt="{{ image.alt | escape }}" />
 {% endif %}
{% endfor %}

提前致谢，

Answer 1

如果您有多个图像 alt 具有相同的变体标题，您可以在匹配后打破循环。

{% for image in product.images %}
 {% if image.alt == variant.title %}
  <img class="hidde" data-src="{{ image | img_url: '800x' }}" src="{{ image | img_url: '800x' }}" alt="{{ image.alt | escape }}" />
  {% break %}
 {% endif %}
{% endfor %}

一旦 if 语句变为真，{% break %} 将停止循环。

但是所有这些都可以通过 where 过滤器来完成，就像这样：

{% assign title = variant.title %}
{% assign images = product.images | where: "alt", title %}
{% if images.size > 0 %}
  <img src="{{ images[0] | img_url: '800x' }}" alt="{{title | escape }}">
{% endif %}

仅循环遍历 Liquid 中的第一张图像

Looping only through first image in Liquid

loops

for-loop

liquid

shopify