Описание

Пакет включает в себя 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}

Предустановленные макеты

Макет по умолчанию для 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>

WT JSwiper - SWiper.js для Joomla-разработчиков

WT Lightbox2.js для Joomla разработчиков