
WT Content Image Gallery
Image gallery plugins package for insertion into Joomla articles and modules, as well as wherever the content group plugins work.
Description
Shortcode
{gallery}...{/gallery}
- layoutdefault
{gallery tmpl=tmplName}...{/gallery}
- layouttmplName.php
inplugins/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
Layout | Description |
---|---|
default |
Adaptive Bootstrap 5"wall" photos. This is a sample file. Create your own layouts based on it with your own scripts. |
bs5-carousel |
Bootstrap 5 image slider with default settings. |
wt-lightbox2 |
Lightbox2 image gallery with default settings. Requires an installed plugin WT Lightbox 2, which connects Lightbox2 in Joomla 4. |
wt-swiper-carousel |
Swiper.js image gallery with default settings. Requires an installed plugin WT JSwiper, which connects Swiper.js in Joomla 4. |
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>
Joomla
- Extension type:
- Package
- Package composition:
- Package
- Joomla version:
- 4.3.0