Некоммерческие изображения в сетке сбора информации о сетчатой ​​сетке

Question

Я хотел бы вставить статические непродуктовые изображения в сетку продуктов для коллекции тематических коллекций Boundless, чтобы немного нарезать ее и добавить в свой магазин одежды дополнительный визуальный контент ,

Что-то вдоль линий Prod1, Prod2, Prod3, NonProd1, Prod4, Prod5, NonProd2, Prod6, Prod7 т.д.

Вставленные изображения должны были бы быть неправильно размещены по эстетическим причинам, так что контроль, где они сидеть было бы полезно.

Есть ли способ достичь этого путем изменения или замены коллекции.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_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.