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

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

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

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

На примере

[[+_alt:is=`1`:then=`
<h2>[[+title]]</h2>
<img alt="[[+title]]" src="[[+img]]">
<p>[[+text]]</p>
`:else=`
<h2>[[+title]]</h2>
`]]

В этом примере если элемент четный (второй, четвертый, шестой и т.д.), то будет выводится конструкция из Заголовка [[+title]], Изображения [[+img]] и Текста [[+text]]. А если элемент не четный (первый, третий, пятый и т.д.), то только Заголовок [[+title]].

В моем случае нужно было лишь добавлять class или нет и конструкция выглядела примерно так

<section class="imageblock switchable [[+_alt:is=`1`:then=`switchable--switch`:else=``]]">
    ....
</section>

Здесь, если четный элемент - то добавляется класс switchable--switch, если не четный - то ничего не добавляется.

Всем спасибо за внимание, до следующих уроков.

Если вы не видите кнопку "Скачать"
отключите блокировщик рекламы

Комментарии ()

  1. Юрий 28 июля 2021, 16:05 # 0
    Для класса достаточно было CSS: div:nth-of-type(2n). Пример из статьи мне помог. Спасибо!
    1. Алексей 28 июня 2022, 07:39 # 0
      А как добавить код в каждый третий результат?
      1. Эрадж Шамс 22 июля 2022, 07:23 # 0
        К сожалению, пока не понял как добавить код в каждый третий элемент. В проектах делаю так:
        [[+idx:is=`1`:then=`чанк1`]]
        [[+idx:is=`2`:then=`чанк2`]]
        [[+idx:is=`3`:then=`чанк3`]]
        
        и так далее. пока так. Может кто знает лучшее решение?

      Не то, что искали? Воспользуйтесь поиском