WT Content Image Gallery


WT Content Image Gallery

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} - 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

LayoutDescription
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

What's new

First package verison

Addition

WebTolk Joomla Extensions

69 Extensions
9 Categories
271 Versions released
236565 Downloads
Cart
Cart is empty