Question

我希望在Boundless主题集合产品网格中插入静态非产品图片，以便将其删除一些，并为我的服装店添加一些额外的视觉内容。

Prod1，Prod2，Prod3，NonProd1，Prod4，Prod5，NonProd2，Prod6，Prod7等等。

出于美观原因，插入的图像需要不规则地放置，因此控制它们所处的位置将是有用的。

有没有办法通过修改或替换collection.liquid或其他模板来实现这一目的？在液体文件中我觉得有一个循环系统，但不幸的是我无法弄明白。

我的收藏品不会改变尺寸，我很高兴每个系列都有不同的液体模板。

我一直在调整和修改无边的主题以获得我想要的东西，有一天我将重新开始使用Timber，但是现在这有点超出我的范围......

感谢您的帮助。

Answer 1

集合模板使用for循环，在for循环内，您可以访问以下forloop.index，它返回当前的迭代编号。

因此，在集合文件中，您可以添加以下内容。

{% if forloop.index == 4 %}
    <div class="non-product">
        <img src="SRC" alt="">
    </div>
{% endif %}

如果您想要更多地控制它，您可以为数字4设置主题设置选项，并从主题设置面板更改它，这样您就不必每次都从代码中修改它。

Answer 2

有几种方法，它实际上取决于您希望如何管理它以及您想要实现的具体目标。

如果您真的想要策划图像，可以使用config/settings_schema.json或/sections

您需要做的就是在架构中定义一个image或image_picker，如下所示：

  {
    "type": "image_picker",
    "id": "image_id",
    "label": "Image"
  },

然后您可以像{{ settings.image_id }}

那样引用选择的图像

以上是针对网站设置架构，这些部分基本相同，但确实有一些重要的细微差别，因此值得完全阅读所提供的资源。

或者，如果你想展示产品特色图片，你可以做一个循环的集合：最近的是集合的句柄。

{% for product in collections.most-recent.products %}
  <a href="{{ product.url }}">
    {{ product.featued_image }}
  </a>
{% endfor %}

如果您不确定可用的对象或标签，则Cheatsheet为go to。