A step for step tutorial on how to install and use the bretteleben.de CSS Gallery Plugin.

Installation

1.) Log into your administration interface

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

3.) Select the Package File with the bretteleben.de CSS 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 "bretteleben.de CSS Gallery Plugin" and click it

8.) The first parameter to configure is the width of your gallery in pixel.

9.) Next comes the height. "Gallery" here means the width and height of the main image shown. E. g. landscape: width 400, height 300 or portrait: widht 300, height 400.

To prevent unnecessary spaces between content and main image and between main image and thumbnails, you should try to meet the exact width-height proportion of your images.

An exact match of width and height in pixel on the other hand is not necessary because the images get scaled anyway.

10.) The next parameter is the quality of the main images in percent. I recommend values between 80 and 90, 95 percent because this range has a good ratio between quality and filesize.

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

12.) 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!

13.) "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.

14.) Preload: I recommend to set this to "yes" and try to get the images loaded with the page. This slows down pageload but the usage of the gallery is a lot more comfortable as if trying to load the images on mouse-hover.

Whatever you choose here, keep an eye on the filesizes of your images anyway!

15.) Choose if the startimage is fixed or if it disappears on hover. To remove the startimage on hover makes sense, if you have transparent images or images of different size in your set.

It depends primarily on the width of your main image, what value fits best here. Just try out.

16.) "Thumbnails per row" sets - the number of thumbnails per row. :)

It depends primarily on the width of your main image, what value fits best here. Just try out.

17.) The next parameter to set is the quality of the thumbnails in percent. In most cases a value of 80% is more than enough.

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

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

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

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

22.) 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/ in Joomla!1.5 and to /images/ in Joomla!1.6/1.7 (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/ (in Joomla!1.5) or /images/ (in Joomla!1.6/1.7), 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.

23.) 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.

24.) Activate the plugin

25.) Click "Save" - done

Usage

Next we need the images. We upload them to a folder in (Joomla-Installation)/images/stories. If you are using Joomla!1.6 you will probably use the folder /images/ (default image folder in Joomla!1.6/1.7) instead, everything else stays the same.

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 "cssgallery"

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 {*becssg}{/becssg*} (without the asterisks) and contains the name of the folder with your images. The configured path to this folder (image root), by default "/images/stories" for Joomla!1.5 and "/images/" for Joomla!1.6/1.7 is added by the plugin automatically and must not be inserted.

The complete call for example would look such as:

{*becssg}cssgallery{/becssg*} - without the asterisks

To use a folder within a folder, the path below the set root folder (by default "/images/stories" for Joomla!1.5 and "/images/" for Joomla!1.6/1.7) is used, e. g. to use the folder "/images/stories/folder/subfolder" in Joomla!1.5 the call would look such as:

{*becssg}folder/subfolder{/becssg*} - 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. One for the scaled images, one for the thumbnails. Into this folders it saves images and thumbs following the naming convention:

"imagename" underline "width" underline "height" underline "quality" point "filetyp"

e.g.: "myimage_399_299_90.jpg"

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

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 ("cssgallery" in this sample) now contains the two subfolders, "images" and "thumbnails" (Joomla!1.5) or "becssg_images" and "becssg_thumbs" (Joomla!1.6/1.7).

3.) The folder images contains the image-files, the gallery shows as main images.

The fact that you will see values like 399, 449, 499 here for width/height whilst you set them to 400, 450, 500 is based on the way the plugin uses your setting. After calculating the thumbnails-sizes, it sums up the thumbnail-widths and the spaces between them and uses this value to recalculate width and height of the main image.

4.) Obsolete files in "images" as well as obsolete files in "thumbnails" may be deleted. If you delete a - still needed - image 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 the new image displayed you have to delete the corresponding scaled image and thumbnail by hand from the two folders mentioned above. This way the plugin will use the new image to recreate them.

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. Please include the installed Joomla! version and if you have problems - if any possible - the affected page in your comment.

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).

If you use this extensions, please post a rating and a review at extensions.joomla.org.