A step for step tutorial on how to install and use the Very Simple Image Gallery Plugin.

Installation

1.) Log into your administration interface

2.) Go to "Extensions" > "Install/Uninstall"

3.) Select the Package File with the Very Simple Image Gallery Plugin

4.) Click "Upload file & Install"

5.) If everything worked fine, you get the message "Install Plugin Success"

6.) Select "Extensions" > "Plugin Manager"

7.) Find the "Very Simple Image Gallery Plugin" and click it

8.) "Gallery width" is the complete width. If you decide to display the thumbnails below the main image, this is the width of the main image. If you decide to display the thumbnails right of the main image, "gallery width" is the width of the main image plus the space, used by the thumbnails.

9.) "max. Image height" allows to set if the images use the full available width (empty) or if they get scaled to meet the set maximum height (integer, e.g.: 300). Using this parameter makes sense if you are showing images of different proportions in one gallery.

10.) The next parameter is the quality of the images in percent. Values from 80 to 90 will do fine. Remember, the higher the quality, the larger the filesize!

11.) The next parameter sets the position of the gallery within the available space. You may choose between left - centered - right, float left and float right. The last two options allow the gallery to get wrapped by your text. They also increase the dependence from the used template and will not always show the desired results!

12.) The next parameter to configure is the maximum width of the thumbnails in pixel.

13.) Next comes the maximum height of the thumbnails in pixel.

14.) The next parameter sets if thumbnails get scaled proportionally or cropped to fit the set maximum values.

15.) The next parameter is the quality of the thumbnails in percent. Values from 60 to 70, maybe 80 will do fine. Remember, the higher the quality, the larger the filesize!

16.) Next comes the space between the thumbnails in pixel. Try out what fits best, there is no given rule.

17.) The thumbnails may get displayed right or below the main image. What fits your needs depends on your template.

Starting with Version 1.2.0 there is a third option available "below justified". If selected, the plugin takes your settings and modifies the size of the main image and the size of the thumbnails to justify the thumbnails exactly below the main image.
This works only, if you have set the width of the main gallery in pixel!

18.) If you have decided to show the thumbnails right of the main image, this is the parameter to set the percentage of the gallery width (12.) the thumbnails may use. Depending on gallery width, thumbnails width and space between the thumbs, it´s on you to try out what value fits best.
If you have decided to show the thumbnails below the main image, this parameter is of no relevance.

19.) "Sort Order" sets the order the images are shown. You may choose between alphabetic ascending, alphabetic descending, old to new and new to old (both use "last changed" not "created"!) and random.

20.) Starting with version 1.5.0 the parameter "Sets" offers the possibility to split a gallery into multiple sets (refer the samples). Left empty all images are shown on one page. Same goes, if the given value is higher than the number of images found.

Any other value (3, 4, ...) creates multiples sets and generates links that allow to navigate between the sets. In addition, a counter is generated, that shows the number of sets available.

21.) "Label Sets" tells the counter how to - yep - label the sets. "Set", Desk", "Page" ... your turn.

22.) The parameters "Link/Button forward" and "Link/Button backward" set the button/text, you want to use for the links, that allow to navigate between the sets.

Left empty the plugin will use the automatically installed default buttons.

If you insert text, this text will be used.

Instead of the default buttons or text links you may also use custom buttons. Just insert the name of the image-file you want to be used (including the suffix). The plugin detects .jpg, .gif and .png and searches for the corresponding file in the set folder (we will set this a littel later, by default it is "/images/stories/vsig_buttons"). If the file exists, the image is shown.

23.) If you activate "Show captions?", you have the possibility to add Titel and Text to your images.

24.) "Position of Captions" sets if the captions (and text) are shown crossfading over the lower part of the main image or below the main image.

25.) "Use links?" allows - if activated - to set links for the images.

26.)Image root configures the path to the folder you are uploading (directly or stored in subfolders) your images. By default this parameter is set to /images/stories/ (and this folder is also used when the parameter is empty). In most cases this setting will fit your needs and there is no reason to change it. Only if you have organized your images in a folder structure outside of /images/stories/, put the path here.
The set value of this parameter will be added to the folder name you insert in the code in your article automatically by the plugin and must not be repeated in the article.

27.) Buttonfolder
If you are going to use custom buttons for the navigation between sets, this is the place to put the path to the folder you uploaded this buttons. By default this parameter is set to /images/stories/vsig_buttons/ (and this folder is also used when the parameter is empty).

28.) "Use JavaScript?" decides if a click on a thumbnails just replaces the main image without reloading the page (option YES) or if a click reloads the page with the new main image. To use JavaScript is more comfortable for your visitors, but if page-views are very important for you, you may choose to work without.
Visitors having JavaScript disabled will get served the second option anyway. This way we provide a noscript-fallback so anyone can use the gallery.

29.) The parameter "Foldername as ID" gives you the possibility to set the name of the folder, from which the images are taken, as identity of the surrounding div-container of the gallery. (id="foldername").

The plugin contains in the folder (Joomla-Installation)/plugins/content/plugin_vsig the stylesheet vsig.css. This stylesheet is loaded after the css-settings the plugin writes to the head-section of the page and gives you the possibility to overwrite every single setting. This works anyway and applies to all "very simple image galleries" on your site.
Setting a unique identity gives you furthermore the possibility to use this identity as a CSS-Selector and use individual styles for one single gallery.

30.) At the last you find the results of the GD-check, the plugin performs. The GD library is the most widely spread extension of PHP when it comes to image manipulation and the plugin makes use of this library to create the plugins. It checks if the library is available at all and if the relevant image file formats (jpg, png and gif) are supported.

If one or two file formats are not supported, the plugin will still work with image files of the remaining file format(s).

If the GD library is not available at all, the plugin cannot be used. In this case I recommend to ask your hoster if the GDlib can get enabled for your account.

31.) Activate the plugin

32.) Click "Save" - done

Usage

Next we need the images. We upload them to a folder in (Joomla-Installation)/images/stories.

1.) Go to "Site" > "Media Manager"

2.) Navigate to the folder "Media" > "stories"

3.) Create a new subfolder for your images. In this sample I choose the name "verysimple"

4.) Open the new folder ...

5.) ... and upload your images to it. The plugin accepts images of type ".jpg", ".gif" and ".png".

6.) Go to "Article Manager" and open the article you want to display the gallery.

7.) At the place you want the gallery to be shown insert the code to call it.

The code consists of the call {*vsig}{/vsig*} (without the asterisks) and contains the name of the folder with your images. The path to this folder "/images/stories" is added by the plugin automatically and must not be inserted.

The complete call in our sample would look such as:

{*vsig}verysimple{/vsig*} - without the asterisks

To use a folder within a folder, the path below "/images/stories/" is used, e. g. to use the folder /images/stories/folder/subfolder" the call would look such as:

{*vsig}folder/subfolder{/vsig*} - without the asterisks

In general that´s it and the gallery is ready to go.

How to show title and text with our images or modify the current gallery from the default-settings in the backend, find out in the second part of this howto (link at the end of the page).

8.) Save - done!

Maintenance

The plugin creates in the given folder subfolders called "vsig_images" and "vsig_thumbs". Into these folders it saves the images/thumbs following the naming convention:

"imagename" underline "width" underline "height" underline "quality" point "filetype"

e.g.: "myimage_80_60_80.jpg"

Although the plugin creates this files, it does not delete them. Therefore - after having tried different settings - it may be useful to delete obsolete images/thumbnails.

1.) To do so - after having opened the gallery at least once in the frontend - we go to "Site" > "Media Manager" again

2.) The folder with our images ("verysimple" in this sample) now contains the subfolders "vsig_images" and "vsig_thumbs".

3.) Obsolete files in these folders may be deleted. If you delete a - still needed - image/thumbnail too: No problem, the plugin recreates it automatically.

Notice:
The plugin validates images by name and size. Therefore the plugin will not automatically notice, if you have replaced a image with another of the same name and size. To have an image/thumbnails created for the new image you have to delete the corresponding scaled image/thumbnail by hand from the folders mentioned above. This way the plugin will use the new original image to recreate the image/thumbnail.

A survey of the possibilities to call, extend and modify galleries with the code in the content item: Howto Plugin Code

If you have questions or suggestions, please use the comment-function.

I appreciate everyone, supporting me with a link back to www.bretteleben.de on his/her website. The extension itself does not produce any hidden links, eastereggs or whatever.

If you need additional features or customizations for your project that exceed the scope of support offered through the comments, you are invited to submit your requirements specification and the planned budget by email (menu item "Contact" in the menu at the top).