shopify - 集合中的某些图像比其他图像更大

Question

我对编码比较陌生，过去 3 个月一直在尝试。

我正在使用shopify，问题是我需要每个集合页面中的第四张图片都比其他图片大。

当前主题：集合中 的最小当前代码：

<div class="row products">

{% for product in collection.products limit: settings.pagination_limit %}     
    {% include 'product-loop' with collection.handle %}
{% endfor %}

<div>

我进行了研究，可能与此有关，{% if forloop.index == 4 %}但我似乎仍然无法解决，因此我需要您的任何专业帮助。

Answer 1

关于什么：

{% for product in collection.products %}
   {% if forloop.index == 4 %}
     {{ product.featured_image | product_img_url: 'large' | img_tag }}
   {% else %}
     {{ product.featured_image | product_img_url: 'small' | img_tag }}
   {% endif %}
{% endfor %}

Answer 2

使用Minimal Shopify 主题，我建议在collection.liquid中执行以下操作：

<div class="row products">
  {% for product in collection.products limit: settings.pagination_limit %}
    {% if forloop.index == 4 %}
      {% assign image_size = 'large' %} 
    {% else %}
      {% assign image_size = 'small' %} 
    {% endif %}

    {% include 'product-loop' with collection.handle with image_size %}
  {% endfor %}
</div>

然后在product-loop.liquid中更改此行：

<img src="{{ product.featured_image | product_img_url: 'large' }}" alt="{{ product.title | escape  }}" />

对此：

<img src="{{ product.featured_image | product_img_url: image_size }}" alt="{{ product.title | escape  }}" />

一个集合中第 4 个产品的图片会很大，而所有其他产品图片会很小。但是，如果您希望每4 个产品图像都很大，则可以将其放在collection.liquid中：

<div class="row products">
  {% for product in collection.products limit: settings.pagination_limit %}
    {% capture image_size %}{% cycle 'small', 'small', 'small', 'large' %}{% endcapture %}
    {% include 'product-loop' with collection.handle with image_size %}
  {% endfor %}
</div>