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 nun auch eine dritte 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.
Von Bedeutung ist diese Option nur bei einer Einstellung der Breite der Galerie in Pixel.

18.) Lässt man die Thumbnails rechts vom Hauptbild anzeigen, dann wird hier festgelegt, wieviel der Gesamtbreite in Prozent für die Thumbnails verfügbar sein soll. Abhängig von Gesamtbreite, Thumbnailbreite und Thumbnailzwischenraum wird man hier nicht darum herumkommen, die passende Einstellung durch Probieren herauszufinden. Sollen die Thumbnails unter dem Hauptbild angezeigt werden, dann ist dieser Parameter ohne Bedeutung.

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.) Image root legt den Stammordner fest, in dem (direkt oder in Unterordnern) alle Bilder liegen. Standardmässig ist hier der Ordner /images/stories/ 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 von /images/stories/ 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!

27.) 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 der Ordner /images/stories/vsig_buttons/ (wird nicht automatisch erstellt) eingestellt. In diesem sucht das Plugin auch, wenn dieses Feld leer ist.

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

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

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

31.) Das Plugin aktivieren

32.) 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 einem Ordner unter (Joomla-Installation)/images/stories ab.

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/" 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 (per Default "/images/stories/") angegeben, also zum Beispiel für den Ordner "/images/stories/ordner/unterordner":

{*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: Anleitung Plugin Code

Für Fragen und Anregungen steht die Kommentarfunktion zur Verfügung.

Wer die Erweiterung nutzt den bitte ich, sie auf extensions.joomla.org zu bewerten und einen Erfahrungsbericht zu posten. Darüber hinaus freue ich mich über jeden, der die Möglichkeit findet, mich durch einen Link zu www.bretteleben.de auf seiner Webseite zu unterstützen. Das Plugin selbst produziert keine versteckten Links oder sonstige Nettigkeiten welcher Art auch immer.
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ü).