Разное оформление каждого второго элемента в getImageList (MIGX) и PageBlock

При создании сайтов на MODX часто возникает необходимость стилизовать каждый второй элемент списка по-другому. Это может быть полезно для создания шахматного расположения блоков, выделения элементов, улучшения читаемости контента и общей эстетики. В этой статье рассмотрим три популярных способа работы со списками: getImageList (MIGX), pdoResources и PageBlock.

Разное оформление каждого второго элемента в getImageList (MIGX)

getImageList — это сниппет, используемый для вывода данных из TV-поля типа MIGX. Чтобы оформить каждый второй элемент по-другому, можно использовать плейсхолдер [[+_alt]], который отвечает за четный и нечетный вывод и встроенный модификатор Modx. Если элемент четный — [[+_alt]] выводит 1, если нет — 0. Вам остается в чанке вывода getImageList построить следующую конструкцию:

[[+_alt:is=`1`:then=`чанк1`:else=`чанк2`]]

Пример вызова getImageList:

[[getImageList?
    &tvname=`myMIGXtv`
    &tpl=`tpl.MyItem`
]]

Чанк tpl.MyItem с проверкой четности:

<div class="item [[+_alt:is=`1`:then=`item-alt`]]">
    <h3>[[+title]]</h3>
    <p>[[+description]]</p>
</div>

Объяснение кода:

• [[+_alt:is=`1`:then=`item-alt`]] — если элемент четный, добавляется класс item-alt.
• Нечетные элементы остаются с базовым классом item.

Разное оформление в PageBlock и MIGX (Fenom)

PageBlock — мощный инструмент для управления контентными блоками, это более юзабельная альтернатива MIGX, с по сути тем же синтаксисом если использовать шаблонизатор Fenom.

Пример использования в PageBlock / MIGX:

{foreach $blocks as $idx => $block}
    <div class="block {if $idx % 2 == 1}alt-style{/if}">
        <h3>{$block.title}</h3>
        <p>{$block.description}</p>
    </div>
{/foreach}

Объяснение кода:

• {if $idx % 2 == 1} — добавляет класс alt-style каждому второму элементу.
• Так же можете использовать {if $idx % 2 == 0} или {if $idx % 2 != 0} для нечетных: 1-й, 3-й, 5-й и т.д.

Дополнительный вариант (использование CSS для чередования)

Если не хочется править чанк, можно добавить стили CSS:

.resource-item:nth-child(even) {
    background-color: #f4f4f4;
}

Эти методы позволяют гибко управлять внешним видом списков и улучшать визуальное восприятие контента в MODX. Выбирай подходящий способ и применяй в своих проектах!