Gutenberg Masonry Gallery: viel Platz für gute Fotos

Gutenberg Masonry Gallery: Responsive Lightbox & Gallery alignwide, die Fotos von Zootieren zeigt
die üblichen Tierfotos aus dem Hause bk als Gutenberg Masonry Gallery in weiter Breite

Dass so ein WordPress Kurs auch in Corona-Zeiten zu sehr ansprechenden Ergebnissen führen kann, zeigt die Zusammenarbeit mit einem Kunden. Dem Kölner Fotografen gefiel seine Website nicht mehr, etwas Neues sollte her. Ich riet ihm zu dem Theme Hamilton und dem Plugin Responsive Lightbox & Gallery. Das Zusammenspiel der beiden Komponenten sorgt nun dafür, dass die Fotos meines Kunden so richtig schön zur Geltung kommen. Das Plugin kann aber natürlich auch mit anderen Themes arbeiten. In jedem Fall stellt es die Alternative zur normalen Gutenberg Galerie dar und bietet die Möglichkeit einer Gutenberg Masonry Gallery.

Ein sehr schönes Theme und ein Plugin-Wegbegleiter

Hamilton ist in meinen Augen ein Traum von einem Theme für Fotografen. Denn es stellt reichlich Platz für die Fotos zur Verfügung und bleibt dabei selbst sehr dezent. Ganz Scandi Design halt. Was nicht verwundert, stammt Hamilton doch aus dem Hause des schwedischen Designers Anders Norén. Der interessanteste Aspekt an Hamilton ist, dass es alle Beitragsbilder auf den Archivseiten wie eine Masonry Gallery darstellt.

Masonry, darauf bin ich in einem früheren Beitrag schon einmal eingegangen, bedeutet Mauerwerk.

Was bedeutet Masonry Layout?

Masonry Layouts basieren wie Grid Layouts auch nur auf Gittern, die aus Reihen und Spalten bestehen. Im Gegensatz zum normalen Grid Layout wird hier aber die Höhe einer Reihe nicht durch dessen höchstes Element bestimmt. Vielmehr sorgt das Masonry Layout für die optimale Nutzung des zur Verfügung stehenden Raums. Anders gesagt: Es entstehen so keine überflüssigen leeren Flächen.

Auf der Hamilton-Blogseite erscheinen nun also die Beitragsbilder wie eine solche Masonry Gallery. Dies entweder in zwei oder drei Spalten. Und mit Beitragstitel oder mit der Option, dass der Titel nur erscheint, wenn die Mouse über das Bild fährt (Hovereffekt). Das war es auch schon fast in Sachen Theme-Optionen. Viel mehr braucht dieses schlanke und schöne Theme aber auch nicht.

Was Hamilton allerdings nicht leistet, ist die Option, der normalen Gutenberg Galerie die Option des Masonry Layouts hinzuzufügen. Auch bietet das Theme keine Lightbox.

Was bedeutet Lightbox?

Lightbox bedeutet, dass ein in eine Seite eingebundenes Bild per Klick in seiner vollen Größe schwebend auf abgedunkeltem Hintergrund angezeigt wird. Durch den abgedunkelten Hintergrund wirkt das Bild so nun farbenfroher und leuchtender.

Das Ganze funktioniert aber nur, wenn das Bild als anklickbar eingestellt ist und der Link zur Mediendatei definiert ist. Diese Einstellungen lassen sich im jeweiligen Bild-Block wählen.

Da nur wenige Themes, mit denen ich es in den letzten Jahren zu tun hatte, diese Lightbox-Funktion mitbringen, habe ich schon früh das Plugin Responsive Lightbox schätzen gelernt. Damals konnte es allerdings tatsächlich nur Lightbox.

Mittlerweile hat sich der Wegbegleiter gemausert. Er kann nun eine ganze Menge mehr. Eine dieser zusätzlichen Funktionen ist das Organisieren der Medien im Rahmen von Ordnern. Eine andere bezieht sich auf die Galerien. Dafür bringt das Plugin nun einen eigenen Eintrag im Admin-Menü (Galerie) und seinen eigenen Galerie-Block mit.

Stand Plugin Version 2.2.3.1: Seit dieser Version lassen sich mit dem Galerie-Block keine Galerien mehr selektieren und in den Beitrag/die Seite einbinden. Also zurück zur Vorversion – und Warten auf ein baldiges Update, das den Fehler behebt.

Update 17.08.2020

Mittlerweile ist einige Zeit vergangen, ein Update für das Plugin hat es aber nicht gegeben. Hingegen wurde letzte Woche WordPress 5.5 veröffentlicht. Und das versteht sich nicht mit der alten Plugin-Version. Also bleibt nichts anderes übrig, als auf Responsive Lightbox & Gallery 2.2.3.1 zu aktualisieren. Auch wenn das mit dem Selektieren auch unter den neuen Rahmenbedingungen nicht funktioniert.

Dennoch lassen sich die Responsive Lightbox Galerien in Beiträge oder Seiten einbinden. Wie das geht? Siehe weiter unten.

Das konkrete Vorgehen für die Gutenberg Masonry Gallery

Ziel unseres Vorgehens für die neue Fotografen-Website war es, für jede Kategorie die passenden Beiträge zu erstellen. Die zeigen als ersten Content eine formatfüllende Masonry Gallery mit den passenden Fotos.

Ein Beispiel

Sagen wir, es gäbe es eine Kategorie Gotische Kathedralen. Die Kategorieseite zeigt also alle Beitragsbilder der entsprechenden Beiträge zu Kölner Dom, Notre Dame, Mailänder Dom etc. Diese Seite sieht dann dank des Themes Hamilton an sich schon aus wie eine Masonry Gallery.

Klickt man nun auf das Bild des Kölner Doms, landet man auf dem Beitrag zum Kölner Dom und sieht hier unterhalb des Beitragstitels die Gutenberg Masonry Gallery des Kölner Doms. Sprich: Alle Fotos, die diverse Ansichten und Perspektiven des Kölner Doms zeigen. Klick auf das einzelne Bild öffnet die Lightbox.

Und weil das Ganze ein Beitrag zum Kölner Dom ist, lässt sich hier nun auch passender Text unterbringen.

Um dies nun zu ermöglichen, erstellt man diese Kölner Dom Galerie nicht mittels des Gutenblocks Galerie, sondern mit den Möglichkeiten des Plugins. Dies sorgt für einen eigenen Menüpunkt Galerie im Admin-Menü, also der linken WordPress Seitenspalte.

Galerien kann das Plugin auf sehr unterschiedliche Weisen erstellen. Für das konkrete Vorgehen haben wir als Bildquelle die Mediathek und dann einzelne Bilder ausgewählt. Für diese haben wir dann konfiguriert, dass sie im Layout Basic Masonry mit großen Bildern (large) in 3 Spalten erscheinen sollen. Dies auch auf dem Desktop (große Geräte). Auf kleineren Geräten (kleine Tablets und Smartphones) erscheinen sie in 2 Spalten. Als Sortierung bietet sich hier statt der Menüsortierung übrigens die Option zufällig an.

Mit passendem Titel versehen, lässt sich diese Galerie nun leicht im Beitrag über das Gutenblock des Plugins auswählen. Dieser Galerie-Block findet sich im Panel Responsive Lightbox.

Dem Gutenberg Masonry Gallery Block alignwide und alignfull beibringen

Nun hat dieser Gutenberg Block keinen Button in seiner Werkzeugleiste für die weite Breite (alignwide) oder die volle Breite (alignfull). Das ist ein bisschen schade. Das heißt aber nicht, dass man sie nicht doch breiter ausgeben kann, als der Contentbereich des Themes ist.

a) Vorgehen, das auch für die Standardthemes Twenty Nineteen und Twenty Twenty funktioniert

Im Panel Erweitert, das so ziemlich jeder Block bietet, lässt sich eine CSS-Klasse hinterlegen. Und sofern wir es mit einem Theme zu tun haben, das seinen Gutenberg kennt, hat dieses bereits Definitionen für die Klassen alignwide und alignfull.

Hamilton und natürlich auch Twenty Nineteen und Twenty Twenty sind entsprechend für Gutenberg optimiert. Sie können also mit diesen beiden Klassen umgehen. Das heißt, es reicht, im Panel Erweitert des Gutenberg Masonry Gallery Blocks eine der beiden Klassen zu hinterlegen. Entsprechend erscheint die dann auf der Beitragsseite in weiter oder formatfüllender Breite.

Alternativ kann man diesen Masonry Galerie Block auch gruppieren. Dies lässt sich über Klick auf das erste Icon in der Werkzeugleiste (Blog-Typ oder Stil ändern) erledigen. Oder man wählt das letzte Icon (Mehr Optionen) und dort dann Gruppieren.

Der Gruppe steht dann in der Werkzeugleiste die Auswahl zwischen den beiden Breiten zur Verfügung. Auf die Möglichkeiten des Gruppieren bin ich übrigens in einem früheren Beitrag schon einmal eingegangen. Dieses Vorgehen empfiehlt sich besonders dann, wenn der ganze Bereich hinter der Galerie eine eigene Hintergrundfarbe gekommen soll. Wie in meinem Beitragsbild: Hier ist der Hintergrund der Gruppe grau.

Die Möglichkeit der Gruppierung ist aber auch von zentraler Bedeutung für das Vorgehen, das ich meinem Kunden empfohlen habe.

b) Vorgehen, das für die Themes Hamilton und Chaplin funktioniert

Bei den beiden Norén Themes Hamilton und Chaplin funktioniert es nämlich auch ohne Hinterlegen der Klassen alignwide oder alignfull im Panel Erweitert des Galerie-Blocks. Hier reicht es, die Galerie zu gruppieren und der Gruppe dann die gewünschte Breite zuzuordnen.

Dieses Vorgehen habe ich dann auch meinem Kunden empfohlen. Weil es für ihn einfacher war, die Breite per Klicks auf Buttons in den Werkzeugleisten festzulegen, statt sich immer das passende Panel in der rechten Seitenspalte zu suchen.

Update 17.08.2020

c) Einbinden der Galerie mittels Shortcode Block

Responsive Gallery mittels Shortcode einbinden und Klasse zuordnen

Auch wenn sich die Galerien mit dem Responsive Lightbox Galerie Block aktuell nicht selektieren lassen, kann man sie dennoch in Beiträge oder Seiten einbinden. Dies funktioniert mit dem Shortcode Block. Das Plugin produziert nämlich für jede Galerie einen eben solchen. Zu finden ist dieser jeweilige Shortcode in der Übersicht aller erstellten, aber natürlich auch in der Bearbeitung der einzelnen Galerien.

Leider verfügt der Shortcode Block weder über die Option der Gruppierung, noch über das Panel Erweitert. Dennoch kann man diesem Block die Möglichkeit zuordnen, alignwide oder alignfull zu sein. Hier kommt etwas HTML ins Spiel. Und das geht so:

Im Shortcode Block umfasst man den eigentlichen Shortcode mit einem DIV, dem man die Klasse alignwide oder alignfull gibt. Im ganzen Satz sieht das dann so aus:

<div class="alignfull">[rl_gallery id="1234"]</div>

Das Ergebnis entspricht dem oben genannten Vorgehen. Es führen halt viele Wege nach Rom.

Warum erwähne ich hier das Theme Chaplin, aber nicht Twenty Seventeen oder Sixteen?

Chaplin hat für Twenty Twenty Pate gestanden. Dabei erscheint es mir weit ansprechender als das aktuelle Standardtheme. Bei bei den alten Standardthemes steht der weiten oder vollen Breite die Sidebar im Weg. Deshalb habe ich keines der genannten Vorgehen für diese beiden alten Themes überprüft.


Beitragsbilder: Britta Kretschmer

2 Gedanken zu „Gutenberg Masonry Gallery: viel Platz für gute Fotos

  1. Toller und sehr hilfreicher Artikel! Sie schreiben: “Stand Plugin Version 2.2.3.1: Seit dieser Version lassen sich mit dem Galerie-Block keine Galerien mehr selektieren und in den Beitrag/die Seite einbinden. Also zurück zur Vorversion – und Warten auf ein baldiges Update, das den Fehler behebt.” Genau das gleiche Problem habe ich auch. Aber ich kann keine Vorversion zum Download finden. Können Sie mie die ZIP einer funktionierenden Vorversion zukommen lassen?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Nach oben scrollen