Neben Text-Inhalten bestehen die meisten Beiträge und Seiten auch aus verschiedenen eingebunden Medien. Mit dem Gutenberg-Editor werden auch diese mit Hilfe von Blocks eingefügt.

Bild

Wenn man ein Bild einfügen möchten, muss man zunächst entscheiden, wo das Bild „liegt“ – muss man es also zunächst vom Rechner hochladen oder ist es schon in der Mediathek gespeichert?

Ein Bild hochladen oder aus der Mediathek auswählen

Ist das Bild ausgewählt und eingefügt, kann man einige Angaben dazu machen, die die Darstellung beeinflussen.

Eingefügtes Bild im Gutenberg-Editor

Zum Einen kann man die Größe des Bildes beeinflussen, indem man das Bild durch Klicken und Ziehen verkleinert oder vergrößert.

Unterhalb des Bildes kann eine Beschriftung eingefügt werden, die dann im Frontend erscheint. Auch hier kann man den Text formatieren und verlinken.

In der Werkzeugleiste zum Bild findet man noch die folgenden Optionen:

  • Umwandeln des Bildes in eine Galerie
  • Das Bild wird linksbündig eingefügt, Text umfließt es rechts.
  • Das Bild wird rechtsbündig dargestellt, der Text umfließt es links.
  • Bild bearbeiten
  • Bild verlinken

Bei den erweiterten Einstellungen für ein Bild hat man zudem die Möglichkeit einen Alternativtext anzugeben und auch eine der Standardgrößen für das Bild auszuwählen.

Was in meinen Augen fehlt ist die unkomplizierte Verlinkung des Bildes auf die Mediendatei oder die Anhangseite 🙁

Galerie

Der Block Galerie gleicht im Prinzip dem Block „Bild“, mit dem Unterschied, dass hier mehrere Bilder zu einer Galerie zusammengefasst und präsentiert werden können.

Auch hier müssen die Bilder entweder hochgeladen oder aus der Mediathek ausgewählt werden. Man kann alle Bilder mit einem Alternativtext versehen und einer Beschriftung.

Innerhalb der Mediathek kann man zudem die Reihenfolge der Bilder in der Galerie durch Klicken & Ziehen zu festlegen.

Galerie-Block im Gutenberg-Editor

Bei den Erweiterten Einstellungen zur Galerie kann man entscheiden in wie vielen Spalten die Bilder angezeigt werden sollen und auch, ob die Bilder alle in der gleichen Größe dargestellt, also eventuell zugeschnitten werden sollen.

Außerdem kann man entscheiden, ob und wohin die einzelnen Vorschau- bzw. Miniaturbilder verknüpft bzw. verlinkt sein sollen (Link zu Mediendatei oder Anhangseite).

Audio-Dateien

Audiodateien können zum einen von einer URL wiedergegeben werden oder aber hochgeladen werden bzw. aus der Mediathek eingefügt werden.

Dabei kann man entscheiden, ob das Element linksbündig, zentriert oder rechtsbündig eingefügt werden soll. Ähnlich wie bei Bildern, kann die Audiodatei eine Beschriftung erhalten, die man wiederum formatieren kann.

Eingebundene Audio-Datei im Gutenberg-Editor

Titelbild

Ähnlich wie beim Einfügen eines Bildes, kann man ein Titelbild auswählen und es ausrichten. Der große Unterschied hierbei besteht darin, dass man auf dem Bild einen Text platzieren und formatieren kann.

Titelbild-Block im Gutenberg-Editor

Bei den erweiterten Einstellungen kann man dann neben dem Anlegen einer eigenen CSS-Klasse auch den Abdunklungsgrad des Hintergrunds einstellen, so dass die helle Beschriftung auch in jedem Fall gut sichtbar ist. Man kann zudem den Hintergrund fixieren.

Achtung: das Titelbild entspricht nicht dem Beitragsbild, sondern ist Teil des Inhalts.

Video

So wie es möglich ist Bilder bzw. Galerien oder aber auch Audiodateien einzubinden, kann man auch Videos in einen Beitrag einbinden.

Video mit dem Gutenberg-Editor einfügen

Wie bei anderen Medien auch, muss man zunächst die entsprechende Datei auswählen (hochladen oder aus der Mediathek). Danach kann man die Ausrichtung festlegen und eine Beschriftung einfügen, die man wiederum formatieren und/oder verlinken kann. In den erweiterten Einstellungen kann dem Video eine eigene CSS-Klasse zugewiesen werden.

Fazit

Das Einbinden von Medien über den Gutenberg-Editor funktioniert vergleichbar mit dem Einbinden von Medien im Visuellen Editor des TinyMCE. Lediglich das Titelbild ist eine echte Neuerung, außerdem können Bilder nun in ihrer Größe sehr flexibel angepasst werden.

Divi: Premium-Theme für WordPress
Werbung

Geschrieben von Thordis

Thordis Bonfranchi-Simović arbeitet seit Januar 2004 mit WordPress.

  1. Danke für die Übersicht.

    Es hört sich alles so einfach und gut an, aber bei der Galerie gibt es so wie ich das sehe, ein großes Probem: Bisher (also im so genannten klassischen Editor) konnte man bei der Galerie-Einrichtung die Bildergröße der Bilder auswählen – Vorschaubild, mittel, groß, vollständige Größe – das gibt es jetzt (nicht) mehr. D.h. die Bilder werden nur noch in der vollständigen Größe (skaliert auf den Content-Bereich) dargestellt. Das finde ich ziemlich unbefriedigend, zumal oft ja die Bilder auch in rieisgen Dateien hochgeladen werden. Wenn dann eine Galierie mit etlichen Bildern mit Dateigrößen von mehreren MB angezeigt wird, ist das was die Ladezeit der Seite angeht, schon sehr grenzwertig.

    Antworten

    1. Hallo Susanne,

      das ist leider korrekt 🙁

      Antworten

Schreibe einen Kommentar

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