Home Joomla Very Simple Image Gallery - Howto Plugin Code
Main Menu
Most Read
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79
Support

If you like the products on these pages, your support is highly appreciated. Thank you very much!

Amount: 

Latest Items
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109
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)
Issues with Caption code
3 Monday, 18 April 2011 16:54
Bwilliams

Code I am using for the gallery: {*vsig}imagingscience/gallery{/vsig*}
Which works beautifully. However, I would like to add captions to the images in this gallery. So my question is... do I leave the above code as is and add the "vsig_c" code after this? or in place of?
Also, I'm confused as to what gallery I reference within the caption code. Do I reference the subfolder I created ("gallery") or the one created by vsig ("vsig_images", as seen below)?
{*vsig_c}imagingscience/gallery|AmyMilleroriginal.jpg|Amy Miller|Award Winner{/vsig_c*}
OR
{*vsig_c}vsig_images|AmyMilleroriginal_210_294_90.jpg|Amy Miller|Award Winner{/vsig_c*}
Either way. I can not get this to work.And would like to know what I am doing wrong. Any help would be appreciated.

Thank you!

@Bwilliams
Tuesday, 19 April 2011 20:19
A. Berger

Hi Bwilliams!

First, the code for captions and links is used in addition to the initial call.
Second, the plugin automatically numbers the galleries according their appearance within an article, starting with "0". This number is targeted by the first parameter of the code for captions and links.

Assuming that the gallery "imagingscience/gallery" is the first one in your article, your code would look such as:

{*vsig}imagingscience/gallery{/vsig*}
{*vsig_c}0|AmyMilleroriginal.jpg|Amy Miller|Award Winner{/vsig_c*} ... without the asterisks

Best regards
Andreas

Bildüberschriften an Bildbreite anpassen?
2 Sunday, 10 April 2011 21:02
pinsel

Hallo Andreas,

zunächst ein Riesenlob an Dich für deine super Plugins! Einfach zu bedienen und schick anzusehen.
Ebenso ist mir dein spitzen Support ins Auge gefallen, den du immer aktuell und zeitnah pflegst.
Sowas ist heute nicht selbstverständlich. Danke dafür!

Nun habe ich allerdings ein Problem und zwar hab ich in einer Galerie hoch- und querformatige Bilder.
Wenn ich nun Überschriften und Texte vergebe nutzen diese ja die gesamte Galeriebreite ("Gallery width").
Bei den querformatigen Bildern passt das auch alles, leider schießt die graue Textbox bei den hochformatigen Bildern über die Bildränder hinaus.
Gibt es eine Möglichkeit, diese Textbox and die Bildbreite anzupassen?
Würd mich über eine Antwort freuen!

Gruß

Re: Bildüberschriften an Bildbreite anpassen
Thursday, 21 April 2011 17:25
Jonathan Lubach

Hallo Andreas,

ich habe mir die gleichen Gedanken gemacht. In meiner Galerie befinden sich auch Quer- und Hochformatbilder, sodass bei den Hochformatbildern die Beschreibung bzw. die Überschrift nicht mehr passend unter/in dem Bild sitzt.
Ich habe dann die CSS insofern angepasst, dass ich den Text zentriert unter dem Bild darstellen kann. Denn wenn das Bild im Hochformat (meine maximale Bildhöhe ist so groß wie die Höhe eines Querformatbildes) ist, sitzt der Text leicht links vom Bild, das sieht einfach unschön aus.

Gruß Jonathan

@pinsel
Monday, 11 April 2011 20:14
A. Berger

Hallo Pinsel!

Nicht wirklich, also nicht ohne das Plugin selbst umzubauen. Die Breite für die Captions wird im Zuge des Seitenaufbaus zwar dynamisch ermittelt, aber nur für die ganze Galerie, nicht für jedes einzelne Bild. Das hat praktische (es ist einfacher und ich mag einfache Dinge) und auch ästethische (ich finde es wesentlich angenehmer und ruhiger, wenn der Text immer an der selben Stelle sitzt) Gründe.
Bei Galerien mit verschiedenformatigen Bildern würde ich die Captions demzufolge nicht über dem jeweiligen Bild einblenden sondern sie - auf neutralem Hintergrund - unterhalb der Bilder anzeigen. Wenn Du das mal austestest wirst Du sehen, dass mit der Umstellung die - jetzt störende - Diskrepanz zwischen Bildbreite und Textbreite sofort in den Hintergrund tritt.

Gruß
Andreas

photo borders
1 Thursday, 07 April 2011 12:58
Feargal

Hi,

Great plugin!! Very easy to install and configure.
Just one thing, can i get rid of the borders around the images and thumbnails?

Thanks

@Feargal
Thursday, 07 April 2011 20:18
A. Berger

Hi Feargal!

You can achieve this by modifying the stylesheet of the plugin.

Open the stylesheet /plugins/content/plugin_vsig/vsig.css. In line 11 you find the selector .vsig_top img {}, here you can set the color of the - by default gray – border around, and the – by default white – background of the main image. In line 14 you find the selector .vsig_thumb img {}, here you can make the same modifications for the thumbnails.
(I personally would set the border color to the background color instead of removing them.)

Best regards
Andreas

Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135
English
Panoramic Image Viewer
Follow me on Facebook
Follow me on Google+

bretteleben.de

Add to circles

Who's Online
We have 289 guests online