Блог/Чередование картинок

Чередование расположения картинок в листинге Ditto

Автор: Кудашев Сергей

Чтобы сделать дизайн сайта более оригинальным многие дизайнеры прибегают к разнообразию в выводе информации. На одном из проектов дизайнер решил чередовать превью (картинку к материалу) листинга справа и слева, чтобы дизайн выглядел более оригинальным и живым. Получилось действительно хорошо, но встал вопрос, как реализовать подобный функционал?

В Modx Evolution есть незаменимый сниппет Ditto, который позволяет за несколько минут сделать нужный листинг с нужным количеством элементов и пагинацией. Как оказалось в чанках вывода Ditto предусмотрен плейсхолдер под названием [+ditto_iteration+], который выводит номер итерации выводимого документы от 0 и до максимального количества документов в листинге. Опираясь на данный плейсхолдер мы можем чередовать вывод превью справа и слева. Для этого нам достаточно написать расширяющий плагин phx сниппет под названием: phx:evenodd.

<?php
if ($output % 2) {
	return 'evn';
} else {
	return 'odd';
}
?>

Данный сниппет получает на входе данные, в нашем случае число означающее итерацию документа, проверяет его на кратность двум, и если оно кратно двум выводит evn, если не кратно выводит odd.

Теперь в теле чанка, который отвечает за вывод листинга Ditto достаточно указать следующую конструкцию: <div class="[+ditto_iteration:evenodd+]">, после чего всем четным будет присвоен класс evn (картинка отразится слева), а всем нечетным будет присвоен класс odd (картинка отразится справа). Вот такое оригинальное и в тоже время простое решение, которое позволит сделать дизайн листинга более интересным и оригинальным.

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