Home Joomla CSS Gallery - Howto Plugin
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.

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.

Last Updated on Friday, 28 October 2011 18:21
 
Comments (13)
Two galleries
13 Monday, 07 May 2012 17:03
Gabriela

Hello
I'm trying to create two galleries, the first going very well. But the second is not.
I put the first:
the gallery number 0 and the second on 1. I am using the gallery that has links "becssg_l"

Thanks for everything

@Gabriela
Wednesday, 09 May 2012 20:27
A. Berger

Hi Gabriela!

Please post a link to the page with the two galleries and the code you are using in your article.

Best regards
Andreas

New
12 Friday, 27 April 2012 02:33
Rafaella

Hi, I;m new to Joomla and im struggling a lot with it!
i already know css and html but my teacher wants us to us joomla for the final project, unfortunately!

I followed all the steps described here but look what happens:

www.rchavesdesigns.com/index.php/portfolio

it only shows the {*becssg}/images/stories/cssgallery{/becssg*} part as text, instead of calling the gallery!

HEEEELP!
thanks!

@Andy
Wednesday, 09 May 2012 21:05
A. Berger

Hi Andy!

I added the asterisks to prevent the code from getting executed here. ;)

Best regards
Andreas

the Fix
Tuesday, 08 May 2012 18:57
Andy

Remove the astrix * from the call tag

@Rafaella
Tuesday, 01 May 2012 15:55
A. Berger

Hi Rafaella!

Did you enable the plugin?

Best regards
Andreas

Hintergrund von Captions ändern
11 Thursday, 19 April 2012 17:51
anonymous

Hi,

ist es möglich die Hintergrundfarbe für die Captions zu ändern oder mit einem Rahmen auszustatten?
Also nicht für Überschrift und Text einzeln, sondern gesamt, das umschließende DIV sozusagen.

@anonymous
Thursday, 19 April 2012 19:50
A. Berger

Hallo anonymous!

Im Moment müsstest Du dazu am Plugin selbst herumbasteln, aber ich habe ohnehin vor innerhalb der nächsten Woche ein Update zu machen und werde im Zuge dessen ein optionales externes Stylesheet einbauen. Dann geht das einfacher. Ich hoffe, es hat so lange Zeit.

Gruß
Andreas

Ich Brauche noch etwas hilfe
10 Saturday, 07 April 2012 18:41
Biber3000

Ich habe gerade mit Interesse die sehr gute Anleitung gelesen, aber wenn ich das mache wird auf der Website noch angezeigt, dass der Ordner nicht gefunden werden kann. Muss man noch irgendetwas aktivieren oder was mache ich sonst falsch?

LG

@Biber3000
Monday, 09 April 2012 15:16
A. Berger

Hallo Biber3000!

Bitte überprüfe, ob die Verzeichnisrechte des Ordners passen (Ordner 755, Bilder 644), ob es den Ordner wirklich gibt (Tippfehler?) und wechsle im Artikel mal in die HTML-Ansicht um zu überprüfen, ob der Code nicht vielleicht versehentlich durch HTML-Tags fragmentiert ist.

Hilft das alles nichts, poste bitte einen Link zur Seite und den Code, den Du im Artikel verwendest, ich schau mir das gerne an.

Gruß
Andreas

Excellent Product
9 Saturday, 11 February 2012 01:31
Dfagredam

Hi. I jus want to congratulate you for this amazing plugin. I love every aspect of it and it works perfectly and smooth. Thanks for your step by step tutorial.

Beautiful job. Keep it up.

Trouble
8 Sunday, 08 January 2012 05:31
Coyote

Hi! I´m new in Joomla and i'would like to use your plugin, i've followed all the instructions of the tutorial but at the end the article shows a message which says that the CSS Gallery couldn´t find the folder, i've checked the root, code, the images and a really don't know what to do now, i'll apreciate any suggestions !!! Thanks.
Here is the link: www.puertosukai.com/index.php?option=com_content&view=article&id=69&Itemid=84

P.S. So sorry for my poor english is not my language ;)

@Coyote
Wednesday, 11 January 2012 13:32
A. Berger

Hi Coyote!

I'm sorry but I could not find the plugin on this page.

Best regards
Andreas

change the presentation
7 Friday, 06 January 2012 23:08
fred

hi , I would like to know how to change the presentation of css gallery. I want  do invertion whith the top end the bottom. I do very much manipulation on cssgallery.php but nothing was good. some bugs. Some one have a solution? Thanks

desole pour mon anglais.

Merci à vous.. Fred

@fred
Wednesday, 11 January 2012 13:55
A. Berger

Hi Fred!

Up till now there is no such layout, but once you have finished your modifications, I would appreciate if you could post a link to the page.

Best regards
Andreas

Image
6 Tuesday, 13 December 2011 11:03
Suberbawer

Hi, the plug its really usefull, thank you very much....but i have a problem...its possible to show just the thumbails without the main image in big?

thanks....

@Suberbawer
Tuesday, 13 December 2011 20:08
A. Berger

Hi Suberbawer!

I'm sorry, but this is not possible with this plugin. Maybe you want to have a look at extensions.joomla.org, I'm pretty sure you will find an extension that fits your needs.

Best regards
Andreas

The Main Image is not showing.
5 Friday, 09 December 2011 23:48
Gbenga Mogaji

Thank you for making this plugin available. I tried using it but my main image is not showing. Please what can I do?

cacluton.org/media.html#g_66_0

Cheers

@Gbenga Mogaji
Sunday, 11 December 2011 20:17
A. Berger

Hi Gbenga!

I'm sorry but the page seems not to be available.

Best regards
Andreas

CSS Gallery
4 Monday, 21 November 2011 18:40
Luke

Hi,

I have a quick question about your gallery plugin - it looks great!  Can the thumbnails be "seperated" from the main image;   ie:  the main image placed in content and the thumbnails placed in module(s) elsewhere?    Or maybe its better to ask if it can be adapted to work like this.

kind regards,
luke
lwlbar AT yahoo DOT com

@Luke
Monday, 21 November 2011 21:58
A. Berger

Hi Luke!

No, neither this nor my other gallery plugin offer this functionality and I have ad hoc no idea how to realize this without creating a completely new extension.

Best regards
Andreas

English
Panoramic Image Viewer
Follow me on Facebook
Follow me on Google+

bretteleben.de

Add to circles

Who's Online
We have 83 guests online