Home Joomla CSS Gallery - Howto Plugin Code
CSS Gallery Plugin Usage - Code
Written by Andreas Berger   
Monday, 20 July 2009 06:24

A survey of the possibilities to call, extend and modify galleries with the code in the content item.

The "CSS Gallery" Plugin is called from within the content item. The code used offers - beside of setting the folder with the images - additional possibilities to enhance and arrange the gallery.

 

A.) Gallery

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.




B.) Parameter Overrides

Starting with version 1.2.0 the "CSS Gallery" offers the possibility to change every default setting from the backend whilst calling the plugin within the content item. With this feature it is possible to use different settings for every single gallery. One may create galleries of different width and height, change the number of thumbnails per row and more.

To achieve this, the call of the plugin gets extended by the needed parameters. They are separated from the folder name and from each other by vertical bars (|). The have the syntax PARAMETER=VALUE:

List of possible parameters:

width - maximum width of main image in pixel (integer) e.g.: 600

height - maximum height of main image in pixel (integer) e.g.: 450

iqual - quality of scaled main image in percent (integer) e.g.: 90

icrop - scale images keeping proportions or cropped; possible values: keep (proportional), crop (crop)

throw - number of thumbnails per row (integer) e.g.: 4

tqual - quality of thumbnails in percent (integer) e.g.: 70

space - space between thumbnails in pixel (integer) e.g.: 3

tcrop - scale thumbnails keeping proportions or cropped; possible values: keep (proportional), crop (crop)

prld - should we preload the images? possible values: 0 (no), 1 (yes)

align - align the gallery within the content item; possible values: 0 (right), 1 (center), 2 (left), 3 (float left), 4 (float right)

sort - images sort order; possible values: 0 (A-Z - DEFAULT), 1 (Z-A), 2 (old-new), 3 (new-old), 4 (random)

fixstart - leave the start-image visible on hover; possible values: 0 (no), 1 (yes)
(may be deactivated when showing images of different proportion in one gallery. not crossbrowser!)

caps - show captions; possible values: 0 (no), 1 (yes)

links - show links; possible values: 0 (no), 1 (yes)


Samples:

{*becssg}cssgallery|width=600|align=2{/becssg*} - without the asterisks
Regardless of the settings in the backend, this gallery is shown with a width of 600 pixel (width=600) and aligned left in the article (align=2)

{*becssg}cssgallery|caps=0|prld=0{/becssg*} - without the asterisks
No captions (caps=0), no preload (prld=0)

{*becssg}cssgallery|width=400|height=300|throw=5|iqual=95|tqual=70{/becssg*} - without the asterisks
Width 400 pixel (width=400), height 300 pixel (height=300), 5 thumbs per row (throw=5), quality of main image 95% (iqual=95), quality of thumbs 70% (tqual=70)

Notice:

The parameters listed here correspond with the parameters in the plugins configuration panel. Find a details description at: Howto Plugin .
The first parameter of the initial call always has to be the folder name (path). The sorting of the other parameters is arbitrarily.




C.) Captions

Captions and text have there own call. It´s:

{*becssg_c}gallery-number|imagefile|caption|text{/becssg_c*} - without the asterisks

Gallery-number:
The galleries within one content item are numbered by the plugin automatically starting with 0.
This setting is obligatory.

Imagefile:
The exact name of the file "myimage.jpg".
Left empty, the call is used as default for the whole gallery. This means, if there is no setting for an image, this one is used.

Caption:
The Caption. If left empty . . . no caption is shown.

Text:
The additional text below the caption. If left empty . . . no text is shown.

Samples:

{*becssg_c}0||myTitel|myText{/becssg_c*} - without the asterisks
This call sets "myTitel" and "myText" as the default values for the first gallery within the current content item by leaving the imagefile-value empty.
Notice: You don´t have to set a Default. If you don´t and there is no setting for an image, just nothing is shown.

{*becssg_c}1|pic01.png||myText{/becssg_c*} - without the asterisks
pic01.png of the second gallery in the content item has no caption but the text "myText"

{*becssg_c}0|pic02.png||{/becssg_c*} -without the asterisks
pic02.png in the first gallery shows no caption and no text although there is a default. The explicit setting overrides it.

{*becssg_c}0|pic05.jpg|myTitelA|myTextA{/becssg_c*} - without the asterisks
{*becssg_c}0|pic06.jpg|myTitelB|myTextB{/becssg_c*} - without the asterisks
{*becssg_c}0|pic07.jpg|myTitelC|myTextC{/becssg_c*} - without the asterisks
{*becssg_c}0|pic08.jpg|myTitelD|myTextD{/becssg_c*} - without the asterisks . . . and so on

Notice:
It is of no importance where within your content item and in which order your setting are.
The number of parameters has always to be 4. This means, a call always must contain 3 vertical bars, even if a setting is empty (e.g. the imagefile).
These vertical bars are protected characters within the calls and may not be used within your values.




D.) Links

If we want to link the images of our gallery, there is a third call to do so:

{*becssg_l}gallery-number|imagefile|URL|titel|target{/becssg_l*} - without the asterisks

Gallery-number:
The galleries within one content item are numbered by the plugin automatically starting with 0.
This setting is obligatory.

Imagefile:
The exact name of the file "myimage.jpg".
Left empty, the call is used as default for the whole gallery. This means, if there is no setting for an image, this one is used.

URL:
The URL you want to link the image with. e.g.: http://www.bretteleben.de

Titel:
The titel, shown when the mouse is over the image. e.g.: bretteleben.de

target:
The window, you want to open the linked URL. e.g.: _blank (new window), _self (same window)

Samples:

{*becssg_l}0||http://www.bretteleben.de|bretteleben.de|_blank{/becssg_l*} - without the asterisks
This call sets a default link for the first gallery within the current content item by leaving the value for the imagefile empty. The link opens in a new window.

{*becssg_l}1|pic01.png|http://www.disney.com|Disney|_self{/becssg_l*} - without the asterisks
pic01.png in the second gallery within the content item is linked to www.disney.com. The link opens in the current window.

{*becssg_l}0|pic02.png|||{/becssg_l*} -without the asterisks
We don´t want pic02.png in the first gallery within the content item to be linked. A special case, because as soon as we have links within a gallery, every image gets linked. Setting this empty call the image is linked to the current page, without any further setting.

{*becssg_l}0|pica.jpg|http://www.my.domain.com/myGreatProduct1|greatProduct1|_self{/becssg_l*} - without the asterisks
{*becssg_l}0|picb.jpg|http://www.my.domain.com/myGreatProduct2|greatProduct2|_self{/becssg_l*} - without the asterisks
{*becssg_l}0|picc.jpg|http://www.my.domain.com/myGreatProduct3|greatProduct3|_self{/becssg_l*} - without the asterisks
{*becssg_l}0|picd.jpg|http://www.my.domain.com/myGreatProduct4|greatProduct4|_self{/becssg_l*} - without the asterisks ... and so on

Notice:
It is of no importance where within your content item and in which order your setting are.
The number of parameters has always to be 5. This means, a call always must contain 4 vertical bars, even if a setting is empty (e.g. the imagefile).
These vertical bars are protected characters within the calls and may not be used within your values.


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:19
 
Comments (22)
danke für das Plugin
22 Monday, 07 May 2012 09:05
Ropeworker

Hallo zusammen,

ich habe das Plugin in meine Webseite www.ropeworker.de  eingebunden und es funktioniert einwandfrei.  mit einer Diashowfunktion wäre es mir zwar noch lieber aber das muss nicht sein

Danke

Help with gallery links on images
21 Sunday, 29 April 2012 18:36
Hristo

Hello, please help me on the following page http://archp-bg.com/index.php/component/categoryblock/?view=article&Itemid=0&id=340 what i need to do NOT to have links on the images themselves. This is switched off from the backend but still working? Could you please help? Thank you!

@Hristo
Tuesday, 01 May 2012 15:12
A. Berger

Hi Hristo!

The plugin is not creating link to the image. What happens is the following:

The plugin uses links and their pseudo CSS classes to provide the functionality of the gallery (without JavaScript).
If the feature "links" - that allows to set specific targets - for these links is not used, the plugin sets an anchor to the top of the gallery. The anchor is a relativ link, that uses the current URL. Or to be precise - it uses the current URL if no base-href is set. And this is where the trouble starts: Joomla! usually uses the current page for the base-href but your page uses "archp-bg.com/index.php/component/categoryblock/" for the base-href which is different from the current URL. The result: The in-page-anchor becomes a link to another page.

The solution would (probably) be to let Joomla! create the base-href or use SEF-URLs.

Best regards
Andreas

Änderung der Funktion
20 Monday, 16 April 2012 17:57
Richard

Hallo,

das Plugin hat ja derart viele Funktionen, das ich den Überblick etwas verloren habe. Wäre es auch möglich, dass ich z.B. acht Vorschaubilder im Artikel anzeigen lassen kann, das Hauptbild wegfällt und nach Klick auf ein Vorschaubild ein großes Bild angezeigt wird, z.B. durch ein Popup, oder ähnliches?

Ich hoffe man kann mir noch folgen!

@Richard
Monday, 16 April 2012 19:58
A. Berger

Hallo Richard!

Nein, das ist nicht möglich.

Gruß
Andreas

code überschreiben geht nicht
19 Thursday, 12 January 2012 09:51
chris

Hallo Andreas

Sorry, es klappt jetzt doch, bin happy.  Hab Herzlichen Dank.

Christian

code überschreiben geht nicht
18 Thursday, 12 January 2012 09:39
chris

Hallo Andreas

Danke für die Antwort, aber auch mit den vertical bars will es nicht klappen,(habe sie allerdings nur rauskopiert, da ich sie auf der Tasatur nicht finden konnte- könnte es daran liegen?) hast Du noch eine andere Idee?

Herzlichen Dank
Chris

probleme beim überschreiben des codes der css-gallery
17 Tuesday, 10 January 2012 22:48
chris

Hallo Zusammen

Die css Galerie klappt wirklich gut. Ich habe nur ein Problem! Ich verwende sie für verschiedene Beiträge, und möchte sie mal links oder zentral oder rechts setzen, schaffe es aber nicht die Grundeinstellung sprich den einzelnen Code einer Galerie zu überschreiben. Laut Anleitung müßte alles richtig sein, aber es kommt immer die Meldung, daß das Verzeuchnis nicht gefunden wird.

Beispiel: {*becssg}cssgallery{/becssg*}  (ohne sterne)  hier klappt alles gut, schreibe ich jetzt aber :{*becssg}cssgallery/width=600/align=2{/becssg*} erscheint die Meldung das der Folder nicht gefunden wird..... wer könnte mir einen Tipp geben???

Herzlichen  Dank
Chris

@Chris
Wednesday, 11 January 2012 12:55
A. Berger

Hallo Chris!

Ich. Schrägstriche werden zum Definieren von Pfaden verwendet, deshalb werden auch die Parameter vom Pfad nicht mit Strägstrichen sondern vertikalen Trennern (vertical Bar |) getrennt. In Deinem Fall sucht das Plugin den Ordner "cssgallery/width=600/align=2", den es natürlich nicht gibt. Versuch es also mal so:

{*becssg}cssgallery|width=600|align=2{/becssg*}  ... ohne die Sterne

Gruß
Andreas

Wie bekomme ich die Gallerie in einzelne Beiträge
16 Wednesday, 14 December 2011 02:06
Dominik

Hallo Zusammen,

kann mir hier irgendjemand erklären wie ich die Gallerie auf meine Seitebekomme bzw. in Beiträgen integrieren kann.
Muss ich den etwas in den html Bereich eintragen?
Ich steh grad total auf dem Schlauch...und mein Englisch ist leider zu schlecht um die englische Anleitung zu verstehen.

Grüße Dominik

@Dominik
Wednesday, 14 December 2011 19:37
A. Berger

Hallo Dominik!

Indem Du den Code für die Galerie im Artikel eingibst.

Zur Anleitung: Wenn Du am oberen Ende der rechten Spalte auf dieser Seite, dort wo neben der englischen Flagge "English" steht, "Deutsch" auswählst, dann steht Dir die Anleitung auch auf Deutsch zur Verfügung. :)

Gruß
Andreas

Positioning and text
15 Thursday, 24 November 2011 13:46
Danny

Hi Guy,
the gallery works fine and was setup within a few minutes. But now I have one essential (for me) question: Ist it possible (and if yes how does it work) to position the gallery left and let the text of an article flew besides it like it is in Word for Example?

Thanks in advice
Danny

@Danny
Tuesday, 29 November 2011 22:37
A. Berger

Hallo Danny!

Da das Plugin extrem auf absolute Positionierung setzt und nahezu das gesamte CSS dynamisch erzeugt, hat es kein eigenes Stylesheet. Kompliziert sollte es aber trotzdem nicht sein, dann wenn die Galerie in einer Liste angezeigt wird und Du weißt, dass sie mittels DIV-Containern aufgebaut ist, dann kannst Du auf den DIV-Container innerhalb des Listenpunktes zugreifen:
ul li div {} ... entweder die Liste oder der Listenpunkt sind in Deinem Template sicher über eine Klasse oder eine Identity erreichbar/definierbar.

Gruß
Andreas

erledigt
Tuesday, 29 November 2011 20:37
Danny

Hallo Andreas, sorry...war mein Fehler...man sollte genau hinsehen was man macht...align_ left und float=left sind natürlich was anderes...hat geklappt. Jetzt noch die abschließende Frage: Kann ich margin irgendwie einstellen, weil bei mir steht die Gallery in einer Aufzählung und die Aufzählungspunkte sind teilweise hinter der Gallery....

@Danny
Monday, 28 November 2011 20:28
A. Berger

Hallo Danny!

Dann vertragen sich die Einstellungen irgendwie nicht mit Deinem Template. Gib einfach Bescheid, wenn der Wartungsmodus beendet ist, ich schau' es mir dann gerne an.

Gruß
Andreas

Float left geht nicht
Sunday, 27 November 2011 22:33
Danny

Hallo Andreas, die Gallery steht schon auf "float left", trotzdem gehts nicht? Es erscheint erst die Gallery, dann untendrunter der Text. Leider kann ichs Dir nich zeigen, da die Seite momentan im Wartungsmodus ist....

@Danny
Thursday, 24 November 2011 22:43
A. Berger

Hi Danny!

Give it a try and set the parameter "Align the Gallery" to "float left".

Best regards
Andreas

a doubt
14 Tuesday, 01 November 2011 20:58
laura

hello. I'm looking for a gallery that can do this:
I want a gallery that allows me to have the thumbnails in the article and to see the big picture in a module. Can do this some of your galleries?
thanks!

@laura
Wednesday, 02 November 2011 21:55
A. Berger

Hi laura!

No.

Best regards
Andreas

Thumbnail bar
13 Monday, 24 October 2011 23:32
Michael

What happens if I want to put say 30 images in my gallery. When I scroll down 6 rows I can no longer see the main image above, and given that the image only displays when you hover over the thumbnail there becomes no way to see the image.


Is there some type of scroll-bar option for the thumbnails, so I could display 2-3 rows and have a button to scroll between thumbnail pages? I can't see an option but perhaps I'm missing something.

@Michael
Wednesday, 26 October 2011 13:34
A. Berger

Hi Michael!

I would either use smaller thumbnails or siwtch to the "Very Simple Image Gallery" (link in the menu at the left), it allows to split the thumbnails into sets of arbitrary size.

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 15 guests online