Чередование расположения картинок в листинге 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)