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

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

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

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

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

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

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

19.) Activate the plugin

20.) 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 "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 path to this folder "/images/stories" 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 "/images/stories/" is used, e. g. to use the folder /images/stories/folder/subfolder" the call would look such as:

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

In general that´s it and the slideshow 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".

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

If you use this extensions, please post a rating and a review at extensions.joomla.org. Furthermore 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.