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. Installation1.) 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.
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. 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.
16.) "Thumbnails per row" sets - the number of thumbnails per row. :)
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. 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.
24.) Activate the plugin 25.) Click "Save" - done
Usage
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: 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 8.) Save - done!
MaintenanceThe 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: 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.
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. |
Last Updated on Friday, 28 October 2011 18:21 |
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
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
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!
Hi Andy!
I added the asterisks to prevent the code from getting executed here. ;)
Best regards
Andreas
Remove the astrix * from the call tag
Hi Rafaella!
Did you enable the plugin?
Best regards
Andreas
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.
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 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
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
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.
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 ;)
Hi Coyote!
I'm sorry but I could not find the plugin on this page.
Best regards
Andreas
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
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
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....
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
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
Hi Gbenga!
I'm sorry but the page seems not to be available.
Best regards
Andreas
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
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