Home Joomla Very Simple Image Gallery - Howto Plugin Code
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" in Joomla!1.5 or "/images/" in Joomla!1.6/1.7) 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 is used, e. g. to use the folder /images/stories/folder/subfolder" the call in Joomla!1.5 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 (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 - no longer used (version 1.6.5)

cols - thumbnail columns left/right of main image (integer) e.g.: 2

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)

autolink - link the main image to the original image file; possible values: 0 (no), 1 (yes)

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

hover - switch the main image onhover thumb; possible values: 0 (no), 1 (yes)

preload - preload images and thumbnails; possible values: 0 (no), 1 (yes)

tooltip - use the image file name for ALT/TITLE; 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|cols=2{/vsig*} - without the asterisks
Width 600 pixel (width=600), thumbnails right (right=1), in two columns (cols=2)

{*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.

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.


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 Thursday, 20 October 2011 21:20
 
Comments (33)
re: removing image borders
33 Wednesday, 09 May 2012 16:43
Damian

never mind, I found the answer on another webpage and it worked (btw, always clear joomla backend cache).  Thx allot, it's an awesome plugin!

How to use caption
32 Friday, 04 May 2012 17:30
Aldy

Hi,

I'm still confuse with this:

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.


Can you explain the above message? in this tag there is no tag for location of the images, how I should put all the images?

Thanks and look forward to hearing from you soon.

Best,
Aldy

@Aldy
Friday, 04 May 2012 22:21
A. Berger

Hi Aldy!

A sample:

A)
Let's assume your first folder with images is (in Joomla!2.5) /images/mypics and it contains the following files:
"IMG_PC 201205032013.jpg", "IMG_PC 201205032014.jpg", "IMG_PC 201205032015.jpg", "IMG_PC 201205032016.jpg", "IMG_PC 201205032017.jpg", "IMG_PC 201205032018.jpg".

First, please rename the images to 01.jpg, 02.jpg, 03.jpg, 04.jpg, 05.jpg and 06.jpg. (In a perfect world you will do this before uploading them and whilst scaling them down to a reasonable size :))

Why renaming? Because it creates a nicer source code on your pages, it is a good opportunity to sort them and - last but most important - short file names without any special signs make your life a lot easier on a web server. Just believe me. :)

B)
Let's further assume the second folder with images /images/myotherpics contains the files a.jpg, b.jpg. c.jpg

C)
Now to your article. It may look like:
+++++++++++++++++++++++++++++
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, {*vsig}mypics{/vsig*}sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.{*vsig}myotherpics{/vsig*}
+++++++++++++++++++++++++++++
(code without asterisks)

You see, we have 2 galleries. Now we want to add captions to both of them. Please note: It is of absolutely no importance where in your article you place the following code, it is of absolutely no importance how it is sorted and if it is coherent or scattered over the article.

We start with a default caption for the first gallery. "First" means, the first gallery appearing in your article. This is - take a quick look - the gallery showing the images of the folder "mypics". Because it is the first gallery, the first parameter is "0".

{*vsig_c}0||default title|default text{/vsig_c*} (code without asterisks)

This caption (no image specified) gets applied to every image in the first gallery, that has no specific caption set. And this is what we will do now. We will set specific captions for two of the images in the first gallery:

{*vsig_c}0|01.jpg|title for image 01|text for image 01{/vsig_c*}
{*vsig_c}0|04.jpg|title for image 04|text for image 04{/vsig_c*} (code without asterisks)

You see, the first parameter points to the first gallery in the current article, the second parameter points to the image file.

Next, we will set specific captions for the images in the second gallery appearing in your article, the gallery showing the images from the folder "myotherpics". The difference to the code for the first gallery is the first parameter. It now is "1" (0,1,2,3,4,5... and so on).

{*vsig_c}1|a.jpg|title only for image a|{/vsig_c*}
{*vsig_c}1|b.jpg||text only for image b{/vsig_c*}
{*vsig_c}1|c.jpg|title for image c|text for image c{/vsig_c*} (code without asterisks)

Now, let us collect our caption-code:
{*vsig_c}0|01.jpg|title for image 01|text for image 01{/vsig_c*}
{*vsig_c}0|04.jpg|title for image 04|text for image 04{/vsig_c*}
{*vsig_c}1|a.jpg|title only for image a|{/vsig_c*}
{*vsig_c}1|b.jpg||text only for image b{/vsig_c*}
{*vsig_c}1|c.jpg|title for image c|text for image c{/vsig_c*} (code without asterisks)

We now have set captions for two different galleries in one article. And to repeat myself - it is of absolutely no importance where in your article you put this code. Maybe you prefer to put it to the end to have it all together or maybe you want to add the code of captions and links to the respective gallery ... it works!

And the best of all: If you are using Joom!Fish (as soon as it gets released for J!2.5) or FaLang, you can translate your captions with your article.

Best regards
Andreas

2 big images
31 Tuesday, 01 May 2012 22:14
Anne

Hi,

is it possible to show two big images side by side? (i.e. a house before and after renovation)

Ideas appreciated. thanks Anne

@Anne
Wednesday, 02 May 2012 20:32
A. Berger

Hi Anne!

No, such a layout is out of the scope of this plugin, but I would check extensions.joomla.org because if I remember right, I once have seen such a "before-after" extension there.

Best regards
Andreas

Is't possible to add label or caption on the thumbnails?
30 Friday, 27 April 2012 11:17
Adrian

This plugin  is great and very helpful.
May I ask if is't possible to add label or caption on the thumbnail aside from the large image?
Thanks.

@Adrian
Tuesday, 01 May 2012 15:48
A. Berger

Hi Adrian!

Depends on what you want to achieve. Captions blended over the thumbnail or shown below the thumbnail (like the main image) are not part of the plugin, but it uses the title lines of captions (or the title line of links), set for the main images for alt and title-tag. This means that they show up on mouse over.
In addition, if you are not going to use the feature "captions" for the main images, you can specify the captions - and turn off the feature in the backend. In this case, the title line will although get used for alt/title.

Best regards
Andreas

Standalone Gallery
29 Sunday, 22 April 2012 03:47
Rudolfo

Great plugin i found.. thx to the builder.

How to show this gallery as stand alone  gallery ?
i mean when we click some menu like "galerry". this Gallery will shows full like other Gallery Component ?

any body can help me pls ?

@Rudolfo
Sunday, 22 April 2012 09:53
A. Berger

Hi Rudolfo!

Joomla! knows three types of extensions: Component, Module and Plugin.
A component creates the main content of a page.
A module creates the content of a special place inside a page (aka "module position").
A plugin modifies the content of a page.

The "Very Simple Image Gallery" is a plugin. To be precise, it is a content plugin.
This means, it is developed to modify the main content by replacing a line of code with an image gallery.
There is no functionality to create menu-items.

This further means, what you are looking for is - as you write yourself - not a gallery plugin but a gallery component.

Maybe you want to check extensions.joomla.org for an alternative. In this directory components are marked with "C" (green button), modules with "M" (red button) and plugins with "P" (purple button). In your case, green is the color to go for. :)

Best regards
Andreas

Adding Captions
28 Sunday, 15 April 2012 20:53
Penn

hi there, great plug-in, been using it for quite a few years now

However, this is the first time I have decided to try and put captions on the photos themselves.  Unfortunately I'm having a few problems, the instructions don't state where the extra code needs to go.  As you know, the code for adding a gallery on the page, in my case {*vsig}natural{/vsig*}. I want to add a caption on each photo.  Let's say I want to put Natural Pond under the first photo, what code would I use, and whereabouts would I place it, on the article page underneath the existing code?

Here is the website in question
www.aquaticanswers.co.uk/natural-ponds

@Penn
Monday, 16 April 2012 20:11
A. Berger

Hi Penn!

The code for captions and/or links is used in the article like the code for the gallery. Sample:

{*vsig}natural{/vsig*}
{*vsig_c}0|natural_pond_1.jpg|1th title|1th text|{/vsig_c*}
{*vsig_c}0|natural_pond_2.jpg|2nd title|2nd text|{/vsig_c*}
{*vsig_c}0|natural_pond_3.jpg|3rd title|3rd text|{/vsig_c*} ... without the asterisks


The first parameter (0) targets the 1th gallery in the current article. This means, the captions for a second gallery in the same article would start with {*vsig_c}1|...
It does not matter if the captions are placed before or after the code for the gallery, they are collected by the plugin separately and attached to the gallery according the 1th parameter. If using more galleries in 1 article, you may even mix the lines, the plugin will sort them for you.

Best regards
Andreas

Thanks
27 Tuesday, 17 January 2012 16:42
Thomas B.

Thanks for your development. I was still weeks looking for such a good plugin.


 

customization
26 Wednesday, 14 December 2011 17:45
Cesar Labadia

Hi, congratulations for all your plugins.

It's possible the thumbnails appear darker when mouse is out and lighter when mouse is over the thumbnail ?

Thanks

@Cesar Labadia
Wednesday, 14 December 2011 19:53
A. Berger

Hi Cesar!

I haven't tried to modify the CSS this way myself up till now but if you want to give it a try, the stylesheet of the plugin is /plugins/content/plugin_vsig/vsig.css (Joomla!1.5).

Best regards
Andreas

capptions and links
25 Wednesday, 07 December 2011 20:37
Branko

Hi there,

very nice extension. Please let me know if this would be possible to set:
I am using plugin code for captions and for links. I would like on mouse over a thumb to see caption as tooltip. When mouse over a large image I would to have text I set in link code as a tooltip. Is this doable?

thanks

@Branko
Thursday, 08 December 2011 08:39
A. Berger

Hi Branko!

No, the tooltips for thumbnails and images are always set to the same values.

Best regards
Andreas

filtering
24 Tuesday, 06 December 2011 23:00
ray

Great Plugin

I use an application that allows user to upload there pictures. It creates thumbnails. Is there a way i can filter my images. I have 40 images with thumbnails and I only want to display the images not the thumbnails using {*vsig}foldername{/vsig*} format.

cheers
ray

@ray
Thursday, 08 December 2011 08:22
A. Berger

Hi Ray!

It is not possible out of the box but it should be not too complicated to patch the plugin to select the images to show e.g. following a naming convention.

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