Плагин Joomla 4 и 5 для баннеров пунктов меню: адаптивные изображения и видео со своими брейкпоинтами. Вывод на сайте верстает разработчик по образцу кода или в своих макетах.
WT Custom menu item banner добавляет пунктам меню Joomla собственный баннер — изображение или видео. Файлы и настройки баннера хранятся в параметрах пункта меню, а как баннер выглядит на странице, решает разработчик сайта. Плагин не даёт готового решения «в один клик»: вёрстку вывода нужно сделать самостоятельно, опираясь на образец кода. Для этого нужно знать HTML, CSS и основы PHP.
Возможности
- Адаптивные изображения и видео: для десктопов (ПК, ноутбуки, ТВ) — горизонтальный вариант, для мобильных устройств — вертикальный.
- Любое количество брейкпоинтов — диапазонов разрешений экрана со своим изображением или видео. Условия задаются в синтаксисе CSS-запросов
@media. - Отложенная загрузка видео: скрипт проверяет, какое видео подходит под параметры экрана, и загружает только его.
- Переключатель «Использовать баннер» в настройках пункта меню.
- Собственные макеты баннеров в папке плагина (с версии 1.2.0); нужный макет выбирается в настройках баннера пункта меню.
Вывод баннера
Образец кода получает параметры баннера активного пункта меню и, если баннер включён, выводит выбранный макет из папки plugins/system/wt_custom_menu_item_banner/tmpl. Код можно вставить прямо в index.php шаблона или сделать из него свой макет модуля «HTML-код» (mod_custom) в папке modules/mod_custom/tmpl и выбрать этот макет в настройках модуля. Образец использует Bootstrap 5.
Порядок адаптивных видео
Строки адаптивных видео проверяются сверху вниз: используется первая строка, чьё условие @media совпало, — и для видео, и для его обложки. Лучше задавать непересекающиеся диапазоны, например: вертикальное видео для мобильных до 991.98px, HD-видео от 992 до 1280px, Full HD — от 1281px. Строку без условия в качестве запасной ставят последней.
Подготовка изображений и видео
- Изображения подбирает дизайнер, для разных разрешений это не обязательно одна и та же картинка. Пример: 2880×1200 (1440×600, пропорция 12:5) для Full HD и выше, 600×750 (4:5) для мобильных. Предпочтительны современные форматы, например WebP.
- Видео — в mp4 с типичными пропорциями: 1280×720 или 1920×1080 для горизонтальных, квадрат или 450×800 для мобильных.
- Рекомендуемая длительность — до 10–15 секунд на десктопе и до 7–10 секунд на мобильных; размер файла — не больше 10 МБ и 2 МБ соответственно. Размер регулируется битрейтом и частотой кадров (25 кадров в секунду).
- Для видео задаётся обложка (атрибут
poster), например кадр из начала ролика. Видео с автовоспроизведением выводится без звука (атрибутmuted).
Совместимость и требования
- Joomla 4 и 5.
- Для вывода баннера — доработка шаблона или макета модуля.
