Приветствую, коллеги!
После нашумевшей публикации о плагине Joomla Shortcoder я получил множество вопросов (в математике такое множество называется «пустым») о том, как быстро начать использовать шорткоды в Joomla для типовых задач: вставить видео с YouTube или Rutube, документ Google Docs или просто сгенерировать «рыбу» для вёрстки. Поэтому сегодня я хочу представить вам Joomla Shortcodes — плагин, который содержит набор готовых шорткодов для вставки контента от популярных сервисов.
Кое-что о безопасности
В прошлой статье я забыл упомянуть одно из ключевых преимуществ использования шорткодов — безопасность (при правильной реализации, разумеется).
По умолчанию редактор Joomla (как и многих других CMS) блокирует теги script и iframe, чтобы предотвратить атаки вроде XSS или clickjacking. Шорткоды решают эту проблему без риска: в контенте остаётся лишь безопасный текстовый сниппет: {youtube}, {gist}, а финальный HTML генерируется на стороне сервера с полным контролем допустимых параметров. В итоге, вы получаете функциональность <iframe> или <script>, не открывая двери для потенциально опасного кода.
Установка
Процесс не отличается от установки любого расширения Joomla:
Скачайте последний релиз-архив (
.zip) с GitHub Releases.Перейдите в админ-панель: «Система» → «Установка» → «Расширения».
Загрузите скачанный архив.
Активируйте плагин «Content - Shortcodes» через «Система» → «Управление» → «Плагины».
Можно использовать CLI:
php cli/joomla.php extension:install https://github.com/PopArtDesign/joomla-shortcodes/archive/refs/tags/v1.2.0.zip
После этого все описанные ниже шорткоды станут доступны в любом тексте, который обрабатывается плагинами контента (статьи, категории, модули и т.д.).
Вставим!
YouTube
Вставка видео с YouTube, до «деградации серверов», была весьма востребованной функцией. Шорткод {youtube} поддерживает все основные параметры: авто-воспроизведение, отключение звука, начальное и конечное время, соотношение сторон и любые атрибуты для <iframe>.
{youtube https://www.youtube.com/watch?v=kBddBRQ-xic width=800 height=600}
Также можно передать URL видео внутри тега:
{youtube autoplay start=1:00 end=3:00 aspect-ratio=4/3}
https://www.youtube.com/watch?v=kBddBRQ-xic
{/youtube}
Формат времени: hh:mm:ss (час:минута:секунда). Можно просто указать количество секунд.
Параметры width и height применяются к обёртке <div>. Соотношение сторон можно указать через атрибут aspect-ratio. По умолчанию используется соотношение 16 / 9.
Если требуется изменять aspect-ratio в зависимости от размера экрана, можно использовать CSS-переменную --embed-video-aspect-ratio:
:root {
--embed-video-aspect-ratio: 4 / 3;
}
@media(min-width: 768px) {
:root {
--embed-video-aspect-ratio: 16 / 9;
}
}
Vimeo
Вставка видео Vimeo работает по тому же принципу:
{vimeo https://vimeo.com/123456789 autoplay start=30 end=60}
Rutube
Для российских пользователей добавлена поддержка Rutube:
{rutube https://rutube.ru/video/0a7e6d2a7c2b5f6a5b1c3d0b1e0a7b1c/ autoplay}
Google Docs
Вставка документов Google (Docs, Sheets, Slides) теперь одной строкой:
{googledocs}https://docs.google.com/document/d/a-valid-id/edit{/googledocs}
{googledocs https://docs.google.com/spreadsheets/d/a-valid-id/edit width=800 height=600}
GitHub Gist
Вставка сниппетов кода из GitHub Gists:
{gist https://gist.github.com/user/12345}
{gist https://gist.github.com/user/12345 file=example.php}
Просмотр PDF-файлов прямо на странице:
{pdf}https://example.com/document.pdf{/pdf}
{pdf /another.pdf width=600 height=800}
Высота по умолчанию — 75vh, что делает просмотр удобным на мобильных устройствах.
Lorem Ipsum
Генерация текста-«рыбы» для макетирования:
{lorem} — полный текст Lorem Ipsum
{lorem words=50} — 50 слов
{lorem p 3} — три параграфа
{lorem ul 3,5 words=5,10} — список с 3–5 пунктами по 5–10 слов
{lorem img width=300 height=200} — изображение-заглушка 300×200
Для изображений используется встроенная GD-библиотека PHP, так что не нужны внешние сервисы.
Repeat
Повтор содержимого заданное число раз (или случайное количество из диапазона):
{repeat 3}Hello, World! {/repeat}
{repeat 1,3}Beetlejuice! {/repeat}
Я предполагал использовать этот шорткод в паре с {lorem}, когда последний ещё не поддерживал HTML-теги. Сейчас {repeat} не выглядит очень полезным и, возможно, в будущем будет удалён.
Планы и развитие
Добавление шорткодов для Яндекс.Карт, VK Video
Шорткоды для Bootstrap-компонентов (аккордеоны, табы, модальные окна)
Интеграция с Joomla Custom Fields для ещё более гибкой работы с контентом
Если у вас есть идеи или вы хотите предложить pull request — вот репозиторий.
Благодарю за внимание! Буду рад вашим комментариям.
P.S. Если вы ещё не читали первую часть — рекомендую начать с неё, чтобы понять философию Shortcoder и принципы работы с шорткодами в Joomla.