Very Simple Image Gallery Plugin Installation and Usage
Written by Andreas Berger   
Monday, 29 December 2008 08:04

A step for step tutorial on how to install and use the Very Simple Image Gallery Plugin.

Installation

1.) Log into your administration interface


2.) Go to "Extensions" > "Install/Uninstall"


3.) Select the Package File with the Very Simple Image Gallery Plugin


4.) Click "Upload file & Install"


5.) If everything worked fine, you get the message "Install Plugin Success"


6.) Select "Extensions" > "Plugin Manager"


7.) Find the "Very Simple Image Gallery Plugin" and click it


8.) "Gallery width" is the complete width. If you decide to display the thumbnails below the main image, this is the width of the main image. If you decide to display the thumbnails right of the main image, "gallery width" is the width of the main image plus the space, used by the thumbnails.


9.) "max. Image height" allows to set if the images use the full available width (empty) or if they get scaled to meet the set maximum height (integer, e.g.: 300). Using this parameter makes sense if you are showing images of different proportions in one gallery.


10.) The next parameter is the quality of the images in percent. Values from 80 to 90 will do fine. Remember, the higher the quality, the larger the filesize!


11.) The next parameter sets the position of the gallery within the available space. You may choose between left - centered - right, float left and float right. The last two options allow the gallery to get wrapped by your text. They also increase the dependence from the used template and will not always show the desired results!


12.) The next parameter to configure is the maximum width of the thumbnails in pixel.


13.) Next comes the maximum height of the thumbnails in pixel.


14.) The next parameter sets if thumbnails get scaled proportionally or cropped to fit the set maximum values.


15.) The next parameter is the quality of the thumbnails in percent. Values from 60 to 70, maybe 80 will do fine. Remember, the higher the quality, the larger the file size!


16.) Next comes the space between the thumbnails in pixel. Try out what fits best, there is no given rule.


17.) The thumbnails may get displayed left, right or below the main image. What fits your needs depends on your template.



Starting with Version 1.2.0 there is a third option available "below justified". If selected, the plugin takes your settings and modifies the size of the main image and the size of the thumbnails to justify the thumbnails exactly below the main image.
This works only, if you have set the width of the main gallery in pixel!


18.) If you have decided to show the thumbnails right of the main image, this is the parameter to set the number of columns of thumbnails to show. If the set value leads to a situation where there is no more room for the main image at all, the plugin shows one column only.
If you have decided to show the thumbnails below the main image, this parameter is of no relevance.


19.) "Sort Order" sets the order the images are shown. You may choose between alphabetic ascending, alphabetic descending, old to new and new to old (both use "last changed" not "created"!) and random.


20.) Starting with version 1.5.0 the parameter "Sets" offers the possibility to split a gallery into multiple sets (refer the samples). Left empty all images are shown on one page. Same goes, if the given value is higher than the number of images found.



Any other value (3, 4, ...) creates multiples sets and generates links that allow to navigate between the sets. In addition, a counter is generated, that shows the number of sets available.


21.) "Label Sets" tells the counter how to - yep - label the sets. "Set", Desk", "Page" ... your turn.


22.) The parameters "Link/Button forward" and "Link/Button backward" set the button/text, you want to use for the links, that allow to navigate between the sets.

Left empty the plugin will use the automatically installed default buttons.

If you insert text, this text will be used.

Instead of the default buttons or text links you may also use custom buttons. Just insert the name of the image-file you want to be used (including the suffix). The plugin detects .jpg, .gif and .png and searches for the corresponding file in the set folder (we will set this a little later, by default it is "/images/stories/vsig_buttons"). If the file exists, the image is shown.


23.) If you activate "Show captions?", you have the possibility to add Title and Text to your images.


24.) "Position of Captions" sets if the captions (and text) are shown cross-fading over the lower part of the main image or below the main image.


25.) "Use links?" allows - if activated - to set links for the images.


26.) If "Link Original Image?" is activated, the plugin automatically creates a link from the main image to the original image file, opened in a new window.


27.)Image root configures the path to the folder you are uploading (directly or stored in subfolders) your images. By default this parameter is set to /images/stories/ in Joomla!1.5 and /images/ in Joomla!1.6/1.7 (and this folder is also used when the parameter is empty). In most cases this setting will fit your needs and there is no reason to change it. Only if you have organized your images in a folder structure outside of the default image folder, put the path here.
The set value of this parameter will be added to the folder name you insert in the code in your article automatically by the plugin and must not be repeated in the article.


28.) Buttonfolder
If you are going to use custom buttons for the navigation between sets, this is the place to put the path to the folder you uploaded this buttons. By default this parameter is set to /images/stories/vsig_buttons/ in Joomla!1.5 and /images/vsig_buttons/ in Joomla!1.6/1.7 (and this folder is also used when the parameter is empty).


29.) "Use JavaScript?" decides if a click on a thumbnails just replaces the main image without reloading the page (option YES) or if a click reloads the page with the new main image. To use JavaScript is more comfortable for your visitors, but if page-views are very important for you, you may choose to work without.
Visitors having JavaScript disabled will get served the second option anyway. This way we provide a noscript-fallback so anyone can use the gallery.


30.) If you activate the parameter "Switch on hover thumb?", the main image is changed when the mouse-pointer moves over the thumbnail. The feature requires the parameter "Use JavaScript?" to be activated.


31.) The parameter "Preload images" allows to load every - not already visible at page load - image/thumbnail using JavaScript as soon as the page finished loading. This is a good idea in general but really important if you have activated the parameter "Switch on hover Thumb?" because in this situation, the time it takes to load the image when a visitor hovers a thumbnail is extremely disturbing.


32.) "File names as tooltips?" allows to activate/deactivate the usage of the image file name (without suffix) for ALT and TITLE of the images if neither a caption nor a link is specified.


33.) The parameter "Foldername as ID" gives you the possibility to set the name of the folder, from which the images are taken, as identity of the surrounding div-container of the gallery. (id="foldername").



The plugin contains in the folder (Joomla-Installation)/plugins/content/plugin_vsig (Joomla!1.5) or (Joomla-Installation)/plugins/content/verysimpleimagegallery/files (Joomla!1.6/1.7) the stylesheet vsig.css. This stylesheet is loaded after the css-settings the plugin writes to the head-section of the page and gives you the possibility to overwrite every single setting. This works anyway and applies to all "very simple image galleries" on your site.
Setting a unique identity gives you furthermore the possibility to use this identity as a CSS-Selector and use individual styles for one single gallery.


34.) At the last you find the results of the GD-check, the plugin performs. The GD library is the most widely spread extension of PHP when it comes to image manipulation and the plugin makes use of this library to create the plugins. It checks if the library is available at all and if the relevant image file formats (jpg, png and gif) are supported.



If one or two file formats are not supported, the plugin will still work with image files of the remaining file format(s).



If the GD library is not available at all, the plugin cannot be used. In this case I recommend to ask your hoster if the GDlib can get enabled for your account.


35.) Activate the plugin


36.) Click "Save" - done


 

Usage


Next we need the images. We upload them to a folder in (Joomla-Installation)/images/stories in Joomla!1.5 or (Joomla-Installation)/images in Joomla!1.6/1.7. The following points refer to Joomla!1.5, anyway, beside of the folder nothing changes in Joomla!1.6/1.7.


1.) Go to "Site" > "Media Manager"


2.) Navigate to the folder "Media" > "stories"


3.) Create a new subfolder for your images. In this sample I choose the name "verysimple"


4.) Open the new folder ...


5.) ... and upload your images to it. The plugin accepts images of type ".jpg", ".gif" and ".png".


6.) Go to "Article Manager" and open the article you want to display the gallery.


7.) At the place you want the gallery to be shown insert the code to call it.

 

 

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

How to show title and text with our images or modify the current gallery from the default-settings in the backend, find out in the second part of this howto (link at the end of the page).

 


8.) Save - done!


 

Maintenance

The plugin creates in the given folder subfolders called "vsig_images" and "vsig_thumbs". Into these folders it saves the images/thumbs following the naming convention:

"imagename" underline "width" underline "height" underline "quality" point "filetype"

e.g.: "myimage_80_60_80.jpg"

Although the plugin creates this files, it does not delete them. Therefore - after having tried different settings - it may be useful to delete obsolete images/thumbnails.

1.) To do so - after having opened the gallery at least once in the frontend - we go to "Site" > "Media Manager" again


2.) The folder with our images ("verysimple" in this sample) now contains the subfolders "vsig_images" and "vsig_thumbs".


3.) Obsolete files in these folders may be deleted. If you delete a - still needed - image/thumbnail too: No problem, the plugin recreates it automatically.



Notice:
The plugin validates images by name and size. Therefore the plugin will not automatically notice, if you have replaced a image with another of the same name and size. To have an image/thumbnails created for the new image you have to delete the corresponding scaled image/thumbnail by hand from the folders mentioned above. This way the plugin will use the new original image to recreate the image/thumbnail.


A survey of the possibilities to call, extend and modify galleries with the code in the content item (Paramater Overrides, Links, Captions): Howto Plugin Code


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 Tuesday, 08 November 2011 22:11
 
Comments (35)
Could not find folder
35 Wednesday, 25 April 2012 18:11
ernst

Hi Andreas,

I have just installed the plugin for Joomla 2.5, but I can't seem to get it working. I keep getting the same error, which ever folder I'm configuring in the plugin. I keep getting:

I have used this syntax: {*vsig}test{/vsig*}

But ii keep getting:
Very Simple Image Gallery: Could not find folder /home/baudeds68/domains/probies.nl/public_html/images/test/

The folder has 0755 rights and the images 0644.

Any help would be appreciated!
Ernst

@Kannan
Friday, 04 May 2012 21:43
A. Berger

Hi Kannan!

Ernst writes "which ever folder I'm configuring", this means that the setting of the image root probably is not the reason for his problem. The folder /images is the default image root in Joomla!2.5 and unless you have changed it, every image you upload using the media manager, will get stored under /images. As long as you manage not to double the folder /images in your path (it is explained in the "Howto" and the backend), the most common reasons for this error are (A) directory permissions, (B) HTML-tags created by a WYSIWYG-editor fragmenting the code and (C) typos.

Best regards
Andreas

Hi Andreas, Please try this:
Friday, 04 May 2012 21:16
Kannan

I got the same error when I installed on Joomla 2.5. But, I have corrected it. Here is what I have done:
Set the "image root" as "/" and try it.
or, in your article avoid the root folder. Ex, avoid "images", if you have set the image root as "/images/"
-----------------------
I think, you have to set the "image root" as "/images/" ... just delete the "test/".

@ernst
Wednesday, 25 April 2012 19:39
A. Berger

Hi Ernst!

Please open the article, switch to HTML-view and check if the code is fragmented with HTML-tags. If so, please remove them.
If this does not solve the problem, please post a link to the page with the gallery and at the least the file name of one of the images in the folder test. I will have a look at it.

Best regards
Andreas

Awesome
34 Saturday, 21 April 2012 15:21
Chris

Hi, I must have tried about 6 different photo galleries and I have to say this is the best one. Simple and easy to use!

Thanks

Navigation tabs
33 Tuesday, 17 April 2012 08:42
Muzu

Hi there,

I installed the plugin and its working very fine and smooth. But i am unable to see any navigation tabs/buttons to go to the next/prev picture. can you please suggest how do i activate these buttons?

@Muzu
Tuesday, 17 April 2012 20:29
A. Berger

Hi Muzu!

The navigation is not meant to go from one picture to the next one but from one set (of pictures) to the next one. Set a value smaller than the number of images in your folder as value of the parameter "Use sets of size" and the navigation will appear.

Best regards
Andreas

Problem gelöst
32 Friday, 13 April 2012 18:10
gina

Danke, habe es hinbekommen.

Grüße
gina

@Nikolaus
Monday, 16 April 2012 20:22
A. Berger

Hallo Nikolaus!

Aller Voraussicht nach durch die Verwendung kleinerer Bilder. Das Problem ist auf der Seite "FAQ&Troubleshooting" (Link im Menü links) beschrieben.

Gruß
Andreas

Und wie?
Saturday, 14 April 2012 18:39
Nikolaus Lenau

Vielleicht kannst du verraten, WIE du es hinbekommen hast? Ich stehe eben vor demselben Problem!

Danke im Voraus, Nikolaus

Wie richtig positionieren?
31 Friday, 13 April 2012 16:39
gina

Hallo,
ich habe das Plugin wie beschrieben installiert. Möchte gern die Gallerie in der Modulposition "Image" (Joombla 1.7) zeigen. Habe dazu ein neues Modul (Leeres Modul,eigene Inhalte) geschaffen und im Textfeld den Code plaziert, einen neuen Ordner "Verysimple" angelegt und mit Fotos gefüllt. Leider kommt folgende Fehlermeldung auf der Seite:
Fatal error: Allowed memory size of 16777216 bytes exhausted (tried to allocate 13488 bytes) in /var/www/web128/html/plugins/content/verysimpleimagegallery/files/verysimpleimagegalleryhelper.php on line 163

Bin Anfänger, bitte einfach erklären, vielen Dank!
Grüße Gina

Faile when creating thumbnails
30 Thursday, 12 April 2012 09:53
Christian

I have followed al the steps but i doesn't create the two foulders with thumbnails and it sends me this message in the article.

JFoulder::create: Foulder not found (like all the times as pictures are)
Failed creating thumbnail directory /var/www/vhosts/circuitosdeociodecalidad.es/httpdocs/images/fotos/alleres/vsig_thumbs/
Failed creating image directory /var/www/vhosts/circuitosdeociodecalidad.es/httpdocs/images/fotos/alleres/vsig_images/

It used to work two months ago but not anymore...

@Christian
Thursday, 12 April 2012 19:48
A. Berger

Hi Christian!

Please check the directory permissions of the folder /images/fotos/alleres, they should be set to 755 for the folder and 644 for the images.

Best regards
Andreas

Great plugin and very simple
29 Thursday, 05 April 2012 15:25
thomas lee

my regional language isn't english
I have two question
1. can i add css hover on link button?
2. can i add plugin on two article and more with different folder?

@thomas lee
Thursday, 05 April 2012 19:32
A. Berger

Hi Thomas!

1.) You find the stylesheet of the plugin at /plugins/content/verysimpleimagegallery/files/vsig.css.

2.) Yes, you can show as many galleries you want in the same and/or different articles, targeting the same and/or different folders.

Best regards
Andreas

Thanks!
28 Monday, 19 March 2012 15:07
Yvonne

Just wanted to say THANK YOU A LOT. I'm a newbie and installing plugins is usually a real pain for me. This plugin is easy to install, looks good and works.

Gallery wird nicht angezeigt
27 Wednesday, 04 January 2012 17:04
robi

Hallo,

aus irgendeinem Grund wird bei mir das snippet  {*vsig}/images/stories{/vsig*} nicht aufgelöst im Frontend und ich sehe die Galerie nicht obwohl unter den einstellung des plugins alles eingestellt ist und GD auch alles enabled ist....kann mir vielleicht jemand weiterhelfen?

LG
robi

@robi
Wednesday, 11 January 2012 16:26
A. Berger

Hallo robi!

Bitte stell sicher, dass

- Du den Code ohne die Sterne verwendest (finden nur hier Anwendung um die Ausführung zu verhindern)
- der Code nicht durch HTML-Tags fragmentiert ist (im Artikel in die HTML-Ansicht wechseln)
- die Galerie im Kontext eines Artikels und nicht an einer Modulposition angezeigt wird

Wenn das das Problem nicht löst, dann poste bitte einen Link zur Seite, ich schau mir das gerne an.

Gruß
Andreas

Very Simple Image Gallery - Rahmenfarbe
26 Tuesday, 13 December 2011 09:50
Michi

Hallo, ich bin mit dem Plugin sehr zufrieden habe aber eine kleine Frage: Kann man die standardmäßig weißen Rahmen der Thumbnails auch farblich anpassen, wenn ja wie (habe keine entsprechende Einstellung gefunden)?

Vielen Dank.

@Michi
Tuesday, 13 December 2011 20:13
A. Berger

Hallo Michi!

Der "weiße Rahmen" ist eigentlich der Bildhintergrund, der eigentliche Rahmen ist die dünne graue Haarlinie außen. Farblich anpassen kannst Du beides im Stylesheet des Plugins: /plugins/content/plugin_vsig/vsig.css (Joomla!1.5).
Hintergrund/Rahmen des Hauptbildes definiert der Selektor .vsig_top img {}, die der Thumbnails der Selektor .vsig_thumb img {}.

Gruß
Andreas

English
Panoramic Image Viewer
Follow me on Facebook
Follow me on Google+

bretteleben.de

Add to circles

Who's Online
We have 60 guests online