Eine Schritt für Schritt Anleitung für Installation und Verwendung des bretteleben.de CSS Gallery Plugins.

Installation

1.) In die Administrationsoberfläche einloggen

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

3.) Die Paketdatei mit dem bretteleben.de CSS 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 "bretteleben.de CSS Gallery Plugin" suchen und anklicken

8.) Der erste konfigurierbare Parameter ist die Breite der Galerie in Pixel.

9.) Als nächstes kommt die Höhe. "Galerie" bezieht sich bei Breite und Höhe auf das jeweils gross dargestellte Bild. Bei Bildern im Querformat also zum Beispiel: Breite 400 Pixel, Höhe 300 Pixel. Bei Bildern im Portraitformat umgekehrt.

Um keine unnötig großen Abstände zwischen Inhalt und Hauptbild bzw. zwischen Hauptbild und Thumbnails entstehen zu lassen, empfiehlt es sich darauf zu achten, dass das Verhältnis dieser beiden Parameter dem tatsächlichen Verhältnis von Breite zu Höhe entspricht.

Eine Übereinstimmung mit den tatsächlichen Werten von Breite und Höhe ist nicht erforderlich, da die Bilder ohnehin skaliert werden.

10.) Der nächste Parameter ist die Qualität der skalierten Bilder in Prozent. Hier empfehlen sich Werte zwischen 80 und 90, 95 Prozent. Dieser Bereich bietet eine günstige Kombination aus Qualität und Dateigrösse.

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

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

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

14.) Preload: Ich empfehle, die Bilder gleich mit der Seite laden zu lassen. Das verzögert zwar den Seitenaufbau selbst, dafür ist die Verwendung der Galerie bei weitem angenehmer, als wenn erst dabei die Hauptbilder geladen werden.

Augenmaß bei der Wahl der Dateigrößen (siehe Punkt vor) ist hier in jedem Fall angebracht!

15.) "Use fixed Startimage" legt fest, ob das erste Bild fix angezeigt werden soll, ob ob es beim Überfahren der Galerie mit der Maus ausgeblendet werden soll. Zweitere Variante empfiehlt sich, wenn man Bilder mit Transparenz oder verschiedenen Formaten verwendet.

16.) "Thumbnails per row" legt fest, wieviele Thumbnails je Reihe angezeigt werden sollen.

Welcher Wert hier empfehlenswert ist, hängt von der Breite des Hauptbildes ab. Einfach ausprobieren.

17.) Als nächster Parameter ist die Qualität der Thumbnails festzulegen. In den meisten Fällen sind 80% hier bereits mehr als ausreichend.

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

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

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

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

22.) 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 von /images/stories/ (Joomla!1.5) bzw. /images/ (Joomla!1.6/1.7) 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!

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

24.) Das Plugin aktivieren

25.) 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. Wer Joomla!1.6/1.7 verwendet, der wird vermutlich standardmässig den ordner /images/ verwenden. Davon abgesehen bleibt Alles gleich.

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 "cssgallery"

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 aus dem Aufruf selbst {*becssg}{/becssg*} (ohne die Sterne) und enthält den Namen des Ordners, in dem wir gerade die Bilder abgelegt haben. Der eingestellte Pfad zum Ordner (imageroot), also per Default "/images/stories/" für Joomla!1.5 und "/images/" für Joomla!1.6/1.7 wird vom Plugin automatisch ergänzt und ist nicht mit anzugeben.

Ein Aufruf sieht also zum Beispiel so aus

{*becssg}cssgallery{/becssg*} - ohne die Sterne


Um einen Ordner in einem Unterordner zu verwenden, wird sinngemäß der Pfad unterhalb von "/images/stories/" unterhalb des eingestellten Hauptordners (per Default "/images/stories/" für Joomla!1.5 und "/images/" für Joomla!1.6/1.7) angegeben, also zum Beispiel in Joomla!1.5 für den Ordner "/images/stories/ordner/unterordner":

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

An sich war es das und die Galerie ist einsatzfertig.

Will man zusätzlich zu den Bildern auch Text anzeigen 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 je einen Unterordner für die skalierten Bilder und einen für die 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_399_299_90.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 Bilder 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 "cssgallery") finden wir jetzt zwei Unterordner. In Joomla!1.5 sind das die Unterordner "images" und "thumbnails", in Joomla!1.6/1.7 die Unterordner "becssg_images" und "becssg_thumbs". In diesen sind die neu erstellten Dateien abgelegt.

3.) Der Ordner "images/becssg_images" enthält die Bilddateien, die die Galerie als Hauptbilder anzeigt.

Dass man hier oft ungerade Werte für Breite und Höhe vorfindet, owohl man z.B. exakt 400x300 eingestellt hat, hängt damit zusammen, dass die Breite nach dem Austeilen der Thumbnails je Reihe an die sich ergebende Gesamtbreite angepasst und die Höhe danach dazu passend neu berechnet wird.

4.) Sowohl im Ordner "images/becssg_images" als auch im zweiten Ordner "thumbnails/becssg_thumbs" kann man nicht mehr benötigte Bilder bedenkenlos löschen. Löscht man versehentlich ein aktuelles Bild - 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 skalierten Versionen des ersetzten Bildes in den Ordnern "images" und "thumbnails" manuell löschen. Beim nächsten Aufruf greift das Plugin dann auf das neue Original zu.

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