Bildschirmfoto des Tutorial-Ergebnisses
Folgende Module kommen für die Bildergalerie zum Einsatz:
Ganz wichtig ist natürlich auch das Modul Views, das aber ohnehin Teil des Backdrop Core ist.
Die Vorteile von Mosaic Grid: es ist mobile-friendly (gut auch für kleine Bildschirme und Touch-Devices). Der Hauptvorteil ist aber, dass diese Art der Darstellung perfekt für gemischte Bildformate ist (hoch, quer). Während Bilder mit unterschiedlichen Seitenverhältnissen in vielen Darstellungen unvorteilhaft ausschauen, punktet Mosaic Grid gerade dann mit einem harmonischen Gesamteindruck.
Eine Bildergalerie aus einzelnen Inhaltsbeiträgen (Nodes)
Zuerst brauchen wir einen neuen Inhaltstypen, nennen wir ihn "Bild". Wir gehen zu "Struktur" / "Inhaltstypen" / "Inhaltstyp hinzufügen" (admin/structure/types/add). Der Inhaltstyp braucht auf alle Fälle ein Feld für Bilder, das sollte in dieser Variante auf ein einzelnes Bild limitiert sein. Auch nützlich: ein Textfeld "Quelle" (weitere Felder nach Bedarf). Falls das "Body"-Feld nicht benötigt wird, einfach löschen.
Der Inhaltstyp für Bilder soll nicht direkt angesehen werden, also stellen wir bei den "Anzeigeeinstellungen" um auf "Hide path display" – und Speichern.
Am besten erstellen wir gleich ein paar solche Beiträge vom Typ "Bild".
Als nächstes brauchen wir eine View (Ansicht). Wir gehen zu "Struktur" / "Ansichten" / "View hinzufügen" und erstellen einen Block aus dem eben erzeugten Bild-Inhaltstypen. Vorschlag zu Einstellungen: 12 Einträge anzeigen, Pager verwenden.
Das Bild zeigen wir im Bildstil "Medium", verlinkt mit der Datei.
Nun das Format umstellen auf "Mosaic Grid", Maximum row height: 320 (px), Caption "Inhalt: Titel".
Das Titel-Feld sollte nicht verlinkt sein, wir fügen auch noch das Feld "Quelle" hinzu, dessen Anzeige wir allerdings ausblenden. Nun die Felder so umsortieren, dass das ausgeblendete "Quelle"-Feld vor dem Titel-Feld steht.
Nächster Schritt: Das "Titel"-Feld bearbeiten, "Ergebnisse überschreiben", "Die Ausgabe des Feldes neu definieren" anhaken und den Text mit den Tokens wie folgt befüllen: [title] (Quelle: [field_source]).
Speichern und die "Vorschau aktualisieren" – das ist doch schon ganz passabel. Nicht vergessen, ein vernünftiges "Block admin label" zu setzen; das brauchen wir im nächsten Schritt.
Den neu erzeugten Block fügen wir jetzt zum "Home"-Layout hinzu. Wir gehen zu "Struktur" / "Layouts" / "Home page" und entfernen zunächst den "Promoted content"- und den Hero-Block. Statt dessen fügen wir den neuen Block mit Bildern hinzu (leicht zu finden über das "Block admin label").
Das Layout speichern und zurück zur Startseite. Ja, macht sich. Allerdings: mit dunklem Hintergrund sähen die Bilder viel besser aus. Und das Default-Theme (Basis) ist eventuell etwas langweilig. Kein Problem, es gibt ja noch andere Themes.
Wir gehen zu "Design" / "Neues Theme installieren" und suchen in dem Feld nach "Snazzy". Das installieren wir dann, stellen es als neues Default-Theme ein und wechseln zu dessen Einstellungen (admin/appearance/settings/snazzy). Das Farbschema "Nightowl" sollte passen. Nach weiter unten scrollen und die Einstellung "Front page header split" abwählen – diese Darstellung brauchen wir nicht.
Einstellungen speichern und zurück zur Startseite.
Der dunkle Hintergrund kommt gut, aber die Bildunterschriften (bei hover) sind jetzt viel zu schrill. Kein Problem, das Modul "Mosaic Grid" hat allerlei Feineinstellungen. Wir gehen zu "Konfiguration" / "Medien" / "Mosaic Grid" und klappen den Bereich "Design" auf. Sobald "Customize caption style" angehakt ist, werden die entsprechenden Einstellungen sichtbar. Ein dunkler Hintergrund mit leichter Transparenz, dazu helle Schrift für die Caption – prima.
Zurück zur Startseite: doch, das schaut definitiv besser aus.
Einen Makel hat die Galerie noch: Wenn ich auf eins der Bilder klicke, wird nur das Bild angezeigt. Ein "Overlay" wäre auf alle Fälle besser. Hier kommt das "Colorbox"-Modul zum Einsatz.
Wir bearbeiten erneut die View (Ansicht) und stellen das Anzeigeformat des Bildes auf Colorbox um (öffnen mit Klick auf "Inhalt: Bild" im Abschnitt "Felder"). Achtung, die Caption des Colorbox-Moduls brauchen wir nicht, die haben wir ja bereits mit Mosaic Grid erstellt. Die restlichen Einstellungen nach Bedarf.
Die View speichern und wieder zurück zur Startseite.
Wenn ich jetzt auf eines der Bilder klicke, wird ein seitenfüllendes Overlay angezeigt, in dem ich weiter durch die Galerie navigieren kann. Fertig!
Die Möglichkeiten zum weiteren Feinschliff sind vielfältig. Das beschriebene Beispiel ist wirklich nur die schnelle Rohform.
Mögliche Varianten
In diesem Tutorial beschrieben ist eine Galerie aus mehreren Beiträgen (Nodes). Eine mögliche Variante wäre eine Galerie, die aus vielen Bildern eines Beitrags entsteht. In diesem Szenario sollte der Inhaltstyp für die Bilder direkt zugänglich sein, also nicht mit der Option "Hide path display" versehen werden. Zudem müsste die eingangs genannte Limitierung des Bild-Feldes aufgehoben werden; es sollte vielmehr eine unbegrenzte Anzahl von Bildern erlaubt sein. Außerdem wird das Bild-Feld nicht direkt angezeigt; es wird in den Anzeige-Einstellungen des Inhaltstyps ausgeblendet. Stattdessen wird ein Views-Block aus den Feldern erstellt und ein Kontextfilter auf die Node-ID (nid) hinzugefügt. Der Views-Block wird dann einer beliebigen Region des jeweiligen (Default-)Layouts hinzugefügt.
Eine weitere Variante kombiniert beide Ansätze: Der Inhaltstyp mit dem Bild-Feld (unbegrenzt viele Bilder) wird zur "Galerie", die Darstellung der Bilder im Feld wird wieder mit Views erledigt. Zusätzlich dazu gibt es eine "Übersichtsgalerie" – eine View mit jeweils dem ersten Bild der "Galerie"-Inhalte, verlinkt auf die Inhalte.