Very Simple Image Gallery Plugin Installation und Verwendung
Geschrieben von: Andreas Berger   
Montag, den 29. Dezember 2008 um 08:04 Uhr

Eine Schritt für Schritt Anleitung für Installation und Verwendung des Very Simple Image Gallery Plugins.

Installation

1.) In die Administrationsoberfläche einloggen


2.) Den Menüpunkt "Erweiterungen" > "Installieren/Deinstallieren" auswählen


3.) Die Paketdatei mit dem Very Simple Image Gallery Plugin auswählen


4.) Auf "Hochladen und Installieren" klicken


5.) Wenn alles geklappt hat, erhält man die Meldung "Plugin erfolgreich installiert"


6.) Den Menüpunkt "Erweiterungen" > "Plugins" auswählen


7.) Das "Very Simple Image Gallery Plugin" suchen und anklicken


8.) "Gallery width" ist die Gesamtbreite. Werden die Thumbnails unterhalb des Hauptbildes angezeigt, dann entspricht das der Breite des Hauptbildes, werden die Thumbnails rechts vom Hauptbild angezeigt, dann entspricht das der Gesamtbreite der Galerie (Hauptbild + Thumbnails).


9.) "max. Image height" legt fest ob die Hauptbilder die gesamte verfügbare Breite ausnützen (leer), oder ob Sie entsprechend einer festgelegten Maximalhöhe skaliert werden (ganze Zahl, z.B. 300). Das Festlegen einer Maximalhöhe macht dann Sinn, wenn innerhalb einer Galerie Bilder verschiedener Proportionen verwendet werden.


10.) Der nächste Parameter ist die Qualität der erzeugten Hauptbilder in Prozent. Hier empfehlen sich Werte zwischen 85 und 90. Je höher die Qualität, desto größer die Bilddatei!


11.) Der nächste Parameter legt die Positionierung der Galerie relativ zum verfügbaren Platz fest. Zur Auswahl stehen Links, Zentriert, Rechts, float left und float right. Die beiden letzten Optionen ermöglichen es, die Galerie mit Text umfliessen zu lassen. Sie machen die Galerie gleichzeitig aber auch wesentlich abhängiger vom verwendeten Template und werden wohl nicht immer den gewünschten Effekt haben.


12.) Der nächste Parameter ist die maximale Breite der Thumbnails in Pixel.


13.) Als nächstes kommt die maximale Höhe der Thumbnails, ebenfalls in Pixel.


14.) Der nächste Parameter legt fest, ob die Thumbnails proportional skaliert oder entsprechend der festgelegten Maximalwerte beschnitten werden sollen.


15.) Der nächste Parameter ist die Qualität der Thumbnails in Prozent. Hier empfehlen sich Werte zwischen 60 und 70, vielleicht noch 80 Prozent. Je höher die Qualität, desto größer die Bilddatei!


16.) Als nächstes kann der Abstand der Thumbnails zueinander in Pixel festgelegt werden. Welcher Wert hier passend ist, muss im Einzelfall entschieden werden. Fixe Regeln gibt es keine.


17.) Die Thumbnails können wahlweise neben oder unter dem Hauptbild angezeigt werden. Welche Option die passendere ist, hängt vom verwendeten Template ab.



Beginnend mit Version 1.2.0 gibt es bei der Positionierung der Thumbnails auch die Option "Below Justified". Wählt man diese aus, dann versucht das Plugin, ausgehend von den getroffenen Einstellungen, die Größe der Plugins und des Hauptbildes soweit zu ändern, dass der rechte Rand des Hauptbildes exakt mit dem rechten Rand der Thumbnails abschließt.


18.) Lässt man die Thumbnails rechts/links vom Hauptbild anzeigen, dann wird hier festgelegt, wieviele Spalten von Thumbnails angezeigt werden sollen. Das Hauptbild wird entsprechend skaliert.
Führt der eingegebene Wert dazu, dass für das Hauptbild überhaupt kein Platz mehr bleibt, dann zeigt das Plugin automatisch nur eine Spalte Thumbnails an. Von Bedeutung ist dieser Parameter nur dann, wenn man die Thumbnails links/rechts vom Hauptbild anzeigt.


19.) "Sort Order" regelt die Reihenfolge, in der die Bilder angezeigt werden. Zur Auswahl stehen die Optionen alphabetisch aufsteigen, alphabetisch absteigend, von alt zu neu und von neu zu alt (jeweils Änderungsdatum und nicht Erstellungsdatum!) und zufällig.


20.) Beginnend mit Version 1.5.0 bietet der Parameter "Sets" die Möglichkeit, einzelne Galerien in mehrere Sets zu unterteilen (siehe Beispiele). Wird hier nichts eingegeben oder ist der eingegebene Wert größer als die Anzahl der gefundenen Bilder, dann zeigt das Plugin alle Thumbnails auf einer Seite an.



Jeder andere Wert (3, 4, ...) erzeugt einzelne Sets, zwischen denen mit automatisch angezeigten Buttons/Links navigiert werden kann. Zusätzlich wird ein Counter erzeugt, der die Anzahl der verfügbaren Sets angibt.


21.) "Label Sets" legt fest, wie der Counter die einzelnen Sets bezeichen soll. Ob "Set", "Desk", "Page" ... wie es gefällt.


22.) Die Parameter "Link/Button forward" und "Link/Button backward" legen den Button/Text für die Links fest, mit denen zwischen den einzelnen Sets navigiert wird:

Lässt man die Felder leer, dann werden die automatisch installierten Buttons verwendet.

Gibt man Text ein, dann wird der Text verwendet.

Alternativ zu Standardbuttons und Textlinks können auch eigene grafische Buttons verwendet werden. Findet das Plugin die Endungen .jpg, .png oder .gif, dann sucht es im eingestellten Ordner (Parameter weiter unten, per default: /images/stories/vsig_buttons) nach Bildern dieses Namens. Sind sie vorhanden, dann werden sie angezeigt.


23.) Aktiviert man die Option "Show Captions", dann hat man die Möglichkeit, im Beitrag die Bilder einer Galerie mit Titel und Text zu versehen.


24.) "Position of Captions" legt fest, ob Titel und Text halbtransparent über das Bild eingeblendet oder unter dem Hauptbild angezeigt werden sollen.


25.) Mit der Aktivierung von "Use links?" hat man zusätzlich die Möglichkeit, die Bilder der Galerie zu verlinken. Link, Titel und Ziel (Attribut target) werden im Artikel angegeben.


26.) Mit der Aktivierung von "Link Original Image?" erzeugt das Plugin automatisch für jedes Bild einen Link zur originalen Bilddatei, die dann in einem neuen Fenster geöffnet wird.


27.) Image root legt den Stammordner fest, in dem (direkt oder in Unterordnern) alle Bilder liegen. Standardmässig ist hier in Joomla!1.5 der Ordner /images/stories/ und in Joomla!1.6/1.7 der Ordner /images/ eingestellt (und dieser Ordner wird auch verwendet, wenn das Feld leer ist). In den meisten Fällen ist hier keine Änderung erforderlich, nur wer seine Bilder in einer Ordnerstruktur außerhalb dieses Stammordners organisiert hat, der kann hier den entsprechenden Pfad angeben.
Der hier festgelegte Pfad wird vom Plugin bei jedem Aufruf einer Galerie automatisch ergänzt und darf im Code im Artikel nicht mehr wiederholt werden!


28.) Buttonfolder
Wer für die Verwendung von Sets eigene Buttons erstellt hat, kann diese hier festlegen, in welchem Ordner das Plugin diese suchen soll. Per default ist in Joomla!1.5 der Ordner /images/stories/vsig_buttons/ und in Joomla!1.6/1.7 der Ordner /images/vsig_buttons/ (wird nicht automatisch erstellt) eingestellt. In diesem sucht das Plugin auch, wenn dieses Feld leer ist.


29.) "Use JavaScript?" legt fest, ob beim Anklicken der Thumbnails ein Bildwechsel auf der selben Seite erfolgen soll, oder ob jeder Klick die Seite - mit dem gewählten Hauptbild - neu lädt. Komfortabler ist natürlich Option 1, aber wer extrem auf Seitenaufrufe angewiesen ist, der kann auch ohne Script arbeiten. Besucher mit deaktiviertem JavaScript werden automatisch mit Option 2 bedient.


30.) Aktiviert man den Parameter "Switch on hover thumb?" dann wechselt das Hauptbild nicht erst beim Anklicken eines Thumbnails sondern sobald sich der Mauszeiger über dem Thumbnail befindet. Voraussetzung dafür ist, dass der Parameter "Use JavaScript?" aktiviert ist.


31.) Der Parameter "Preload images" bietet die Möglichkeit, alle - beim Laden der Seite nicht sofort sichtbaren - Bilder der Galerie per JavaScript vorzuladen. Das macht eigentlich immer Sinn, ist aber besonders wichtig, wenn man den Parameter "Switch on hover Thumb?" aktiviert hat, da für den Besucher die ansonsten entstehenden Wartezeiten für das Laden des Bildes besonders störend sind.


32.) Der Parameter "Filenames as tooltips?" regelt, ob die Dateinames der Bilder (ohne Suffix) für ALT- und TITLE-Attribut des Bildes verwendet werden sollen, wenn weder Captions noch Links gesetzt sind.


33.) Der Parameter "Foldername as ID" bietet die Möglichkeit, den einzelnen Galerien den Namen des Ordners, aus dem die Bilder stammen als Identity des umschließenden DIV-Containers zuzuweisen (id="ordnername").



Das Plugin beinhaltet im Ordner (Joomla-Installation)/plugins/content/plugin_vsig (Joomla!1.5) bzw. (Joomla-Installation)/plugins/content/verysimpleimagegallery/files (Joomla!1.6/1.7) das Stylesheet vsig.css. Dieses wird nach den Styleangaben geladen, die das Plugin in den Head-Bereich der Seite schreibt, und ermöglicht es, jede Angabe manuell zu überschreiben. Das ist immer möglich, eine hier getroffene Angabe bezieht sich auf alle Very Simple Image Galerien eines Internetauftritts.
Mit der Zuweisung einer eindeutigen Identity hat man nun aber zusätzlich die Möglichkeit, jede einzelne Galerie individuell zu gestalten, indem man die Identity als übergeordneten CSS-Selektor verwendet.


34.) Abschliessend finden wir hier die Ergebnisses des GD-Checks, den das Plugin durchführt. Die GD Library ist eine der gängigsten Erweiterungen zur Bildbearbeitung für PHP und wird vom Plugin verwendet, um die Thumbnails zu erzeugen. Überprüft wird, ob die Erweiterung überhaupt vorhanden ist und ob die vom Plugin unterstützen Dateiformate (jpg, png, gif) verfügbar sind.



Sind ein oder zwei Dateiformate nicht verfügbar, dann wird die Galerie mit dem/den verbleibenden immer noch funktionieren.



Ist die GD-Lib gänzlich deaktiviert, dann kann die Galerie nicht verwendet werden. In diesem Fall empfiehlt es sich, bei seinem Hoster nachzufragen, ob sie aktiviert werden kann.


35.) Das Plugin aktivieren


36.) Auf Speichern klicken - und fertig


 

Verwendung


Damit man mit dem Plugin etwas anfangen kann, brauchen wir als Nächstes die entsprechenden Bilder. Diese legen wir in Joomla!1.5 in einem Ordner unter (Joomla-Installation)/images/stories, in Joomla!1.6/1.7 in einem Ordner unter (Joomla-Installation)/images/ ab. Die Anleitung bezieht sich auf Joomla!1.5, abgesehen vom Ordner ändert sich aber für Joomla!1.6/1.7 nichts.

1.) Den Menüpunkt "Site" > "Medien" auswählen


2.) Hier in den Ordner "Media" > "stories" wechseln


3.) Einen neuen Unterordner für die Bilder anlegen. Im Beispiel wähle ich dafür den Namen "verysimple"


4.) In den neu angelegten Ordner wechseln.


5.) Und hier die Bilder hochladen. Das Plugin akzeptiert die Dateitypen ".jpg", ".gif" und ".png".


6.) Jetzt im Menüpunkt "Inhalt" > "Beiträge" den gewünschten Beitrag öffnen.


7.) An der gewünschten Stelle den Code zum Aufruf des Plugins eingeben.

 

Der Code besteht im einfachsten Fall aus dem Aufruf selbst {*vsig}{/vsig*} (ohne die Sterne) und enthält den Namen des Ordners, in dem wir gerade die Bilder abgelegt haben. Der im Backend festgelegte Pfad zum Ordner, also per Default "/images/stories/" in Joomla!1.5 bzw. "/images/" in Joomla!1.6/1.7 wird vom Plugin automatisch ergänzt und ist nicht mit anzugeben.

Ein Aufruf sieht also zum Beispiel so aus

{*vsig}verysimple{/vsig*} - ohne die Sterne


Um einen Ordner in einem Unterordner zu verwenden, wird sinngemäß der Pfad unterhalb des im Backend festgelegten Pfades angegeben, also zum Beispiel für den Ordner "/images/stories/ordner/unterordner" in Joomla!1.5:

{*vsig}ordner/unterordner{/vsig*} - ohne die Sterne

An sich war es das und die Galerie ist einsatzfertig.

Will man zusätzlich zu den Bildern auch Text anzeigen, die Bilder verlinken oder für die aktuelle Galerie die im Backend eingestellten Werte überschreiben, dann geht es im zweiten Teil der Anleitung (Link am Ende der Seite) weiter.


8.) Speichern - Fertig!


 

Wartung

Das Plugin legt beim Aufruf im Ordner mit den Bildern jeweils einen Unterordner für die skalierten Hauptbilder und die skalierten Thumbnails an. Dort speichert es die neu erstellten Dateien mit der Namenskovention:

"Bildname" Unterstrich "Breite" Unterstrich "Höhe" Unterstrich "Qualität" Punkt "Dateityp".

Also zum Beispiel: "bild01_80_60_70.jpg"

Das Plugin erstellt zwar die Dateien, löscht aber keine. Hat man verschiedene Einstellungen ausprobiert, kann es sinnvoll sein, die nicht mehr benötigten Thumbnails zu löschen.

1.) Dazu wechseln wir - nachdem die Galerie im Frontend zumindest einmal aufgerufen wurde - wieder in den Menüpunkt "Site" > "Medien"


2.) Im Ordner der Galerie (im Beispiel "verysimple") finden wir jetzt die Unterordner. "vsig_images" und "vsig_thumbs". In diesen sind die neu erstellten Bilder und Thumbnails abgelegt.


3.) Nicht mehr benötigte Bilder/Thumbnails kann man bedenkenlos löschen. Löscht man versehentlich ein aktuelles Bild/Thumbnail - kein Problem, beim nächsten Aufruf der Galerie wird es neu erstellt.



Hinweis:
Das Plugin überprüft Bilder anhand von Name und Größe. Ersetzt man ein Original durch ein anderes selber Größe und mit selbem Namen, dann wird das nicht automatisch erkannt, sondern muss man die skalierte Version des ersetzten Bildes im Ordner "vsig_images" und "vsig_thumbs" manuell löschen. Beim nächsten Aufruf greift das Plugin dann auf das neue Original zu und erstellt ein aktuelles Bild/Thumbnail.


Übersicht über die Möglichkeiten des Aufrufs direkt aus dem Artikel (Paramater Overrides, Links, Captions): Anleitung Plugin Code


Für Fragen und Anregungen steht die Kommentarfunktion zur Verfügung. Bitte geben Sie bei Ihrer Frage die verwendete Joomla! Version an und posten Sie bei Problemen - soweit möglich - einen Link zur betroffenen Seite.

Wer für sein Projekt zusätzliche Funktionen oder Adaptierungen über die Möglichkeiten des hier gebotenen Supports benötigt, der ist eingeladen, mich mit einer Beschreibung der gewünschten Leistungen und dem angedachten Budget per Email zu kontaktieren (Menüpunkt "Kontakt" im Topmenü).

Wer die Erweiterung nutzt den bitte ich, sie auf extensions.joomla.org zu bewerten und einen Erfahrungsbericht zu posten.

Zuletzt aktualisiert am Dienstag, den 08. November 2011 um 22:11 Uhr
 
Kommentare (35)
Could not find folder
35 Mittwoch, den 25. April 2012 um 18:11 Uhr
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
Freitag, den 04. Mai 2012 um 21:43 Uhr
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:
Freitag, den 04. Mai 2012 um 21:16 Uhr
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
Mittwoch, den 25. April 2012 um 19:39 Uhr
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 Samstag, den 21. April 2012 um 15:21 Uhr
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 Dienstag, den 17. April 2012 um 08:42 Uhr
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
Dienstag, den 17. April 2012 um 20:29 Uhr
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 Freitag, den 13. April 2012 um 18:10 Uhr
gina

Danke, habe es hinbekommen.

Grüße
gina

@Nikolaus
Montag, den 16. April 2012 um 20:22 Uhr
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?
Samstag, den 14. April 2012 um 18:39 Uhr
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 Freitag, den 13. April 2012 um 16:39 Uhr
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 Donnerstag, den 12. April 2012 um 09:53 Uhr
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
Donnerstag, den 12. April 2012 um 19:48 Uhr
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 Donnerstag, den 05. April 2012 um 15:25 Uhr
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
Donnerstag, den 05. April 2012 um 19:32 Uhr
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 Montag, den 19. März 2012 um 15:07 Uhr
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 Mittwoch, den 04. Januar 2012 um 17:04 Uhr
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
Mittwoch, den 11. Januar 2012 um 16:26 Uhr
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 Dienstag, den 13. Dezember 2011 um 09:50 Uhr
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
Dienstag, den 13. Dezember 2011 um 20:13 Uhr
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

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

bretteleben.de

Add to circles

Wer ist online
Wir haben 54 Gäste online