WT Content Image Gallery

Description

Shortcode

• {gallery}...{/gallery} - layout default
• {gallery tmpl=tmplName}...{/gallery} - layout tmplName.php in plugins/content/wtcontentimagegallery/tmpl

Inserting images

Image path

{gallery tmpl=tmplName}images/path/to/images{/gallery}

Comma-separated list of file paths

{gallery tmpl=tmplName}images/photo_1.webp, images/folder1/photo_2.webp, images/folder4/folder16/photo_3.webp{/gallery}

HTML code between tags {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}

Preset layouts

Default layout for tmpl=default

You could have used other plugins earlier that use the same shortcode {gallery}...{/gallery}. In order not to edit all the old articles, you can specify the default output layout for those cases when the tmpl parameter is not specified or it is equal to tmpl=default. Then all the old short codes will be processed by the content plugin with the default layout specified in its settings.

Demo video (Russian language)

Creating your own image gallery layouts

The output layouts are located in the html plugin content folder - plugins/content/wtcontentimagegallery/tmpl. Copy the file default.php , rename it and embed your HTML layout and javascript. It is advisable to connect files using Web Asset Manager, place the scripts themselves in the media folder of the plug-in, or design them with independent plug-ins, like WT JSWiper.

<?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 for Joomla developers

WT Lightbox2.js for Joomla developers