Among other more advanced topics, this article demonstrates how to create galleries that open with a custom hyperlink, how galleries work with both image and video items, and how sigplus can display galleries with images taken from a directory hierarchy.

sigplus supports activating a pop-up window to show a gallery by subscribing to the click event of a custom anchor. Suppose you would like to create a gallery but want to show the pop-up window for the gallery using a link rather than by having the visitor click one of the sigplus-generated preview images. First, create the gallery using the regular syntax but specify hidden as the layout to use and assign a unique id attribute to the gallery. If you use the plug-in, type

{gallery id=mygallery layout=hidden source=myfolder /}

The parameter layout=hidden is optional and tells sigplus not to show the gallery in place of the activation tag. (In fact, the gallery will be embedded in the page surrounded with a div element whose CSS style is set to display:none.) The parameter source=myfolder is an alternative way to specify the image source folder, and is meant to exclude the folder name from being picked up by the Joomla search engine, which indexes text in between the opening and closing activation tag but not in the activation tag parameter list or in compact activation tags such as this.

In contrast, if you use the module, you should use the Custom parameters text box in the Advanced parameters panel, and type the following in a separate line:

id=mygallery

Once the gallery has been included either as a (possibly hidden) embedded gallery or a module, type the following in the body of the same article:

{lightbox link=mygallery}Open gallery in pop-up window{/lightbox}

This will create a link with the text Open gallery in pop-up window. Notice the link attribute, which tells sigplus which gallery to open when a visitor clicks the link, which is typically the id of one of the hidden galleries but it can point to any visible gallery as well. When the visitor clicks the link, the pop-up window will be shown with the images in the gallery.

Because this syntax generates a normal HTML anchor, in addition to id and href, you can add parameters such as rel, class, style and title to customize appearance or add description text, the latter of which will show up as an image caption below the image in the lightbox pop-up window. These parameters to the lightbox activation tag will transform into HTML attributes of the anchor. For instance.

{lightbox href="https://farm5.staticflickr.com/4511/37974278361_b5bd85fcc8_o.jpg"
title="On the Hill-top, 1901"}A painting by Károly Ferenczy{/lightbox}

produces A painting by Károly Ferenczy.

You are not restricted to text inside the link, sigplus accepts any HTML content that is permitted inside a link. The following example illustrates that this includes images:

The Joomla logo

The code for the example above reads as follows:

{lightbox link=buildings}<img height="255" width="50" src="/sigplus/images/joomla_black.png" />{/lightbox}

Handling EXIF orientation

When you take a photo while holding a digital camera or a mobile phone in a position other than the upright position, and upload the image to be shown on a website, you might be surprised that the image appears rotated (e.g. a landscape image is shown in a portrait orientation). This is because cameras and browsers handle image orientation differently. Browsers display images strictly following the pixel order in the image file. Cameras, on the other hand, save image pixels is a set order (irrespective of how the device is held) but add an orientation tag obtained from the orientation sensor of the device. When the image is to be displayed, an application is expected to render pixels in accordance with the orientation tag, effectively rotating images as necessary. But browsers (sadly) ignore the orientation tag.

Unlike the standard browser <img> element, sigplus can extract and interpret orientation information embedded in the image EXIF metadata. If the image was taken e.g. with the camera upside down, sigplus will automatically rotate the image when displayed on screen in a lightbox pop-up window. In a similar way, when sigplus generates thumbnail and preview images, orientation metadata will be taken into account, and the image flipped and rotated as necessary to become upright. This is illustrated in the example below.

Image format WebP

sigplus has full support for the image format WebP, you can display WebP images in your galleries the same way GIF and JPEG images are shown. Provided your host server has appropriate PHP image processing libraries installed (e.g. GD, ImageMagick or GMagick with WebP support), thumbnail and preview images are generated automatically from their originals.

Multimedia galleries

sigplus allows you to mix images with video content in a gallery. For each video item, you must put a static image (so-called poster image) in the same folder where the video is, or else the video item will be omitted. (sigplus cannot currently extract a poster image from the video like browsers do.) The static image must have the exact same file name as the video, and a file extension that sigplus normally recognizes as an image (e.g. .jpeg or .png). For example, the video bunny.mpeg should have a bunny.jpeg put next to it. When a matching image is found, sigplus uses that matching static image to generate preview images and thumbnails but when you click a video gallery item, the lightbox pop-up window will show the video instead a static image (with normal HTML <video> element controls such as play and seek). For the plugin setting Lightbox navigation bar you might wish to choose in caption area so that the pop-up window quick-access navigation that is by default shown overlaying the main image bar does not cover video controls.

Galleries with nested folders

sigplus lets you create galleries in which images do not come from a single folder but any folder nested inside a top-level folder. For example, consider the following directory hierarchy where each directory has at least one image file in it:

sampledata
    fruitshop
    parks
        animals
        landscape

Suppose you have the following activation tag:

{gallery layout=flow depth=2 preview-width=100 preview-height=100}sampledata{/gallery}

With depth=2, sigplus takes images not only from the top-level folder sampledata but also nested folders fruitshop, parks, animals and landscape. With depth=1, only folders sampledata, fruitshop and parks would be considered but not folders animals and landscape.