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

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> 

，然后改变这一行产品环。液体：

<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>