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 theme，我建议在 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>

集合中的某些图像要比其他图像大

2 个答案: