
WT Content Image gallery
Пакет плагинов галереи изображений для вставки в материалы и модули Joomla, а так же везде, где работают плагины группы content.
Описание
Пакет включает в себя 2 плагина: группы content
и editors-xtd
, не забудьте включить их.
Шорт-код плагина
{gallery}...{/gallery}
- макетdefault
{gallery tmpl=tmplName}...{/gallery}
- макетtmplName.php
вplugins/content/wtcontentimagegallery/tmpl
Вставка галереи изображений Joomla
Путь к папке с картинками
{gallery tmpl=tmplName}images/path/to/images{/gallery}
Список путей к файлам, разделённые запятыми
{gallery tmpl=tmplName}images/photo_1.webp, images/folder1/photo_2.webp, images/folder4/folder16/photo_3.webp{/gallery}
HTML-код между тегами {gallery}...{/gallery}
{gallery tmpl=tmplName}<p> <img src="/images/photo_1.webp" alt="Alt attribute"/> </p> <ul> <li><img src="/images/folder_3/photo_114.webp" alt="Alt attribute"/> </li></ul>{/gallery}
Предустановленные макеты
Макет | Описание |
---|---|
default |
Адаптивная Bootstrap 5 "стена" фотографий. Это файл-образец. Создавайте на его основе свои собственные макеты со своими скриптами. |
bs5-carousel |
Bootstrap 5 слайдер изображений с настройками по умолчанию. |
wt-lightbox2 |
Lightbox2 галерея изображений с настройками по умолчанию. Требует установленного плагина WT Lightbox 2, который подключает Lightbox2 в Joomla 4. |
wt-swiper-carousel |
Swiper.js галерея изображений с настройками по умолчанию. Требует установленного плагина WT JSwiper, который подключает Swiper.js в Joomla 4. |
Макет по умолчанию для tmpl=default
Вы могли пользоваться ранее другими плагинами, которые используют тот же шорт код {gallery}...{/gallery}
. Чтобы не редактировать все старые статьи можно указать макет вывода по умолчанию для тех случаев, когда не указан параметр tmpl
или он равен tmpl=default
. Тогда все старые шорт-коды будут обрабатываться контент-плагином с указанным в его настройках макетом по умолчанию.
Демо видео
Создание собственных макетов галереи изображений
Макеты вывода находятся в папке tmpl
контент плагина - plugins/contents/wtcontentimagegallery/tmpl
. Скопируйте файл default.php, переименуйте его и внедрите свою HTML вёрстку и javascript. Желательно подключать файлы с помощью Web Asset Manager, сами скрипты размещать в папке media плагина либо оформлять самостоятельными плагинами, наподобие WT JSWiper. Подробно об этом написано в статье Использование WebAssetsManager Joomla 4 и добавление собственных пресетов с помощью плагина
<?php
/**
* @package WT Content Image gallery
* @version 1.0.0
* @Author Sergey Tolkachyov, https://web-tolk.ru
* @copyright Copyright (C) 2023 Sergey Tolkachyov
* @license GNU/GPL3
* @since 1.0.0
*/
use Joomla\CMS\HTML\HTMLHelper;
defined('_JEXEC') or die;
/**
* Note! This is a demo layout that shows how to access the list of images in PHP.
* It is not intended for use on websites and serves simply as a sample.
*
* @var $context string Like 'com_content.article'
* @var $images array Images array
* @var $iterator int regex iterator - 0, 1, 2 etc. Shortcode number
*
* For your images gallery layouts your can make unique id or data-attributes
* combining $context and $iterator.
* For example: <img src="'.$image['img_src'].'" id="'.$context.'-'.$iterator.'" />
* You will receive: <img src="/images/you-image.webp" id="com_content.article-0" />
*/
//echo '<pre>';
//print_r($images);
//echo '</pre>';
/**
* @var $unique string Unique string for unique id.
*/
$unique = str_replace(['-','.'],'_',$context).'_' . $iterator;
?>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5">
<?php foreach ($images as $image) :?>
<div class="col mb-3">
<?php
$img_attribs = [
'class' => 'img-fluid',
//'data-title' => 'You can specify any other image attribute like array key and value',
'id' => $context.'-'.$iterator
];
// Render image via Joomla HTMHelper class
echo HTMLHelper::image($image['img_src'], $image['img_alt'], $img_attribs);
?>
</div>
<?php endforeach; ?>
</div>
Joomla
- Тип расширения:
- Пакет
- Состав пакета:
- Пакет
- Версия Joomla:
- 4.3.0