Home Joomla CSS Gallery - Howto Plugin
Main Menu
Most Read
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79

If you like the products on these pages, your support is highly appreciated. Thank you very much!


Latest Items
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109
CSS Gallery Plugin Installation and Usage
Written by Andreas Berger   
Sunday, 14 December 2008 12:09

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


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



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!



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.

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.

Last Updated on Friday, 28 October 2011 18:21
Comments (13)
3 Thursday, 03 November 2011 20:15

Excellent plugin.  Simple - easy - and I am so glad it does need Flash or Javascrip.

If I may make one suggestion - I don't know how easy/hard/possible it is to do... but in the article Editor window... to add the button with the code below... (like the Read more button) so when you click it, it will place {*becssg}{/becssg*}  in your article editor.


Thursday, 03 November 2011 20:29
A. Berger

Hi Marianna!

I promise, the day this plugin has absolutely no more flaws/bugs and I have absolutely no idea how to improve it further, I will start writing a second plugin to insert the code for the first plugin into the article editor. :D

Best regards

2 large images and captions and text at the same time
2 Thursday, 07 April 2011 22:02
leo a.

i can't figure out why the 3rd thumbnail of the first row makes 2 big images and text appear at the same time, but the 3rd image of the second row doesn't.  do you have a clue?
i can toggle the fixed startimage setting, but then i have the other problem where putting your mouse over the gallery makes large image disappear.
i don't want the startimage to disappear and i don't want to get double images on any of the gallery items.  is that possible?

in reply to your reply
Friday, 08 April 2011 14:25
leo a.

i figured out why 3rd image of 2nd row hides 1st image, and why 3rd image of 1st row doesn't hide first image even though they are both portrait style pictures and the first fixed image is a landscape style picture.
the reason is because the portrait picture of the 2nd row has extra white space on the left and right of it, and the portrait picture of 1st row doesn't have that extra white space on the left and right of it.

@leo a.
Thursday, 07 April 2011 22:47
A. Berger

Hi Leo!

Other than during my first visit on your site, you now have set the parameter "Use fixed Startimage" to "Yes". This prevents the start image from disappearing when hovering the main image from outside the gallery, by using a fixed (i.e. always visible) start image.
This means that the start image is always there but gets hidden behind the image that belongs to the thumbnail you are currently hovering.
And this means, hovering the third image of the second row does not make a second image appear but this specific image is smaller than the other images and therefore the fixed start image is not completely hidden.

Taking all together, I repeat the advice from my last comment to have a look at my other gallery plugin. Whilst the "CSS Gallery" is mainly focused on providing a fully functional gallery with just CSS (taking into account some limitations), the "Very Simple Image Gallery", that uses JavaScript too, is a lot more flexible especially when it comes to show images of different proportions in one gallery.

Best regards

hover / mouseover / rollover makes image disappear
1 Thursday, 07 April 2011 21:37
leo a.

when you rollover the main large image with mouse cursor, it disappears.  why is this?


Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135
Panoramic Image Viewer
Follow me on Facebook
Follow me on Google+


Add to circles

Who's Online
We have 329 guests online