Letzte Woche wurde ich von Freunden gefragt, wie sich eine Bildergalerie in Drupal bauen lässt. Also, natürlich nicht irgendeine Galerie, sondern eine mit besonderen Eigenschaften:
- Einzelne Bilder lassen sich in einem modalen Fenster, das über der Webseite angezeigt wird, öffnen.
- Unter jedem Bild steht ein Link, der es erlaubt, dieses Bild in sozialen Netzwerken zu teilen.
1. Bilder in modalen Fenstern mit Colorbox
Es gibt eine Menge frei verfügbarer Lightbox-Anwendungen im Netz, und für Drupal gibt es mehrere Module, die solche Anwendungen in das System integrieren. Bisher arbeite ich am liebsten mit Colorbox.
Die Konfiguration von Colorbox ist einfach, und das Modul ist gut in verschiedene Drupal-Bereiche integriert. Soweit im Image-Feld eines Beitrags mehrere Bilder vorhanden sind, entsteht eine Galerie durch bloße Auswahl des Colorbox-Formats in den Anzeige-Einstellungen für den Inhaltstypen des Beitrags. Erfreulicherweise steht das Colorbox-Format auch für Felder im Views-Modul zur Verfügung.
Über die Grundfunktionen hinaus bietet das Modul für Drupal 7 zudem praktische Besonderheiten wie das Öffnen benutzerdefinierter Inhalte in modalen Fenstern. Durch die Nutzung bestimmter Link-Klassen und URL-Parameter lassen sich Webseiten oder Formulare als Overlay anzeigen, ohne eigenes JavaScript zu schreiben. Hier mal zwei Beispiele:
colorbox-load: unsere Büro-Website in 360 px Breitecolorbox-inline: das Suchfeld aus dem Fußbereich dieser Seite
In Drupal 8 wird Colorbox laut Projektseite übrigens auf solche Zusatzfunktionen verzichten:
Colorbox for Drupal 8 is a image field formatter and nothing more, or less. The extra features like colorbox_load, colorbox_inline and views trigger field have been removed to keep the module clean and neat.
Schade! Vielleicht nimmt ja jemand die Anregung auf, ein Colorbox extras-Modul für D8 zu entwickeln. Wie im folgenden Abschnitt beschrieben, handelt es sich nämlich auch beim zuletzt genannten "trigger field" um eine ziemlich praktische Funktion.
2. Bild-bezogene Links mit Views und Colorbox trigger
Für die Links zum Teilen einzelner Bilder in sozialen Netzwerken wie Twitter oder Facebook ist es sinnvoll, nicht die Bild-Adressen selbst, sondern die Adressen einzelner Bild-Beiträge zu verwenden. Somit kommt die oben genannte Galerie, die sich aus mehreren Bildern eines Beitrags zusammensetzt, für unser Vorhaben nicht in Frage. Vielmehr empfiehlt es sich, pro Bild einen eigenen Beitrag anzulegen und eine Views-Seite zu erstellen, die die Bild-Beiträge anzeigt.
Ginge es nur um die Anzeige der Bilder, wäre eine Galerie-Seite im Nu gebaut: Views-Display anlegen, Image-Feld hinzufügen, Colorbox als Format auswählen, fertig. Ein Social-Media-Link lässt sich auf diese Weise allerdings nicht anzeigen, und an dieser Stelle kommt das bereits genannte "trigger field" ins Spiel:
- Anstatt in Views nur das Image-Feld zu nutzen, fügst du zunächst alle gewünschten Inhaltsfelder zum Display hinzu, z.B. den Beitragstitel, zwei Varianten des Bildes und die Beitrags-ID, aus der später der Social-Media-Link gebildet wird.
- Über das Feld Colorbox trigger definierst du eins der zuvor angelegten Felder, z.B. eine Thumbnail-Variante des Bildes, als "Trigger field", dh. als Auslöse-Mechnismus für das modale Fenster.
- Welche Inhalte dann im modalen Fenster landen, regelst du in den weiteren Feld-Einstellungen über "Replacement patterns", also mit der Hilfe von Platzhaltern der zuvor hinzugefügten Felder. Neben Titel und Beitrags-ID bietet es sich an, eine größere Variante des Bildes einzufügen.
Das war es im Groben schon. Die weitere Konfiguration des Views hängt von den eigenen Bedürfnissen ab, doch auf zwei Details möchte ich noch eingehen.
Maße des modalen Fensters
Bei der 'regulären' Colorbox-Nutzung über das Format des Image-Feldes wird das modale Fenster dynamisch in der benötigten Größe angezeigt. In den Einstellungen des Colorbox trigger-Feldes werden dagegen explizite Angaben zu Breite und Höhe des modalen Fensters erwartet, da die Ausmaße der anzuzeigenden Inhaltselemente sich nicht automatisch berechnen lassen. Das ist insbesondere bei der Anzeige von Bildern unterschiedlichen Größe lästig, da sich bei wechselnden Bildergrößen kaum sinnvolle und ästhetisch ansprechende Maße für das modale Fenster finden lassen. Möglicherweise lässt sich das Problem jedoch per CSS lösen. Einen anderen Lösungsvorschlag entnahm ich dem Kommentar zu einem Issue-Eintrag auf drupal.org.
Bereitstellung der Social-Media-Links
Es gibt eine Vielzahl von Drupal-Modulen, die sich mit der Integration sozialer Netzwerke in die eigene Website befassen, darunter einige zur Bereitstellung von Social-Media-Links für verschiedene Netzwerke. Im Rahmen des oben besprochenen Ansatzes ist es sinnvoll, ein Modul mit Views-Integration wie z.B. Service Links zu nutzen. Eine einfache Alternative besteht darin, die Links selbst zu generieren. Eine kleine Sammlung von URL-Mustern für verschiedene Plattformen steht auf Github Gist zur Verfügung; für Twitter hätte das Muster z.B. folgende Form:
http://twitter.com/share?text=MEIN+TEXT&url=MEINE-URL
Nachtrag
Vermutlich lässt sich auch mit Hilfe spezieller Module wie Colorbox Node und/oder Node Gallery eine Social-Media-Link-Bildergalerie in Drupal bauen. Der schlanke Ansatz, an Modulen nur Views und Colorbox zu verwenden, gefiel mir jedoch besser.
@todo: Colorbox-Anzeige auf kleinen Mobilgeräten prüfen
Und so sieht's aus
Demo des oben beschriebenen Views-Displays: www.olafski.de/fotogalerie