MODX. Сниппет BannerY. Создание удобного слайдера в MODX при помощи BannerY
Отредактировано: 15 Марта 2023
Большинство авторов описывают создание слайдера при помощи MIGX, но такой способ весьма не удобен, поскольку требует привязки к ресурсу. Куда более удобным компонентом для этих целей является BannerY, как всегда, от несравненного Василия Наумкина.
Итак, для организации бэкэнд части слайдера понадобиться:
- Установить дополнение BannerY;
- Создать 2 чанка с шаблонами: шаблон для элемента и шаблон для обертки;
- Зайти в меню Extras (Пакеты) в пункт BannerY;
- В открывшемся окне перейти на 2 вкладку «Позиции» и создать новую позицию;
- Перейти на 1 вкладку «Баннеры», и создать необходимое количество баннеров, задать каждому имя, изображение и выбрать специальную позицию;
- Перейти в нужное место шаблона и вызвать сниппет
[[!BannerY? &tpl=`tpl.slider-item` &tplWrapper=`tpl.slider-wrap` ]]
Пример чанка tpl.slider-wrap
<div class="slider-block js-slider">
[[+output]]
</div>
Пример чанка tpl.slider-item
<div class="slider-img-wrap">
<img src="{$image}" alt="{$name}">
</div>
Не забудьте написать css и подключить скрипт слайдера в js файлах вашего сайта, например так:
<script src="/assets/templates/def/js/jquery-3.3.1.min.js"></script>
<script src="/assets/templates/def/js/slick.min.js"></script>
<script> $('.js-slider').slick({}); </script>
Поля интерфейса «Баннеры» в компоненте BannerY:
- Название — любое название баннера, чтобы вам было удобно ориентироваться по ним в админке.
- Источник медиа — необязательный параметр. Картинки можно хранить на удалённых серверах, подключенных через источники медиа. По умолчанию будут местные файлы.
- Включен — переключатель активности баннера.
- Новое изображение — выберите предварительно загруженное изображение. Будут показаны файлы из выбранного источника.
- URL — место назначения баннера. Можно указывать страницы своего сайта или url - для этого нужно набрать адрес с
http://. - Текст баннера — любой произвольный текст, его можно будет вывести в подписи к баннеру.
- Позиции — выбор позиций, для которых показывается этот баннер. Их нужно создать предварительно в соседней вкладке.
Плейсхолдеры сниппета BannerY:
- [[++bannery_click]] — устанавливается в href параметр ссылки, отлавливает клик по баннеру;
- [[+adposition]] — номер баннера;
- [[+image]] — изображение;
- [[+name]] — название;
- [[+description]] — описание;
- [[+url]] — ссылка.
Тонкости при работе с BannerY:
В текущей версии компонента нет возможности выбрать в качестве ссылки на изображение сторонний ресурс. При указании ссылки на изображение, находящееся на другом сайте, перед ссылкой подставляется слэш. Самый легкий способ решения этой проблемы — использование модификатора в шаблоне вывода баннера:
// модификатор убирает первый слеш при выводе изображения на сайте
<img src="{$image | preg_replace : '~^/~': ''}"/>
Еще одна особенность работы компонента заключается в ссылке на несуществующую страницу сайта. Поисковики видят ссылки как /bannerclick/5?id=2246 и в отчетах жалуются на то, что эти страницы заблокированы файлом robots.txt, хотя страницы таковыми не являются. Чтобы исключить эти показания из отчетов, заблокируйте страницы в robots.txt
Disallow: /bannerclick/