Kubik-Rubik Joomla! Extensions

Kubik-Rubik Joomla! Erweiterungen - Viktor Vogel

SIGE - Simple Image Gallery Extended

Simple Image Gallery Extended - Joomla! Plugin - Logo

Popular in the JED Joomla 2.5 native Joomla 3 native

Name: Simple Image Gallery Extended - Version: 2.5-6 / 3-3 - Type: Plugin - License: GPLv3 - Demo
Description: Creates galleries in Joomla! articles - with Turbo Mode
Developed by:

Overview of all downloads of the extension: SIGE - Simple Image Gallery Extended Downloads

If you use SIGE - Simple Image Gallery Extended, please post a rating and a review at the Joomla! Extensions Directory.

Description

SIGE creates galleries in Joomla! articles - with Turbo Mode

Plugin: SIGE - Simple Image Gallery Extended
Function: Gallery in article - Images are loaded automatically from a given path
Joomla Versions: 2.5
Languages: German / English
Bonus: Editor Button - SIGE Parameter

SIGE (Simple Image Gallery Extended) is a powerful gallery content plugin for Joomla!

It offers numerous opportunities to present pictures quickly and easily in articles. The special feature of the plugin is that you can control any parameter on the syntax call.

Editor Button - SIGE Paramaters: With the button you can set the parameters very easy on-the-fly in an article. It is a great addition to the SIGE.

Highligts are: parameter call, watermark function, read IPTC data, thumbnail storage, crop function, sort by modification date, output as a list, CSS Image Tooltip, Editor Button SIGE Parameter and much more

In version 1.7-2 SIGE was completely rewritten and equipped with numerous innovations. The absolute highlight is the turbo mode. This feature doesn't exist in any other plugin for Joomla!. In Turbo Mode 2 text files are created from the HTML output of the gallery and loaded in successive runs. This feature eliminates the tedious editing process of each image. In a test with 50 large images the creation of a gallery with all the extra features (save thumbnails, watermark generation, resize original images etc.) without turbo mode lasted approximately 17 seconds. In turbo mode, it only took 1 second and the gallery on the same scale was available! There are numerous improvements in the new version, they can be found in the changelog.

For calling the syntaxes, additionally an Editor Button has been programmed. This makes it very easy, to choose the required syntax, showing all the settings and parameters of the plugin. It is a great enrichment in using the SIGE plugin.

Features

  • Thumbnail generation and storage: Preview images are created and stored - faster loading, better quality
  • Valid XHTML 1.1 - CSS and JS files are included in the head section, eliminates syntax errors
  • Turbo Mode - whole gallery is loaded from a text file
  • Parameter call - individual galleries possible
  • Integration of Slimbox, Lytebox, Shadowbox, Milkbox and Mootools
  • Lytebox installed to display a slide show and avoidance of JS conflicts
  • Number of images displayed adjustable
  • Pictures can be displayed without a link -> web 1.0 gallery
  • Random order of the images
  • Sort by modification date possible
  • Captions
  • Read IPTC data (title and description)
  • Read text file (title and description) - support for multilingual files
  • Print option - print image easily in the JS view
  • Download Option - download image with one click
  • Show single image (no gallery and with gallery)
  • List view - image output as a list
  • Crop function
  • Watermark function
  • CSS Image Tooltip
  • Editor Button - SIGE Parameter
  • Link words with gallery
  • Original image can be resized
  • An index.html is automatically generated in each image folder, to protect against the reading of the content by the browser
  • Backend German / English and some more languages

Installation

Install the plugin in the backend and enable it under Extensions - Plugin-Manager - Simple Image Gallery Extended

Update

A new version can be easily installed over an existing installation. Of course you can uninstall an older version first or replace files via ftp (path: plugins/content (J1.5), plugins/content/sige (J1.6/J1.7)).

Usage of the SIGE plugin

With the syntax call {gallery}folder{/gallery} - folder must be located in images/stories (J1.5), images (J1.7/J2.5) - the gallery can be embed in the desired position. The gallery can be controlled by parameters. (see List of parameters)

Example

  • Create a new folder in images/stories (J1.5), images (J1.7/J2.5) (e.g. images2012) - so the path to the images is images/stories/images2012 (J1.5), images/images2012 (J1.7/J2.5)
  • Upload your images in this new folder
  • Enter in the article (where you want to place the gallery):
{gallery}images2012{/gallery}

List of parameters

Galleries can be adjusted using parameters in the syntax call.

Possible parameters

width - Width of the thumbnail - example: 300
height - Height of the thumbnail - example: 300
gap_v - Vertical gap - example: 30
gap_h - Horizontal gap - example: 30
quality - Quality (jpg) - möglich: 1-100
quality_png - Quality (png) - possible: 1-9 (Compression level)
displaynavtip - Show navigation tip - 1 = yes, 0 = no
displayarticle - Show article name - 1 = yes, 0 = no
thumbs - Generate and save thumbnails - 1 = yes, 0 = no
limit - Activate limiting - 1 = yes, 0 = no
limit_quantity - Show number of images - example: 10
noslim - Deactivate lightbox effect - 1 = yes, 0 = no
sort - Random order - 1 = yes, 2 = no, ascending, 3 = no, descending, 4 = ascending by modified date, 5 = descending by modified date
root - Path to the images starting at the root folder - 1 = yes, 0 = no
ratio - Maintain aspect ratios of the images - 1 = yes, 0 = no
caption - Display captions - 1 = yes, 0 = no
iptc - Title and description of IPTC data - 1 = yes, 0 = no
iptcutf8 - IPTC data is already UTF8-encoded - 1 = yes, 0 = no
print - Display printing option in lightbox - 1 = yes, 0 = no
count - Set count variable manually - example: 5
single - Show a single image - example: imagename.jpg
scaption - Caption in single view, only use with parameter single - example: This is my caption
single_gallery - Show gallery if parameter single is used - 1 = yes, 0 = no
salign - Align single image - example: left / center / right
connect - Connect images in other syntax calls - example: bildset
download - Show download button - 1 = yes, 0 = no
list - Display images in a list - 1 = yes, 0 = no
crop - Enable crop function - 1 = yes, 0 = no
crop_factor - Zoom level - example 50 for 50 percent (enter without %!)
thumbdetail - Choose image section for thumbnail - 0 = 1:1, 1 = top left, 2 = top right, 3 = bottom left, 4 = bottom right
watermark - Enable watermark function - 1 = yes, 0 = no
watermarkposition - Position of the watermark - 0 = centered, 1 = top left, 2 = top right, 3 = bottom left, 4 = bottom right
watermark_trans - Transparency of the watermark - 0 to 100 - 0 = opaque, 100 - completely transparent
encrypt - Encryption method - 0 = ROT13 - very weak, but fast. 1= MD5 - safe, fast. 2 = SHA1 - very safe, slower than MD5
image_info - Show image name or IPTC data - 1 = yes, 0 = no
image_link - Set a link - example: www.kubik-rubik.de
image_link_new - Open link in a new window - 1 = yes, 0 = no
column_quantity - Images per line - example: 3 (for 3 images in one line)
css_image - Enable CSS Image Tooltip - 1 = yes, 0 = no
css_image_half - Half the size in tooltip - 1 = yes, 0 = no
copyright - Link to the author - 1 = yes, 0 = no
word - Link the gallery with a word - example: Gallery
watermarkimage - Set a different watermark image (image has to be located in plugins/content/sige/plugin_sige) - example: watermark-new.png
calcmaxthumbsize - Calculate maximum size of all thumbnails - 1 = yes, 0 = no
fileinfo - Information from text file (captions.txt - see slide Extras) - 1 = yes, 0 = no
turbo - Activate turbo mode - 1 = yes, 0 = no
resize_images - Resize original images - 1 = yes, 0 = no
width_image - Maximum width of resized images - example: 800
height_image - Maximum height of resized images - example: 800
ratio_image - Maintain aspect ratios of the original images - 1 = yes, 0 = no
images_new - Overwrite resized images - 1 = yes, 0 = no

Usage

Syntax call: PARAMETER = VALUE. The parameters are separated with a comma. The order is irrelevant, what matters is that the image directory comes first.

Parameters can be used very easy with the Editor Button - SIGE Pparameters!

Examples

Limiting disabled, random order, size 100, vertical / horizontal distance of 20

Code:

{gallery}imagefolder,limit=0,random=1,width=100,height=100,gap_h=20,gap_v=20{/gallery}

No lightbox effect (like a 1.0-Web gallery), single image is image.jpg, show IPTC data, enable printing option

Code:

{gallery}imagefolder,noslim=1,single=bild.jpg,iptc=1,print=1{/gallery}

Show gallery in a list, display the download button, load images in the set "pictures", IPTC data is encoded utf8

Code:

{gallery}imagefolder,list=1,download=1,connect=pictures,iptcutf8=1{/gallery}

More examples can be viewed on the demo page.

Editor Button

Editor Button - SIGE Parameter

Install the editor plugin with the installer and adjust it in Extensions - Plugins - Editor Button - SIGE Parameter. There are two methods: the Plugin Settings and On-the-Fly Modal window.

1. Method:
Set the desired parameters in the plugin settings menu and activate the plugin. All parameters are explained with a tooltip (mouseover button)!
When writing an article click on the SIGE parameters button. The code with the set parameters will be automatically written into the text area! Then, the image folder must be adjusted.

2. Method:
After clicking on the SIGE Parameters button a modal window is opened, where you can set all parameters (including image folder) individually. After clicking on "Insert" the desired parameters are transferred into the text field. This method requires a token to be set for security reasons.

Note: This is just a little helper plugin for the main plugin SIGE!

Changelog

+ = Added - ! = Removed - ^ = Changed - # = Fixed

Joomla! 3.x

3-1 - 2013-10-05

  • + First release for Joomla! 3
  • + Based on version 2.5-2 of the plugin

Joomla! 2.5

2.5-2 - 2013-10-12

  • + Restored compatibility with version 2.5-6 of the main plugin SIGE
  • ^ Updated version check and donation code fields

Version 2.5-1 - 15-Jul-2012

+ Released first version for Joomla! 2.5

Changelog

Changelog

+ = Added - ! = Removed - ^ = Changed - # = Fixed

Joomla! 3.x

Joomla! 3.x

Version 3-3 - 2014-04-05

  • + Implemented Slimbox 2 - Slimbox 2 requires jQuery and not Mootools (interesting for Slimbox users since Joomla! 3.2.2)
  • ^ Improved language switch in Slimbox / Slimbox 2
  • ^ Updated custom fields

Version 3-2 - 2013-10-15

  • + Combine dynamic CSS instructions - to avoid problems in some browsers due to too many CSS instructions (yeah, you guessed it right - the IE is involved)
  • + New Option: Sorting from information file - Sort the images in the gallery through the sorting in the captions.txt information file - all images which are not specified in the information file are excluded from the gallery
  • + New parameter: Set an individual link for each image - add the link (with or without http://) as a fourth parameter to your image information in the captions.txt information file. Follow this pattern: name.extension|title|description|link
  • ^ Internal - Renamed random into sort variable - this option was always used to set the sorting of the images, so it should also have the correct name
  • ^ Empty lines are removed from the information array which is created from the captions.txt
  • # PHP 5.4 compatibility - the on-the-fly image creation function did not generated thumbnails correctly

Do not forget:

The option "Information from text file (Info)" in the tab "JS View" has to be activated to use the information file features!

Version 3-1 - 11-Oct-2012

+ First release for Joomla! 3.x
^ Optimized Donation Code System
^ Plugin is not triggered in the backend

Joomla! 2.5

Joomla! 2.5

Version 2.5-6 - 2013-06-19

  • + Combine dynamic CSS instructions - to avoid problems in some browsers due to too many CSS instructions (yeah, you guessed it right - the IE is involved)
  • + New Option: Sorting from information file - Sort the images in the gallery through the sorting in the captions.txt information file - all images which are not specified in the information file are excluded from the gallery
  • + New parameter: Set an individual link for each image - add the link (with or without http://) as a fourth parameter to your image information in the captions.txt information file. Follow this pattern: name.extension|title|description|link
  • ^ Internal - Renamed random into sort variable - this option was always used to set the sorting of the images, so it should also have the correct name
  • ^ Empty lines are removed from the information array which is created from the captions.txt

Do not forget:

The option "Information from text file (Info)" in the tab "JS View" has to be activated to use the information file features!

Version 2.5-5 - 26-Feb-2013

# PHP 5.4 compatibility - the on-the-fly image creation function did not generated thumbnails correctly
^ Updated version check and donation code fields
^ Excluded all language files (except English and German) to Transifex
^ Minor code optimization

Version 2.5-4 - 16-Aug-2012

+ Implemented Versioncheck - Stay uptodate with the great new feature! The latest version can be checked once per session or on every load of the settings page.
^ Optimized Donation Code System - The entered donation code is checked only once per session.

Version 2.5-3 - 04-Jun-2012

+ Implemented donation model
+ French language file - Brunov99

Version 2.5-2 - 09-Apr-2012

+ New parameter: scaption - Set individual captions if you use the single image option (scaption can only be used with the parameter single)
^ Updated Milkbox from version 3.0.2 to 3.0.3 - Attention: Older versions of IE (under 9) have some problems with the milkbox in SIGE - you should use another JS view untill the problem is solved
^ Changed some CCS instructions to optimize the output for different templates
! JYES and JNO from language files
# Descriptions on multilingual site in the Turbo Mode - SIGE always checks the active language now and select the correct turbo file

Version 2.5-1 - 25-Jan-2012

+ First release for Joomla! 2.5

Archive

Joomla! 1.7

Version 1.7-2 - 03.11.2011

+ Hightlight: Turbomodus - HTML Ausgabe wird als Textdatei abgespeichert und bei weiteren Aufrufen eingelesen - Langwieriges Verarbeiten der Bilder entfällt komplett. Dieses Feature gibt es in keinem anderen Galerie-Plugin!
+ Originalbilder verkleinern - Originalbilder können auf eine passende Größe angepasst werden.
+ Maximale Abmessungen aller Thumbnails berechnen lassen - zur Vermeidung von großen Abständen zwischen den einzelnen Bildern.
+ index.html wird in allen Bildordnern automatisch erzeugt - Absicherung vor dem einfachen Auslesen des Ordnerinhalts über den Browser. Bei einem Aufruf der Bildordner wird nur eine weiße Seite angezeigt, der Inhalt des Ordners kann nicht mehr ausgelesen werden.
+ Zentrierung Einzelbild - Einzelbilder können mit salign=center; zentriert werden.
+ Neue JS Ansicht - Milkbox - schnelle Slimbox Alternative für die aktuelle Mootools-Version
+ Neue Option: Informationen aus Textdatei auslesen - Auslesen aus Textdatei muss explizit aktiviert werden. Wenn diese Option deaktiviert ist, dann muss SIGE nicht bei jedem Laden nach der Textdatei suchen.
+ Neue Parameter: 'calcmaxthumbsize', 'fileinfo', 'turbo', 'resize_images', 'width_image', 'height_image', 'ratio_image', 'images_new' - Mehr dazu in der Parameterübersicht
^ Änderungen: displayarticle zu displaymessage
^ Slimbox auf 1.8 aktualisiert
^ Wasserzeichenbild ausgetauscht
^ Code komplett überarbeitet

Joomla! 1.5

Version 1.5-15 - 06.06.2011

+ Bildinformationen aus einer Textdatei auslesen - Standardname: captions.txt - Sprachenspezifisch: captions-de-DE.txt, captions-en-GB.txt (Infos zur Nutzung unter dem Slide Zusatz)
+ Galerie über einzelne Wörter starten - neuer Parameter: word
+ Unterschiedliche Wasserzeichen pro Syntax - neuer Parameter: watermarkimage
+ Unterstützung von 24-bit PNG-Dateien für Wasserzeichen
^ Erstellung von Vorschaubildern und Wasserzeichenbildern optimiert + Speicherfreigabe
^ diverse Code-Optimierungen

Extras

Tips and tricks

Enable Turbo Mode – Gallery is loaded in seconds

From Version 1.7.-2 on you may enable the Turbo Mode. This feature is only available in SIGE!

First you need to create a gallery. If everything is set up appropriately, the Turbo Mode may be activated, using the parameter turbo=1 as a syntax. The next time the front page is loaded two text files will be generated containing the complete output of the gallery. In subsequent calls, only those text files will be loaded what will eliminate the time consuming editing of all the images. The turbo mode is not set globally and must be activated manually on each syntax call.

Information: In a test with 50 large scaled images the loading time could be reduced, using the Turbo Mode, from 17 to 1 second!

If you would like to change settings of you gallery after using the Turbo Mode, the text files must be recreated. This is possible by setting the parameter turbo=new. After the new text files were created (one call to the gallery on the front end needed), you have to change the parameter back to turbo=1.

You get tips for using the parameters in the slide "List of parameters".

Load image information from a text file – several text files for different languages

Image information (title and description) can be loaded through a text file (since version 1.5-15).

For this feature you have to create a text file captions.txt in each image folder. The file must contain the following structure:

picutre.jpg|Image Title|Image description
picutre2.jpg|Image Title of the second image|Image description of the second image

Each row refers to an image. In one row you have to provide three settings, separated with a |. The description argument may be omitted.

First you have to set the exact image name including the file extension, as the second argument you choose the desired title of the image and finally the description.

SIGE as well supports the use of different text files for different languages which are loaded depending on the active language. For using this feature you have to name the files with the correct language codes.

Example: German – captions-de-DE.txt, English – captions-en-GB.txt and so on.

With this option it is possible to provide different title and description for the same image.

From version 1.7-2 on you have to explicitly activate this feature at the settings page under "Information from textfile".

Attention: The files have to be saved with the encoding UTF8 without BOM (e.g. with Notepad++) to work properly!

Link to the gallery with a word, used at the article

From version 1.5-15 and 1.6-2 on you can connect single words with a gallery or an image. It will not show a gallery with thumbnails but will link to a gallery (or image) within your article.

Parameter: word

Example for calling:

You may find our {gallery}imagedirectory,word=Holiday Pictures{/gallery} here!

If you want to link to a single image from a folder, you have to use one more parameter:

Here is the {gallery}imagedirectory,word=Picture,single=name.jpg{/gallery}!

Note: There are no special characters such as comas or question marks possible (special characters in regular expressions are meaningless). Several words can be entered with spaces.

Use of different watermarks

From version 1.5-15 and 1.6-2 on you may set different watermarks. The parameter is called: watermarkimage

The watermark imges musst be found at the plugins/content/sige/plugin_sige directory.

Example:

{gallery}imgedirectory,watermarkimage=watermarkimage-new.png{/gallery}

The watermarkimage-new.png would be the watermark image and is set at the plugins/content/sige/plugin_sige/watermarkimage-new.png directory.

General tips

The correct thumbnail size should be determined using the "on-the-fly" method. After you found the right size you may activate the thumbnail generation/ -storage. If you modify the image size of the thumbnails (important is the ratio "height to width"), they are rebuilt automatically. -> Since version 1.5.7 thumbnails are only overwritten using the additional option! Changes on the image quality will not modify existing thumbnails. Should a modification be necessary than you should either delete the thumbnails at there respective thumbs directory or just simply change their sizes. -> Activate the additional option "Overwrite thumbnails". Since version 1.5-3 already generated thumbnails can be easily overwritten. Therefore you may enable the option "Overwrite thumbnails" and reload the image page. Are the thumbnails created as desired, the option should be disabled otherwise they are rebuilt again on each page load.

Internal Error 500 on many images

Are there a lot of pictures (as from 60 upwards), then there may occur internal errors, due to limitations of you hosting or overloading the server processes during the generation of the thumbnails. This problem can be easily circumvented since version 1.5-4. You should activate the Option "Limit the displayed number of images?" and choose a value of about 30 images. On the first page load, according to the setting, 30 thumbnails are generated. Now you may increase the number to 60. Already made thumbnails will not be generated again (option "Overwrite thumbnails" must be deactivated!), and only the new 30 thumbnails will be processed. This is continued until all thumbnails are created. After that you may disable the "Limit the displayed number of images?" option.

An easy solution would be to reload the page, hitting F5, until the creation of the thumbnails is done. With each load some new thumbnails are generated and added. However, we recommend the first method!

Remove borders and shadows on thumbnails

Open /plugins/content/plugin_sige/sige.css

Delete background:url(shadowAlpha.png) no-repeat bottom right!important; - at the selector .sige_thumb for the shadow.

Delete padding:4px; - at the selector .sige_thumb img for the border.

Download

Download - free, public versions

Overview of all downloads of the extension: SIGE - Simple Image Gallery Extended Downloads

You are here: SIGE - Simple Image Gallery Extended