Home Joomla Very Simple Image Gallery - Howto Plugin Code
2010-03-11
Very Simple Image Gallery Plugin Usage - Code
Written by Andreas Berger   
Sunday, 21 June 2009 06:35
A survey of the possibilities to call, extend and modify galleries with the code in the content item.

The "Very Simple Image 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 {*vsig}{/vsig*} (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") is added by the plugin automatically and must not be inserted.

The complete call in our sample would look such as:

{*vsig}verysimple{/vsig*} - without the asterisks

To use a folder within a folder, the path below the set root folder (by default "/images/stories/") is used, e. g. to use the folder /images/stories/folder/subfolder" the call would look such as:

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

In general that´s it and the gallery is ready to go.


 


B.) Parameter Overrides

Starting with version 1.3.0 the "Very Simple Image Gallery" offers the possibility to change almost 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 change the position of the thumbnails, the width of the gallery, if to show captions and/or links and so on.

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 - width of the whole gallery in pixel or percent (integer) e.g.: 600

percent - sets if the width is meant as pixel or percent; possible values: 0 (pixel), 1 (percent)

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

twidth
- width of thumbnails in pixel (integer) e.g.: 80

theight - height of thumbnails in pixel (integer) e.g.: 60

quality - quality of thumbnails in percent (integer from 1-100) e.g.: 80

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

right - position of thumbnails; possible values: 0 (below), 1 (right), 2 (below and justified)

area - percent of width reserved for the thumbnails (integer from 1-100) e.g.: 30
Notice: Of importance only when showing the thumbs at the right.

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

sets - number of thumbnails to show per set; possible values "empty" (all images), any integer

setstxt - label for sets (refer to Plugin Howto)

cfwd - value for control-element "next"; possible values "empty" (default button), any text, filename of button (refer to Plugin Howto)

cbwd - value for control-element "prev"; possible values "empty" (default button), any text, filename of button (refer to Plugin Howto)

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

inout - position of captions; possible values: 0 (below the main image), 1 (blended over the main image)

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

script - use JavaScript? possible values: 0 (no), 1 (yes)

folderid - use folder name as identity of the top div-container; possible values: 0 (no), 1 (yes)



Samples:

{*vsig}verysimple|width=600|right=2{/vsig*} - without the asterisks
Regardless of the settings in the backend, this gallery is shown with a width of 600 pixel (width=600). The thumbnails are below the main image and get justified to the right border of the main image (right=2)

{*vsig}verysimple|width=600|right=1|area=40{/vsig*} - without the asterisks
Width 600 pixel (width=600), thumbnails right (right=1), space for thumbnails 40% of 600 pixel (area=40)

{*vsig}verysimple|twidth=80|theight=60|space=3|quality=80{/vsig*} - without the asterisks
Thumbnails are 80 pixel of width (twidth=80), 60 pixel of height (theight=60), there is 3 pixel space between them (space=3) and they are generated with 80% of the possible quality (quality=80)

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:

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

Gallery-number:
The galleries within one content item are numbered automatically by the plugin according their appearance in the article 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:

{*vsig_c}0||myTitel|myText{/vsig_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.

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

{*vsig_c}0|pic02.png||{/vsig_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.

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

Notice:
If you don't want to show captions, you may use them to set the attributes "alt" and "title" of your images. If the plugin finds a set caption for an image, it uses the title-line for ALT/TITLE of the image even when captions are not activated.
Using this behavior you have also the possibility to deactivate file names as ALT/TITLE with an empty default-call for your gallery.

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 image file).
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:

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

Gallery-number:
The galleries within one content item are numbered automatically by the plugin according their appearance in the article 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:

{*vsig_l}0||http://www.bretteleben.de|bretteleben.de|_blank{/vsig_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 image file empty. The link opens in a new window.

{*vsig_l}1|pic01.png|http://www.disney.com|Disney|_self{/vsig_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.

{*vsig_l}0|pic02.png|||{/vsig_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.

{*vsig_l}0|pica.jpg|http://www.my.domain.com/myGreatProduct1|greatProduct1|_self{/vsig_l*} - without the asterisks
{*vsig_l}0|picb.jpg|http://www.my.domain.com/myGreatProduct2|greatProduct2|_self{/vsig_l*} - without the asterisks
{*vsig_l}0|picc.jpg|http://www.my.domain.com/myGreatProduct3|greatProduct3|_self{/vsig_l*} - without the asterisks
{*vsig_l}0|picd.jpg|http://www.my.domain.com/myGreatProduct4|greatProduct4|_self{/vsig_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.


That's it! Have fun with the plugin!


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.

Last Updated on Saturday, 16 January 2010 19:30
 
Comments (156)
@Firas
156 Sunday, 28 February 2010 11:40
A. Berger
Hi Firas!

Thanks for your suggestions.

About the shadowbox - this plugin was forked from the original "Simple Image Gallery" by joomlaworks to get rid of the lightbox. I am not a friend of any kind of modal window (lightbox, shadowbox, graybox, fatbox, slimbox whatever name the thing has that hides my page behind a curtain) and I will not reintegrate one into this extension. At the moment extensions.joomla.org lists 44 photo gallery extensions. Only two of them are developed by me and the vast majority of the remaining 42 comes with some kind of modal window. I'm pretty sure, whoever needs this kind of image presentation will find the extension that fits his/her needs amongst these 42.

About your second suggestion - on the list of possible features to add is the possibility to generate watermarks for the images but to force the visitor to repeat user/password for every single image is an idea that - in my opinion - will not be used by more than a handful of people. There are significant smarter ways to protect content, just have a look at the category "Content Restriction" at extensions.joomla.org.

Best regards
Andreas
Suggestions
155 Saturday, 27 February 2010 22:40
Firas
Hi,
The plugin is nice, although it will be nicer if you consider the following:
1) giving the option to display the selected image in a shadowbox
2) if the images were placed in a 'Protected folder' then every time a thumbnail is clicked a dialoge box appears asking for the username and the password for accessing that folder >>> so, if you can add parameters somewhere for the admin in order to enter those values so the plugin can read from that secured folder it will be perfect. (as far as I tried there is no plugin out there does this)
@Rupam
154 Tuesday, 23 February 2010 21:14
A. Berger
Hi Rupam!

I'm sorry but it's not possible to configure the Very Simple Image Gallery nor another one of my plugins to work this way and I don't know an extension that offers this layout.

Best regards
Andreas
Special type of image gallery
153 Tuesday, 23 February 2010 15:56
Rupam
http://www.khambaliadental.co.uk/about_us.html

I want above link feature in joomla please help its urgent. by which plug in i get this feature or it is possible by your plug in...
@Konrad
152 Monday, 15 February 2010 19:32
A. Berger
Hi Konrad!

Have a look at the page FAQ&Troubleshooting (menu at the left), it lists at least two third party extensions (there may be others) reported to allow this plugin to be used at a module position.

Best regards
Andreas
Very Simple as a module
151 Monday, 15 February 2010 16:30
Konrad
Hi, this is a great plugin! Easy to implement and very well documented. I have a question though: I've tried to display gallery not in the component com_content but as a module (like custom html). Unfortunatly the script isn't working. Is it possible to use simple Gallery as a module?
@Rolf
150 Thursday, 11 February 2010 19:07
A. Berger
Hi Rolf!

The plugin is developed with the component com_content (the component that shows the main content of a page in Joomla!) in mind. If it does not work at all within the content of Virtuemart, the most likely reason is, that this component does not fire the events, that execute the plugin. If it does work but e.g. the layout and/or script is not present, the most likely reason is, that the component (Virtuemart) does not allow the plugin to add information to the Joomla Head-Data (as the component com_content does).

Anyway, you could either check the support forums of Virtuemart if this problem (using content-plugins) has already been discussed or have a look at the extension specific extensions at extensions.joomla.org, that also list extensions explicitly developed to be used with Virtuemart.

Best regards
Andreas
VerySimpleImageGallery and Virtuemart
149 Thursday, 11 February 2010 13:04
Rolf
Hola,

Now i have tried the VerySimpleImageGallery, works perfectly in the content, but unfortunately not in the Virtuemart product detail page.
How this can be, knows someone advice?

best reagards
Rolf
Great plugin!
148 Thursday, 11 February 2010 12:26
VIC
This is a really great plugin. As far simple and easy to use and display.

Just as a feedback, like others say, would be good to make possible to add soft transitions or even make an option for lightbox display.

However, excellent job! Thank you.
Awesome
147 Sunday, 07 February 2010 14:35
fadle Meddkii
this is a very nice and very simple Galary, however few extra image behavior needed like alpha thumbs, on-mouse-over action and simple image slides .. but it is still great .. go ahead