Home Joomla Very Simple Image Gallery - Howto Plugin Code
2010-08-01
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

height - maximum height of the images set in pixel; possible values: empty (use full width), (integer) e.g.: 300

imquality - quality of images in percent (integer from 1-100) e.g.: 90

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

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

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.

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).

Last Updated on Sunday, 14 March 2010 14:57
 
Comments (186)
Auto link to large image
186 Thursday, 15 July 2010 00:31
Oredig

Is there any way to have each thumbnail link to it's parent image automatically? I'm using "Use Sets of Size" = 1.

@Oredig
Wednesday, 21 July 2010 15:35
A. Berger

Hi Oredig!

I have this feature on my todo-list for future versions but up till now, it's not possible.

Best regards
Andreas

Thumbnail title
185 Tuesday, 06 July 2010 18:09
Ivona

Hi,

First, thanks a lot for great plugin :))))

I have a question for you: is it possible to show titles below thumbnails? I've added titles below main image, but I need them to be shown below thumbs to. Is this possible?

Thanks,
Ivona

@Ivona
Tuesday, 06 July 2010 21:25
A. Berger

Hi Ivona!

This configuration is not part of the plugin and it will not become part of the plugin because the default bahavior is to show the thumbnails below the main image, no matter how many of them are to be shown.
Anyway, you could try to modify the stylesheet of the plugin /plugins/content/plugin_vsig/vsig.css to fit your needs. I haven't tried it myself but it should be possible.

Best regards
Andreas

Thumbnail Sizes
184 Monday, 05 July 2010 02:56
Justin

Trying to get all of my thumbnails the same size -- any suggestions? If I turn off the proportion setting, then it crops them too much, if I leave it on, even if pictures are all set to the same size, the gallery has them with different width's and heights...

@Justin
Tuesday, 06 July 2010 22:10
A. Berger

Hi Justin!

One way to get thumbnails of the same dimensions is to use images with identical proportions, the other way is to crop the thumbs. There is no possibility to stretch/distort them.

Best regards
Andreas

VSIG not working
183 Sunday, 04 July 2010 08:25
SteveW

More than likely the problem is me, but I have put the following code into an article page

{*vsig}May2010{/vsig}

(May2010 being the folder name,)


In HTML view the paragraph tags sit either side of the script i.e

{*vsig}May2010{/vsig}

when I open the page all I see is the above script.

Please help I am finding this very frustrating.

@SteveW
Tuesday, 06 July 2010 22:32
A. Berger

Hi Steve!

At first, please check if the plugin is enabled. If it is, please check if you are trying to show the gallery at a module position instead of embedded into the main content. If so, it is possible that the module you are using does not support content plugins. You may want to have a look at the page "FAQ&Troubleshooting", it lists at least two extensions, that support my plugins when shown at a module position.

Best regards
Andreas

Transparency effect in thumbnails
182 Thursday, 01 July 2010 20:01
Douglas

Hi! Your plugin is awesome!! It is helping me a lot!

I have two questions: Firstly, I would like to know how to use a transparency effect in thumbnails when there is an "On mouse over" in the thumbnails. The solution could be in the .css ou in the .js, both would be good for me. The easiest would be better :) I'm not so good coding...

And if it is possible the active thumbnail (after clicking) have this transparency too?

Best regards!
Thanks ;)

@Douglas
Thursday, 01 July 2010 22:19
A. Berger

Hi Douglas!

About the transparency on hover, you could modify the stalesheet of the plugin at /plugins/content/plugins_vsig/vsig.css to achieve this.

About changing the style of the active thumbnails:
- add this functionality to the JavaScript /plugins/content/plugin_vsig/vsig.js
- add the needed classes and selectors to the stylesheet /plugins/content/plugins_vsig/vsig.css
- patch the script /plugins/content/vsig.php to get this working for the initial main image

Best regards
Andreas

URL title instead caption title is showing when hover about thumbnail
181 Tuesday, 29 June 2010 09:48
Michal Srna

Hello, i dont know if its bug or it should be that way, but in older version, when i hovered about thumbnail picture, it showed me caption title in small box. But now, when I hover about thumbnail (version 1.5.5) it shows me URL title. Is it normal, or is there some easy way to change it, so when hover, it will show caption title and not URL title. Thanks for answer.

@Michal
Thursday, 08 July 2010 22:31
A. Berger

Hi Michal!

At first - sorry for the late response! Second - no, it is not a bug, I changed the behavior some versions ago. If there is nothing, the image file name is shown, if there is a default caption, the default caption overrules the file name. If there is a specific caption, it overrules them both. If there is a link - it overrules all of them. And yes, of course it could be changed. I did it - only the other way around. And in general and because this is not the only thing you would prefer as it has been - I am really sorry that you don't like the way this plugin has taken since your last update a year ago but I hope that you will understand, that I will not walk back this year step by step to reinvent a status I already left behind.

Best regards
Andreas

works well!
180 Sunday, 27 June 2010 05:33
jackarow

any way to change the font size on the caption/text portion?

props for a great plugin!

@jackarow
Monday, 28 June 2010 21:45
A. Berger

Hi jackarow!

You can change the appearance of the captions in the stylesheet of the plugin: /plugin/content/plugin_vsig/vsig.css

The selector .vsig_top div.outside {} deals with the captions, placed below the main image and the following selectors handle the two parts of the captions, the title-line and the text-line:

.vsig span a, .vsig span a:link, .vsig span a:visited, .vsig span a:focus, .vsig span a:hover, .vsig span a:active {} ... appearance of the title line if feature links is activated
.vsig span + span a, .vsig span + span a:link, .vsig span + span a:visited, .vsig span + span a:focus, .vsig span + span a:hover, .vsig span + span a:active {} ... appearance of the text line if feature links is activated
.vsig_top div span {}... appearance of the title line
.vsig_top div span + span {}... appearance of the title

Best regards
Andreas

Caption - option to show image name?
179 Saturday, 26 June 2010 00:35
Peter Vistesen - DK

Hi

First of all, thankyou for sharing this brilliant plugin !

however I have a thing that would make it even better, atleast for me.
Under caption, I would like to be able to show the image file name, but without the file start and ending, eksampel.
Emagine that we have a file named "001-This is a test.jpg"
Then the caption for this picture would be "This is a test"
By having the number infront of the image name, the we can still deside in wich order the pictures are shown in the galleri.
It should be posible to add the caption for the entire galleri.
If this was posible, then you could let the user that made the picture, deside what the caption should be, without me needing to code the caption for every picture.

What do you think ?

Regards form south africa - from a Dane thats fare away from home
/Peter

@Peter Vistesen
Monday, 28 June 2010 20:35
A. Berger

Hi Peter!

The image file name is used for Alt and Title if neither caption nor link is set for an image but it will never become the source of the captions because complicated file names (i.e. file names containing special characters, blanks, using Upper/Lower-case and so on) are a real pain and cause a lot more trouble than they solve - especially when used on a web server.

Best regards
Andreas

Linking to mailto:
178 Wednesday, 23 June 2010 16:13
John

First and foremost, awesome product.
Got it up and running in minutes.
Excellent documentation.
I do have one question: Can you link an image to an email address?

Thanks for a great product.

@John
Wednesday, 23 June 2010 21:24
A. Berger

Hi John!

It works - as far as the plugin is concerned. Just insert mailto:blub@blub.com as the link URL. "As far as the plugin is concerned" because you have to prevent the Joomla! Plugin "emailcloak" from replacing this URL with a JavaScript to keep out spiders. I confess, I haven't even tried to do so.

Best regards
Andreas

subgalleries?
177 Wednesday, 23 June 2010 15:52
Nuzzina

Is possible create galleries with subgalleries? For example I have folder ANIMALS and subfolders CATS, DOGS. Is possible create album ANIMALS and when user clicks on it, opens CATS and DOGS and when he clicks on CATS opens images of cats?

@Nuzzina
Wednesday, 23 June 2010 21:06
A. Berger

Hi Nuzzina!

No, this - in my opinion - would be a task for an image gallery component, not a plugin.

Best regards
Andreas

English
Panoramic Image Viewer
AddThis Social Bookmark Button
Who's Online
We have 32 guests online
Latest Items