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

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

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

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

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

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

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

19.) Das Plugin aktivieren

20.) 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 "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 Pfad zum Ordner, also "/images/stories/" 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/" angegeben, also zum Beispiel 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. "images" und "thumbnails". In diesen sind die neu erstellten Dateien abgelegt.

3.) Der Ordner "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" als auch im zweiten Ordner "thumbnails" 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.

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.