ZIP-Bildergalerie für concrete5 V5.7

Vorwort

Das Erstellen einer Bildergalerie für einen Webauftritt mit einem Web Content Management System (CMS) gibt Dir die Gelegenheit, im CMS ganz kräftig herum zu klicken:

  • jedes Bild herauf laden
  • jedes Bild mit der Galerie verknüpfen
  • für jedes Bild die Bildinformationen hinterlegen
  • bei Bedarf die Bilder sortieren

Warum ist das so? Das Leben ist zu kurz, diese langweiligen Schritte für jedes Bild zu wiederholen!

Das Tool meiner Wahl für die Bildbearbeitung ist Adobe Lightroom. Bei der Bearbeitung geben ich alle notwendigen Daten wie Titel, Schlagworte und Beschriftungen ein. Möglicherweise gibt es auch irgendein CMS, das bereits diese Informationen aus den IPTC Tags der Bilder auslesen kann. Aber sicher nicht jedes CMS.

Lösung orientiert am Bildbearbeitungs-Workflow

Im Angesicht der oben aufgeführten Liste der Arbeitsschritte habe ich mich entschlossen, eine am Bildbearbeitungs-Workflow orientierte Lösung zu entwickeln:

  • Alle Bilder werden in Lightroom bearbeitet mit Eingabe der Metainformationen
  • Exportieren der Bilder aus Lightroom als jpeg-Dateien (mit den Metainformationen)
  • Die exportierten Dateien werden in der gewünschten Reihenfolge gezippt
  • Heraufladen der ZIP-Datei mit den Bildern
  • Erstellen einer concrete5 Webseite mit einem Link auf die herauf geladene ZIP-Datei

Die letzten drei Schritte ersetzen die ursprüngliche Aufgabenliste. Drei Schritte statt N mal wiederholte vier Schritte.

Im CMS concrete5 ermöglicht das ZIP Image Gallery Add-On das Erstellen einer Bildergalerie aus einem ZIP-Archiv (wie oben beschrieben). Jede Webseite kann dabei eine oder mehrere Bildergalerien beinhalten.

Der oben skizzierte Bildbearbeitungs-Workflow besteht aus vier Schritten. Die ersten drei Schritte sind nicht Teil dieser Dokumentation. Du solltest mit den verwendeten Tools bereits vertraut sein.

Bilder bearbeiten

Verwende Deine Dir vertraute Bildbearbeitungssoftware um alle notwendige Bildinformationen wie Copyright, Titel und/oder Bildunterschriften einzugeben. Als nächstes exportiere alle Bilder mit allen Metainformationen.

Bilder zippen

Das Tool Deiner Wahl zum erstellen von ZIP-Archiven sollte Dir ebenfalls vertraut sein. Stelle alle Bilder der Bildergalerie in ein ZIP-Archiv in der Reihenfolge, in der die Bilder auf der Webseite erscheinen sollen.

ZIP-Datei heraufladen

Verwende die concrete5 Dateiverwaltung (Dashboard → Dateien → Dateiverwaltung) um die soeben erstelle ZIP-Datei herauf zu laden. Bitte den Hinweis im Abschnitt Installation bezüglich der Freischaltung für ZIP-Dateien beachten.

Webseite erstellen

Wenn Du das ZIP-Archiv mit den Bildern der Bildergalerie herauf geladen hast, benötigt es nur noch ein paar Schritte, bis die Bildergalerie am Laufen ist.

Installation

Plug-in zu concrete5 hinzufügen

  • Add-on “ZIP Image Gallery” vom concrete5 marketplace herunterladen. Wie üblich ist das ein ZIP-Archiv.
  • Inhalt der ZIP-Datei in das Verzeichnis /packages der Website auspacken.
  • Einloggen auf der Website als Administrator.
  • Gehe nach Dashboard → concrete5 erweitern →  Funktionen hinzufügen.
  • Suche das Paket “ZIP Image Gallery” in der Liste der ausstehenden Installationen
  • Klicke auf “Installieren“.

install-V5.7-01-d.png

Nun sind alle Installationsschritte erledigt.

Unsichtbare Einstellungen der Installation

Zwei Einstellungen werden durch die Installation der ZIP-Bildergalerie durchgeführt:

  • ZIP-Archive werden im Datei-Manager freigeben
  • Das ZIP Gallery Plugin wird im WYSIWYG-Texteditor freigeben
ZIP-Archive im Datei-Manager freigeben

Um diese Einstellung nachzuvollziehen gehe nach Dashboard → System & Einstellungen → Dateien → Erlaubte Dateitypen. Den Dateityp zip wurde hinzugefügt.

install-V5.7-02-d.png

Das ZIP Gallery Plugin in WYSIWYG-Texteditor freigeben

Um diese Einstellung nachzuvollziehen gehe nach Dashboard → System & Einstellungen → Grundeinstellungen → WYSIWYG-Texteditor. Das Häkchen vor ZIP Gallery im Bereich Texteditor Erweiterungen wurde gesetzt.

install-V5.7-03-d.png

Webseite erstellen mit dem ZIP Image Gallery plugin

ZIP-Datei mit Bildergalerie herauf laden

Gehe nach Dashboard → Dateien → Datei-Manager. Klicke auf Dateien hochladen und wähle die ZIP-Datei mit der Bildergalerie aus, die Du im Bearbeitungsschritt Bilder zippen erstellt hast (siehe oben).

Es ist sinnvoll, alle ZIP-Dateien mit Bildergalerien zu einem Album „Galerien“ hinzuzufügen, damit beim Hinzufügen in der Webseite nach diesem Kriterium gefiltert werden kann (zu Alben hinzufügen / entfernen, siehe Bild) ― insbesondere wenn viele ZIP-Bildergalerien verwendet werden sollen.

setup-V5.7-01-d.png

Webseite erstellen

Inhalts-Block hinzufügen

Ziehe einen Block vom Typ Inhalt dahin, wo Du die ZIP-Bildergalerie hinzufügen möchtest.

setup-V5.7-02-d.png

Gib etwas Text ein und markiere den Text, wo die Bildergalerie verlinkt werden soll. Klicke auf das Kamera-Symbol in der Toolbar des WYSIWYG-Texteditors:

setup-V5.7-03-d.png

Eine Dialogbox ZIP-Galerie einfügen öffnet. Klicke auf das Datei-Symbol:

setup-V5.7-04-d.png

Der Datei-Manager wird geöffnet und Du kannst die vorher herauf geladene ZIP-Datei auswählen. Die URL der ZIP-Datei wird angezeigt. Klicke auf ZIP-Galerie einfügen.

setup-V5.7-05-d.png

Falls Du eine andere Datei als eine ZIP-Datei ausgewählt hast, wird eine Fehlermeldung angezeigt.:

setup-V5.7-06-d.png

Wenn Du auf ZIP-Galerie einfügen klickst ohne Auswahl eine ZIP-Archives wird die Fehlermeldung Link darf nicht leer sein angezeigt. Wenn Du den Titel des Galerie-Links leer lässt und Du auf ZIP-Galerie einfügen klickst wird die Fehlermeldung Der Titel des Links darf nicht leer sein angezeigt.

Um einen Download-Link einzufügen, markiere den Text, wo der Link sein soll. Dann klicke in der Toolbar des WYSIWYG-Texteditors auf Link und wähle Link einfügen aus der Liste:

setup-V5.7-07-d.png

Die Dialogbox Link einfügen funktioniert ähnlich wie die Dialogbox ZIP-Gallerie einfügen. Wähle die ZIP-Datei durch Anklicken des Datei-Symbols. Anschließend klicke auf Einfügen:

setup-V5.7-08-d.png

Alle Links sind nun gesetzt. Klicke auf Speichern in der Toolbar des WYSIWYG-Texteditors um das Ergebnis zu sichern:

setup-V5.7-09-d.png

Schließlich klicke auf die Schaltfläche Diese Seite bearbeiten in der Toolbar von concrete5. Anschließen klicke auf Änderungen veröffentlichen:

setup-V5.7-10-d.png

Testen der ZIP Image Gallery

Nun ist die Website fertig zum Testen. Klicke auf den

Now the web page is ready for testing. Click at the "Download Link", den Du angelegt hast.  EIn Browser-spezifischer Dialog zum Speichern des ZIP-Archives wird angezeigt:

setup-V5.7-13-d.png

Wenn Du den "Hier"-Link anklickst wird die ZIP-Bildergalerie geöffnet:

setup-V5.7-12-d.png

Die Bedienung der ZIP-Bildergalerie  ist einfach:

  • Ein Bildwechsel wird erreicht indem
    • des linke oder das rechte Pfeil-Symbol angeklickt,
    • mit dem Mausrad gescrollt, 
    • mit gedrückter Maustaste von links nach rechts oder umgekehrt "gewischt" oder
    • eines der Thumbnail-Bilder angeklickt wird.
       
  • Die ZIP-Bildergalerie wird beendet durch
    • Anklicken des Kreuz-Symbols oben rechts oder
    • durch Antippen der ESC-Taste.
       
  • In das Bild hinein (und wieder hinaus) zoomen wird erreicht durch Doppelglocken an der Stelle, die gezoomt werden soll.
     
  • Um die Thumbnail-Bilder zu verbergen bzw. wieder anzuzeigen wird mit gedrückter Maustaste von der Bildmitte nach unten bzw. umgekehrt "gewischt".

Bedienung mit mobilen Geräten

Stellt die ZIP-Bildergalerie fest, dass die Bildergalerie mit einem mobilen Gerät ausgeführt wird, startet die ZIP-Bildergalerie im Fullscreen-Modus. Außerdem wird unten rechts ein Download-Symbol angezeigt:

setup-V5.7-14-d.png

Die weitere Bedienung erfolgt analog der Desktop-Bedienung:

  • Ein Bildwechsel wird herbeigeführt durch
    • Antippen des linken oder rechten Pfeil-Symbols,
    • Wischen von links nach rechts bzw. rechts nach links oder
    • Antippen eines der Thumbnail-Bilder.
       
  • Die ZIP-Bildergalerie wird beendet durch Anklicken des Kreuz-Symbols oben rechts. Dabei wird auch der Fullscreen-Modus beendet.
     
  • Das Zoomen in das Bild wird durch doppeltes Antippen der Stelle erreicht, die gezoomt werden soll.
     
  • Um die Thumbnail-Bilder zu verbergen bzw. wieder anzuzeigen wird von der Bildmitte nach unten bzw. umgekehrt gewischt.

setup-V5.7-15-d.png

Und hier der Live-Test:

  • Hier klicken, um die ZIP-Bildergalerie anzuzeigen
  • Dieses ist ein Download Link für die ZIP-Bildergalerie