sigplus is not only easy to get started with but comes with a number of customization options. This article demonstrates some of the more advanced features sigplus has to offer.
Getting started
After you installed and enabled the extension on your site for the first time, the following settings are shown on the Advanced settings tab of the sigplus configuration page in the administration back-end:
- Download access level: Disabled
- Metadata access level: Disabled
- Image protection: No
- Preview margin: Default
- Preview border style: default
- Preview border width: default
- Preview border color: (Choose)
- Preview padding: Default
- Image sort criterion: labels file (file name)
- Image sort order: ascending
- Recursion depth: 0
- Watermark position: none
- Distance from horizontal: (empty)
- Distance from vertical: (empty)
- Filename for watermark: (empty)
- Thumbnail width: 60
- Thumbnail height: 60
- Crop when resizing: No
- Lightbox transition effect: sinusoidal
- Rotator item alignment: center
- Rotator transition effect: sinusoidal
- Image title template: (empty)
- Image summary template: {$text} ({$current}/{$total})
- Folder for caching images: Joomla cache folder
- Thumbnail folder: thumb
- Preview folder: preview
- Folder for originals: fullsize
- Folder for watermarking: watermarked
- Generated image quality: 85
- Filename for labels: labels.txt
- Use multilingual labels: No
- Gallery activation tag: gallery
- Lightbox activation tag: lightbox
The examples below demonstrate using advanced settings as well as customizing basic settings. As with basic usage, the examples show both approaches to setting parameters: (1) configuration from the back-end interface and (2) using in-line parameter name and value pairs in the activation tag. In the first part of the examples you find the parameters that have to be changed in the administration back-end in order to customize all galleries. If you want to customize a specific gallery in the body of an article, use the parameter names you find at the end of each example.
How to add border to preview images
Configuration in the administration back-end
Basic settings:
- Image row count: 2
- Image column count: 3
- Alignment on page: center
- Slideshow delay (in ms): 5000
- Image rotator orientation: vertical
Advanced settings:
- Preview margin: 4
- Preview border style: dotted
- Preview border width: 2
- Preview border color: dark red (#520909)
- Preview padding: 2
All other settings are unchanged with respect to their defaults.
Description and live example
A gallery is shown with two rows and three columns aligned in the center. Pressing the slideshow control button in the pop-up window will start a slideshow in which each subsequent image is displayed automatically after 5 seconds. Rows move vertically by clicking on the navigation links. There is margin around every preview image, clearing a completely transparent 4 px wide area around the border. A 2 px wide, dark red dotted border is displayed around all the previews. Padding lies between the preview and the border, a transparent area which is 2 px wide.
Usage in article text
{gallery rows=2 cols=3 alignment=left lightbox_slideshow=5000 rotator_orientation=vertical preview_border_style=dotted preview_border_width=2 preview_border_color="#520909" preview_margin=4 preview_padding=2}myfolder{/gallery}
Sorting images by a custom criterion
Configuration in the administration back-end
Basic settings:
- Image row count: 1
- Image column count: 4
- Lightbox navigation bar: in caption area
- Animation delay (in ms): 2000
Advanced settings:
- Preview margin: 4
- Preview border style: double
- Preview border width: 3
- Preview border color: deep sky blue (#216b80)
- Preview padding: 3
- Image sort criterion: file size
- Image sort order: ascending
All other settings are unchanged with respect to their defaults.
Description and live example
The example shows as a gallery with one row and four columns. In the pop-up window the navigation bar lies in the caption area, above the image title. Two seconds pass between successive automatic slide steps when the mouse moves away from over the rotator. The margin has a width of 4 px and a 3 px wide deep sky blue double-line border that surrounds all the previews. Padding is 3 px wide. Images are sorted according to their size and are shown in ascending order (smallest file size first).
Usage in article text
{gallery rows=1 cols=4 lightbox_thumbs=outside rotator_delay=2000 preview_margin=4 preview_border_style=double preview_border_width=3 preview_border_color="#216b80" preview_padding=3 sort-criterion=filesize sort-order=asc}myfolder{/gallery}
Customizing sort options
Images in a gallery can be presented according to many different sort criteria both in ascending and descending order. Primarily, images follow the order they are listed in the labels file but other sort options include file name, last modification time, or random arrangement (images are shuffled each time the page is loaded).
Configuration in the administration back-end
Basic settings:
- Image row count: 3
- Image column count: 2
- Alignment on page: center
- Lightbox pop-up type: boxplus light color theme
- Lightbox navigation bar: in caption area
- Slideshow delay (in ms): 5000
- Autostart slideshow: yes
- Trigger action step: page
Advanced settings:
- Preview margin: 5
- Preview border style: 3D ridged
- Preview border width: 5
- Preview border color: golden rod (#daa520)
- Preview padding: 4
- Image sort criterion: file name
- Image sort order: descending
Description and live example
This example shows a gallery with three rows and two columns centered on the page. Clicking on any previews will bring up the pop-up window with a white color theme. The lightbox navigation bar lies in the caption area and without pressing the control button the slideshow will start immediately as soon as the pop-up window appears. The image rotator advances by a whole page when using navigation controls Previous and Next. The preview images are surrounded by a 5 px wide margin, a 5 px wide golden ridged 3D border and a 4 px wide padding. Images in the gallery are sorted according to their filenames, following one another in descending order.
Usage in article text
{gallery rows=3 cols=2 alignment=center rotator_step=page lightbox=boxplus/light lightbox_thumbs=outside lightbox_slideshow=5000 preview_margin=5 preview_border_style=ridge preview_border_width=5 preview_border_color="#daa520" preview_padding=4 sort-criterion=filename sort-order=desc}myfolder{/gallery}
How to change the thumbnail width and height
Configuration in the administration back-end
Basic settings:
- Image row count: 2
- Image column count: 2
- Alignment on page: left with text wrapping around
- Image rotator orientation: vertical
- Animation delay (in ms): 4000
- Image caption position: above
Advanced settings:
- Preview margin: 4
- Preview border style: 3D outset
- Preview border width: 2
- Preview border color: forest green (#1c451c)
- Preview padding: 3
- Thumbnail width: 70
- Thumbnail height: 50
- Crop when resizing: yes
Description and live example
This example shows a gallery with two rows and two columns on the left side, where the text is allowed to wrap around the previews. The rows move from downwards to upwards automatically, four seconds pass between slide steps when the mouse moves away from over the rotator. The image captions display above the previews. Margin around the borders is 4 px wide. The border has 2 px width, forest green color and is shown in 3D outset style. The padding surrounding the previews is 3 px wide. All the thumbnails shown in the pop-up window have the same width and height of 70x50 px regardless of their original size.
Usage in article text
{gallery rows=2 cols=2 alignment=left-float rotator_orientation=vertical rotator_delay=4000 caption_position=above preview_margin=4 preview_border_style=outset preview_border_width=2 preview_border_color="#1c451c" preview_padding=3 thumb_width=70 thumb_height=50 thumb_crop=yes}myfolder{/gallery}
How to make captions remain always on top
Configuration in the administration back-end
Basic settings:
- Image row count: 2
- Image column count: 3
- Maximum image count: 5
- Alignment on page: center
- Lightbox pop-up type: boxplus light color theme
- Slideshow delay (in ms): 7000
- Image rotator orientation: vertical
- Trigger action step: page
- Image caption visibility: always
- Image caption position: overlay top
Advanced settings:
- Preview margin: 4
- Preview border style: 3D outset
- Preview border width: 2
- Preview border color: brown (#4f2105)
- Preview padding: 3
- Thumbnail width: 40
- Thumbnail height: 40
- Crop when resizing: yes
Description and live example
The result is a gallery with two rows and three columns in the middle of the page. Clicking on any of the previews will bring up a pop-up window with a white background and rounded corners. Pressing the control button will start a slideshow that displays the next image automatically after 7 seconds. The rotator advances vertically by a whole page when you use the navigation links Next and Previous. Image captions can be seen permanently in the upper part of the previews. 2 px wide brown borders in 3D outset style are shown around the 3 px wide padding. Margin has a width of 4 px. Each thumbnail in the pop-up window has the same width and height, which is 40x40 px.
Usage in article text
{gallery rows=2 cols=3 maxcount=5 alignment=center lightbox=boxplus/light lightbox_slideshow=7000 rotator_orientation=vertical rotator_step=page caption_visibility=always caption_position=overlay-top preview_margin=4 preview_border_style=outset preview_border_width=2 preview_border_color="#4f2105" preview_padding=3 thumb_width=40 thumb_height=40 thumb_crop=yes}myfolder{/gallery}
How to change the lightbox and the rotator transition effect and the rotator item alignment
Configuration in the administration back-end
Basic settings:
- Image row count: 1
- Image column count: 1
- Alignment on page: left with text wrapping around
- Lightbox pop-up type: boxplus dark color theme
- Lightbox navigation bar: in caption area
- Navigation trigger: mouseover
Advanced settings:
- Preview margin: 5
- Preview border style: 3D ridged
- Preview border width: 5
- Preview border color: silver
- Preview padding: 4
- Lightbox transition effect: circular
- Rotator item alignment: east
- Rotator transition effect: exponential
Description and live example
The result is a gallery with one row and one column on the left side. Text is allowed to wrap around the preview. A pop-up window with a black background and rounded corners will display if you click on the preview image. The thumbnails are shown in the caption area. Moving the mouse pointer over the control links near the preview causes the rotator to start advancing. The border is 5 px wide, has silver color, shows in 3D ridged style, and is surrounded by a 5 px wide margin. Padding around the preview is 4 px wide.
Usage in article text
{gallery rows=1 cols=1 alignment=left-float lightbox=boxplus/dark lightbox_thumbs=outside rotator_trigger=mouseover preview_margin=5 preview_border_style=ridge preview_border_width=5 preview_border_color="silver" preview_padding=4 lightbox_transition=circular rotator_alignment=e rotator_transition=exponential}myfolder{/gallery}
How to place a watermark on the images
sigplus can process the lossy image format JPEG, as well as the lossless image formats GIF, PNG and WEBP, both with index and alpha channel transparency. For all image formats, sigplus supports watermarking. A watermark is a PNG file with transparency channel (i.e. the image has RGBA color scheme) placed either in the same folder where the images to be shown are (specified within the plug-in activation start and end tags), or in the image base folder (specified in the administration back-end). Thanks to support for alpha channel transparency, the watermark blends nicely into the image background on which it is superimposed.
Configuration in the administration back-end
Basic settings:
- Image row count: 3
- Image column count: 2
- Alignment on page: left with text wrapping around
- Lightbox pop-up type: boxplus light color theme
- Slideshow delay (in ms): 3000
- Autostart slideshow: yes
- Image caption position: below
Advanced settings:
- Preview margin: 6
- Preview border style: solid
- Preview border width: 2
- Preview border color: dark violet (#541054)
- Preview padding: 3
- Watermark position: southeast
- Distance from horizontal: 12
- Distance from vertical: 7
- Filename for watermark: watermark.png
- Lightbox transition effect: linear
- Rotator item alignment: west
- Rotator transition effect: linear
Description and live example
This example shows a gallery with three rows and two columns on the left-hand side of the page. Text is allowed to wrap around the previews. The pop-up window displays with a white background. The slideshow will start immediately as soon as the pop-up window appears, there is no need to press the control button. During the slideshow three seconds pass between navigating to successive images. Image captions show up below the previews. A 2 px wide dark violet solid border belongs to all the previews. Margin around the borders has a width of 6 px, and a 3 px wide padding surrounds the previews. Each image in the pop-up window is watermarked in the bottom right (southeast) corner. The distance of the watermark from the edge of the image is 12 px horizontally and 7 px vertically.
Usage in article text
{gallery rows=3 cols=2 alignment=left-float lightbox=boxplus/light lightbox_slideshow=3000 lightbox_autostart=1 caption_position=below preview_margin=6 preview_border_style=solid preview_border_width=2 preview_border_color="#541054" preview_padding=3 watermark-position=se watermark-x=12 watermark-y=7 watermark_source=watermark.png lightbox_transition=linear rotator_alignment=w rotator_transition=linear}myfolder{/gallery}
How to make the images downloadable
Images with high resolution (e.g. with size much larger than ~600 x 800 pixels) are usually not suitable for use on a website because they take considerable time to display on the client computer due to network latency. Besides, sigplus may easily run into memory allocation problems on the server when trying to load huge images into system memory in order to generate preview images. In addition, some pop-up window engines lack an auto-resize feature and/or do not allow saving an image by right-clicking the magnified image in the pop-up window and selecting a local folder to download to.
To remedy these issues and ensure maximum performance, sigplus classifies images into four categories in increasing order of detail: thumbnails, preview images, images displayed in a pop-up window, and high-resolution images. Thumbnails and preview images are typically generated by sigplus but images to be displayed and optional high-resolution images are to be uploaded by the site maintainer. When the user clicks the download icon, sigplus checks whether a high-resolution image version is available in a subfolder of the image gallery folder (the name of the subfolder is fullsize by default). If yes, the user is prompted to select a local folder for this high-resolution image. Otherwise, the user is prompted to save the same image as displayed in the pop-up window. This approach is a best of two worlds: you can have your visitors shown moderately-sized images quickly while they are browsing the gallery in the pop-up window, and let them download images they are interested in with full detail.
For example, suppose your images apple.jpg and banana.jpg are in the folder images/stories/fruit. Should you wish to let visitors download a high-quality version of apple.jpg, you should create a folder images/stories/fruit/fullsize and upload the high-quality version into that folder (the file name has to be the same so that sigplus knows which high-resolution image belongs to which moderate-quality version). When a visitor clicks the download icon, they will be prompted to download images/stories/fruit/fullsize/apple.jpg for apple.jpg and images/stories/fruit/banana.jpg for banana.jpg.
Configuration in the administration back-end
Basic settings:
- Image row count: 1
- Image column count: 2
- Alignment on page: right with text wrapping around
- Lightbox navigation bar: hide
- Slideshow delay (in ms): 2000
- Autostart slideshow: yes
- Animation delay (in ms): 1000
Advanced settings:
- Download access level: Guest
- Metadata access level: Guest
- Preview margin: 4
- Preview border style: 3D grooved
- Preview border width: 3
- Preview border color: dark green
- Preview padding: 3
Description and live example
The above example shows a gallery with one row and two columns on the right side of the page. The text wraps around the previews. The slideshow in the pop-up window starts automatically and shows the next image in two seconds. Thumbnails are hidden. One second passes between successive automatic slide steps when the mouse moves away from over the rotator. Only anonymous (guest) users can download the images and access image metadata such as the person who took the image, location and camera information. Preview margin is 4 px, padding is 3 px wide. 3 px wide dark green 3D grooved borders display around the previews.
Usage in article text
{gallery rows=1 cols=2 alignment=right-float lightbox_thumbs=none lightbox_slideshow=2000 lightbox_autostart=1 rotator_delay=1000 preview_margin=4 preview_border_style=groove preview_border_width=3 preview_border_color="#006400" preview_padding=3 download="Guest" metadata="Guest" caption_source=filename}myfolder{/gallery} 
