WordPress: Wie erstelle ich mit Gutenberg eine ūüĖľÔłŹ Bilder-Galerie?

Um in einen Beitrag oder auch auf einer Seite eine Galerie einzuf√ľgen, greifen viele User zu Plugins. Oft ist dies aber nicht notwendig und es ist auch kein neues Ph√§nomen. Vor fast drei Jahren hat Vladimir, in seinem Beitrag WordPress f√ľr Einsteiger: Bildergalerie-Funktion: leistungsf√§hig und untersch√§tzt bereits dar√ľber geschrieben.

Mittlerweile hat sich viel getan und so ist nicht mehr der TinyMCE der Standard-Editor von WordPress, sondern Gutenberg.

Was sich aber nicht ge√§ndert hat, ist, dass die Galerie-Funktion von WordPress selber immer noch untersch√§tzt wird. In den wenigsten F√§llen muss man auf Plugins zur√ľckgreifen. Aus diesem Grund m√∂chte ich euch die native Galerie-Funktion n√§her vorstellen.

Galerie-Block einf√ľgen

Der Gutenberg-Editor hat hierf√ľr einen eigenen Galerie-Block. Diesen kann man auf unterschiedliche Weise einf√ľgen.

  1. Mit dem Shortcode /g √∂ffnet sich ein Dropdown-Feld, das alle Bl√∂cke mit “g” anzeigt, hier kann der Galerie-Block bequem ausgew√§hlt werden.
  2. In der √úbersicht findet ihr den Galerie-Block in der Kategorie “Allgemein Bl√∂cke” und k√∂nnt ihn dort ausw√§hlen.
Galerie-Block auswählen

Wenn Ihr den Galerie-Block in Euren Beitrag oder Eure Seite eingef√ľgt hat, m√ľsst Ihr zun√§chst die Bilder ausw√§hlen, die Teil der Galerie werden sollen. Diese k√∂nnen nun entweder hochgeladen oder aus der Mediathek ausgew√§hlt werden.

Galerie-Bilder anpassen

Hat man die gew√ľnschten Bilder ausgew√§hlt, werden sie in die Galerie geladen. Und dann beginnen die Anpassungen.

WordPress-Galerie mit 9 Bildern

Jedes einzelne Bild kann beschriftet werden und auch ein Sortierung der Bilder ist m√∂glich. Dazu klickt man das gew√ľnschte Bild einfach an.

Ein Einzelbild in einer WordPress-Galerie bearbeiten

Das ausgew√§hlte Bild kann man nun verschieben, indem man auf einen der Pfeile (rechts/links) klickt. Eine Beschriftung kann man einf√ľgen, indem man auf den Platzhaltertext “Schreibe eine Beschriftung…” klickt. Die Beschriftung kann auch formatiert und/oder verlinkt werden. M√∂chte man ein Bild aus der Galerie entfernen, klickt man auf das X, das sich oben rechts auf dem Bild befindet.

Galerie anpassen

Auch die Galerie selber kann eine Beschriftung erhalten und es ist selbstverst√§ndlich auch m√∂glich noch zus√§tzliche Bilder in die Galerie einzuf√ľgen.

Eine Beschriftung der WordPress-Galerie ist möglich

Daf√ľr klickt man einfach auf den Button “Hochladen” oder “Mediathek”, falls man die gew√ľnschten Bilder schon vorher in die WordPress-Mediathek hoch geladen hat.

Je nach Template kann so eine Galerie, wie auch alle anderen Bl√∂cke, ausgerichtet werden bzw. √ľber die weite oder gesamte Breite der Seite gehen.

Um nun die Galerie als solche nach seinen Vorstellungen zu gestalten, nutzt man die Optionen des Galerie-Blocks, die am rechten Bildschirmrand aufgelistet sind.

Einstellungen f√ľr den WordPress-Block “Galerie”

Bei den Galerie-Einstellungen kann zun√§chst die Anzahl der Spalten ausgew√§hlt werden. Falls die Bilder in ihrer Originalgr√∂√üe bzw. im Seitenverh√§ltnis nicht alle identisch sind, so ist die Option “Bilder zuschneiden” praktisch um eine gleichm√§√üige Optik zu erzielen.

Man kann die einzelnen Bilder zudem verlinken und hat dabei die Möglichkeit zwischen Anhang-Seite und Medien-Datei zu wählen. Auf der Anhang-Seite erscheint auch die Beschreibung, die man einem Bild in der Mediathek gegeben hat.

Hast du genug Zeit und Mu√üe dich ausreichend, um deine WordPress-Installation zu k√ľmmern? Falls nicht oder falls du anderweitig Unterst√ľtzung bei der Wartung deiner Website ben√∂tigst, kontaktiere uns. Wir bieten Wartungsvertr√§ge schon f√ľr monatlich ab 39,- Euro + USt.

So wie bei allen anderen Blöcken auch, könnt Ihr auch dem Galerie-Block eine eigene Klasse zuweisen. Somit kann man mit Hilfe von CSS auch noch diverse Anpassungen vornehmen.

Ausblick

Seit Gutenberg 7.2 kann man auch die Bildgr√∂√üe festlegen, eine M√∂glichkeit, die also in zuk√ľnftigen WordPress-Installationen auch zur Verf√ľgung stehen wird. Und wenn man sich anschaut wie sich der Bild-Block entwickelt hat, bin ich mir sicher, dass auch hier noch mehr kommen wird.

Ich könnte mir zum Beispiel vorstellen, dass irgendwann auch eine Slider-Funktion Teil des Standard-Galerie-Blocks sein wird.

Image(s) licensed by Ingram Image/adpic.

Diesen Beitrag teilen:

Verwandte Beiträge:

5 Kommentare

  1. Ich bin inzwischen sehr vorsichtig mit dem Gallery-Block von Gutenberg. Das Problem das ich habe, ist, da√ü nicht etwa die kleinsten Bilder angezeigt werden, wenn ich die Anzahl der Spalten √ľber den Schieberegler √§ndere. Nein, es werden “kleingestauchte” 600 Pixel Bilder angezeigt.

    1. Hallo Mark,

      genau dieses Problem wird es in Zukunft nicht mehr geben, denn dann kann man ausw√§hlen welche Bildgr√∂√üe als Grundlage f√ľr die angezeigten dienen soll.

      1. Super, wenn das gefixt wird. Mich wunderts nur, da√ü man an sowas nicht denkt, bevor man Gutenberg auf Millionen User losl√§sst. Es ist halt echt frustrierend, wenn man einen Beitrag mit mehreren Galerien hat, die ihn dann auf √ľber 20 MB aufbl√§hen, und man nichts dagegen tun kann.

  2. Kann man denn mit der bordeigenen Galerie auch zwischen den Bildern blättern, wenn man eins der Bilder anklickt, das heißt, wenn das angeklickte Bild geöffnet wird, dass man dann gleich zur Großansicht des nächsten Bildes kommt?

Kommentare sind geschlossen.