Приветствую, коллеги!

После нашумевшей публикации о плагине 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-файлов прямо на странице:

{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.

Набор шорткодов для Joomla