Bildergalerien mit dem Modul HTML5 upload

Bildergalerien sind ein gefragtes Feature für Websites, und sie lassen sich mit Backdrop gut umsetzen. Wie das genau geht, erschließt sich nicht auf den ersten Blick, denn den einen Galerie-Ansatz gibt es genauso wenig wie das definitive Galerie-Modul. Wie so häufig führen verschiedene Wege zum Ziel.

In diesem Beitrag zeige ich zwei Galerie-Varianten, die etwas Vorbereitung benötigen. Wenn das einmal erledigt ist, können einzelne Bildergalerien im Handumdrehen erstellt werden. Zum Einsatz kommen neben Backdrop-Hausmitteln wie Inhaltstypen und Views die Zusatzmodule HTML5 upload und Colorbox, wahlweise ergänzt durch CSS Injector oder Mosaic Grid.

Mosaic Grid haben wir übrigens bereits in unserem Blog besprochen: Im Tutorial Bildergalerien mit Mosaic Grid beschreibt Xela die Architektur einer Galerie, die aus vielen einzelnen Beiträgen eines Inhaltstyps »Bild« zusammengesetzt wird. Im vorliegenden Artikel entsteht die Galerie dagegen aus vielen Bildern, die in einem Beitrag des Inhaltstyps »Galerie« hochgeladen werden.

Design vorbereiten

In der Regel kommen Bilder auf Websites mit dunklem Hintergrund besser zur Geltung. Deshalb passe ich zur Vorbereitung die Farbgebung meiner frisch installierten Backdrop-Website an. Dazu folge ich im Admin-Menü dem Pfad Design > Basis settings (admin/appearance/settings/basis) und passe in den Theme-Einstellungen einige Farben an:

Module installieren

Als nächstes installiere ich schon einmal alle Zusatzmodule, die ich später verwenden möchte. Im 'Project Browser' unter Verwaltung > Funktionalität > Neue Module installieren (admin/modules/install) suche ich die Module Colorbox, CSS Injector, HTML5 upload und Mosaic Grid und füge sie zur Warteschlange hinzu. Anschließend installiere und aktiviere ich sie bequem über die Benutzeroberfläche.

Damit ist alles vorbereitet, und ich kann mit der eigentlichen Architektur der Bildergalerie beginnen. Ich beschreibe als erstes die Variante, die ich in aller Kürze bereits als Antwort auf einen Forumsbeitrag beschrieben habe, in dem nach einem Äquivalent des Media-Gallery-Moduls für Backdrop gefragt wurde.

Variante 1: Colorbox im Inhaltsbeitrag

Die Variante verwendet das Colorbox-Format in den Anzeige-Einstellungen des Galerie-Beitrags und kommt ohne das Views-Modul aus. Zur textlichen Beschreibung wird das alt-Attribut der Bilder verwendet. Außerdem kommen zwei eigene Bildstile sowie ein paar Zeilen CSS zum Einsatz.

• Auf der Seite Struktur > Inhaltstypen > Inhaltstyp hinzufügen (admin/structure/types/add) lege ich einen neuen Inhaltstyp namens »Galerie« an, füge ein Feld für Bilder hinzu und aktiviere in den Feldeinstellungen die Nutzung des alt-Attributs.
• Anschließend füge ich unter Konfiguration > Medien > Bildstile (admin/config/media/image-styles) zwei Bildstile zu meiner Backdrop-Website hinzu. Während der Bildstil »Galerie: Colorbox« große Bilder auf eine im Web gebräuchliche Breite skaliert, werden die Bilder im Stil »Galerie: Vorschau« in ein kleineres quadratisches Format umgewandelt.

• Mit den Bildstilen gewappnet, wechsle ich zu den Anzeige-Einstellungen des oben angelegten Inhaltstyps (Struktur > Inhaltstypen > Galerie > Anzeige verwalten) und konfiguriere die Anzeige der Bilder mit dem Formatierer des Colorbox-Moduls. Er wird für die Vorschaubilder der Galerie verwendet.

• Würde ich jetzt einen Galerie-Beitrag mit Bildern anlegen, stünden alle Bilder – mit nur einem Bild pro Reihe – untereinander. Für eine rasterartige Darstellung, in der mehrere Bilder pro Reihe angezeigt werden, ergänze ich unter Konfiguration > Entwicklung > CSS Injector (admin/config/development/css-injector) ein paar Zeilen CSS.

• Mit der CSS-Ergänzung ist die Konfiguration abgeschlossen, und ich kann einen Galerie-Beitrag mit Bildern anlegen. Ich gehe zu Inhalt > Inhalt hinzufügen > Galerie (node/add/galerie) und schreibe bei Bedarf – falls ich das Body-Feld nicht aus dem Inhaltstyp entfernt habe – eine Einleitung in den Textbereich. Dann lade ich dank des Moduls HTML5 upload alle gewünschten Bilder in einem Rutsch hoch, trage zu jedem Bild einen kurzen alt-Text ein und speichere den Beitrag. Hier das Ergebnis:

Variante 2: View mit Kontextfilter und Mosaic Grid

Im Unterschied zur ersten Variante erfolgt die Darstellung der Galerie nun – ähnlich wie in Xelas Blogbeitrag zu Bildergalerien – mit Hilfe der Module Views und Mosaic Grid. Während die Konfiguration der Views-Abfrage mit einem gewissen Zusatzaufwand einhergeht, kann ich hier auf das Erstellen des quadratischen Bildstils und eigener CSS-Definitionen verzichten. Außerdem erlaubt die Views-Konfiguration flexiblere Anpassungen als die Anzeige-Einstellungen zu Inhaltstypen. Zuguterletzt unterscheidet sich die Darstellung optisch ein wenig.

Als Ausgangspunkt der zweiten Variante verwende ich Teile der Konfiguration aus Variante 1. Dort hatte ich anfangs das Theme leicht angepasst, die benötigten Module installiert, den Inhaltstyp »Galerie« mit einem Feld für Bilder hinzugefügt und dessen Anzeige-Einstellungen angepasst.

• Ich gehe erneut zu den Anzeige-Einstellungen unter Struktur > Inhaltstypen > Galerie > Anzeige verwalten (admin/structure/types/manage/galerie/display) und blende das Feld für Bilder aus. Es wird gleich durch eine Views-Ansicht ersetzt.
• Dazu besuche ich die Seite Struktur > Ansichten > View hinzufügen (admin/structure/views/add), wähle die Optionen Anzeigen: Inhalt, vom Typ: Galerie sowie Einen Block erstellen und konfiguriere weitere Details in der Views-Benutzeroberfläche.

• Ein Kontextfilter sorgt dafür, dass im Block später nur die Bilder angezeigt werden, die zum jeweiligen Beitrag gehören.

• Die weiteren Einstellungen sind Geschmackssache – mit einer Ausnahme: Beim Inhaltstyp hatte ich ja das Hochladen mehrerer Bilder erlaubt. Die dazugehörige Stelle in der Views-Konfiguration führt in der (sonst fast immer passenden) Default-Einstellung nicht zur gewünschten Galerie-Darstellung.

• Ich speichere die Ansicht, platziere den Views-Block über das Layout-System und betrachte den in Variante 1 hinzugefügten Galerie-Beitrag mit Bildern.

Fazit

In diesem Artikel habe ich gezeigt, wie eine Galerie-Anwendung für Backdrop CMS entsteht, die für das Hochladen vieler Bilder geeignet ist. Einmal gebaut, sind Bildergalerien mit dem Tool sehr schnell erstellt.

Welcher Variante würde ich den Vorzug geben? Schwer zu sagen! Die quadratischen Vorschaubilder aus Variante 1 gefallen mir gut, und die einfache Konfiguration der Colorbox-Galerie in den Einstellungen des Inhaltstyps hat Charme. Dafür bietet die zweite Variante das praktische Mosaic-Raster, und die Views-Konfiguration erlaubt deutlich mehr Flexibilität.

Für eine Nutzung 'out of the box' wäre es interessant, das auf die Anzeige per Views beschränkte Mosaic Grid so zu erweitern, dass es Beitragsbilder – ähnlich wie Colorbox – auch direkt darstellen kann.