Inline-Bilder in WordPress Gutenberg Texteditor: Bugs und Fixes

Im Gutenberg Texteditor können (Stand Version 5.5) Inline-Bilder in WordPress eingefügt werden. Das kann vor allem für Icons spannend sein, die in der Regel auch in klein funktionieren. In diesem Artikel zeige ich, wie nicht nur Bitmap- sondern auch SVG-Grafiken als Inline-Bilder eingebunden werden können und vor allem, wie ein paar Bugs von Ihrem WordPress-Admin behoben werden können.

Bitmap-Bilder inline in einen Text einsetzen

Um ein Bild in einen Text einzusetzen reicht es, den Cursor an die entsprechende Textstelle zu setzen und im Interaktions-Menü des Blockes über den v-Pfeil “Inline-Bild” auszuwählen.

Geöffnetes Interaktions-Menü des Block-Editors in WordPress
Einfach den Cursor an die gewünschte Stelle setzen und “Inline-Bild” aus dem Menü auswählen.

In einer früheren Textversion habe ich dies mit meinem Logo gemacht:

Dieser Screenshot zeigt die Backend-Darstellung meiner Webseite mit dem eingefügten Inline-Bild.

Zunächst war das Bild allerdings um einiges Größer. 150*150 Pixel. Um die Größe anzupassen musste ich das Bild lediglich anklicken um die folgende Darstellung zu erhalten:

Das Bild im Text ist markiert und ein Popup-Fenster offen in dem die Breite eingestellt werden kann
Sobald ich das Bild markiere wird das Popup eingeblendet in dem ich die Breite in Pixeln setzen kann.

Das Ergebnis ließ sich im Backend sehen, leider nicht im Frontend! Das Problem dort: Die Breite wurde mit 30 Pixeln richtig angezeigt, die Höhe jedoch war immer noch 150 Pixel:

Inline-Bild das unproportional verzerrt wird
Im Frontend wird die Höhe des Inline-Bildes nicht proportional skaliert, sondern mit der realen Auflösung des Bildes angezeigt – es ist 20 mal höher als es im Verhältnis sein sollte!

Die Darstellung der Inline-Bilder in WordPress fixen

Warum wird die Breite also korrekt dargestellt, die Höhe aber nicht? Um dies zu verstehen habe ich zunächst in den Code im Editor geschaut:

<img class="wp-image-1497" style="width: 30px;" src="http://absichtbar.de/wp-content/uploads/2020/09/Logo_Icon_mwc_brokarage_600.png" alt="Das alte Logo von absichtbar.de">

Das Bild wird im HTML mit dem Style-Attribut “width: 30px;” integriert. Im CSS wird die Höhe dann auf Auto gesetzt:

.block-editor__container img {
    max-width: 100%;
    height: auto;
}

Da die Klasse .block-editor__container in der Frontend-Darstellung nicht verfügbar ist muss ich einen anderen Weg finden um ihn zu adressieren. Da die Klassen-Namen an die einzelnen Bilder gebunden sind habe ich mich für den Weg entschieden sie daran zu koppeln, ob ein Bild in einem Paragraphen liegt oder nicht:

p img {
    height: auto;
}

Mit dem Code allein war es jedoch nicht getan. Ich habe zunächst übersehen, dass ich mein Test-Bild ja in einer Liste eingetragen habe. Damit das Auch dort richtig angezeigt werden kann muss ich entweder auch für diesen Fall einen Code angeben, oder ich setze ihn einfach gleich für alle Bilder – da dies in der Regel das gewünschte Format ist dürfte es nicht mit anderen Stilen interferieren:

img {
    height: auto;
}

Diesen Code hab ich meinem Theme hinzugefügt und – Tada! Problem gelöst:

SVGs als Inline-Bilder in WordPress nutzen

SVGs – Scalable Vektor Graphics – sind speziell für (einfache) Illustrationen und Icons für das responsive Web einer Bitmap-Grafik vorzuziehen. Ihre Datei-Größe hängt von der Anzahl der Punkte und der Detailtiefe mit der die Vektoren im Code gespeichert wurden ab.

SVGs können mit CSS oder Javascript animiert werden, Hover-Effekte und Links enthalten:

SVG-Animation: Octopus in einer Flasche zieht die Arme ein und streckt sie aus
CSS-Animation im SVG-Code: Die Arme des Oktopus ziehen sich zusammen und breiten sich aus. 1
SVG mit Hover-Effekt auf dem linken Auge – nicht barrierefrei
CSS-Hover-Stil im SVG-Code: das linke Auge zwinkert, wenn die Maus drüber fährt. Allerdings nicht in dieser Darstellung, das liegt an der Einbindung, das Bild muss zunächst angeklickt werden um in einem neuen Tab zu öffnen!

Ein weiteres Beispiel für den Einsatz einer SVG ist übrigens der Einsatz als Image-Map, wie es sie in früheren HTML-Versionen gab, die aber mit dem Aufkommen von responsivem Webdesign nicht mehr funktioniert haben. Eine solche habe ich als Karte bei Autobahnkirche.de eingesetzt.

Genau diese Funktionalitäten und der damit möglicherweise eingeschleuste Schad-Code ist der Grund dafür, dass WordPress SVGs nicht standardmäßig in der Mediathek erlaubt. Genau die ist jedoch die Schnittstelle mit der die Redaktion arbeitet.

Um dennoch SVGs über die Mediathek von WordPress nutzen zu können habe ich das Plugin SVG Support installiert.

Auch hier hat WordPress einen Bug. Während Bitmap-Bilder zunächst mit einer Breite von 150 Pixeln angezeigt werden, ist die initiale Breite bei SVGs: 0 Pixel. Bitmap-Bilder werden entsprechend sichtbar, SVGs sind zwar im Code enthalten, können aber nicht gesehen werden.

Als Grund vermute ich hierfür, dass ein Bitmap-Bild eine von WordPress lesbare Breite hat, die nach dem Einfügen direkt in dem Element-Code mit dem style=”width: 150px” überschrieben wird. Bei SVGs hingegen schreibt WordPress hier style=”width: 0px”.

Bild zeigt dass das eingefügte SVG nicht sichtbar ist
Nur weil dort ein SVG ist heißt es nicht automatisch, dass es auch sichtbar ist!

Es ist zwar möglich, das SVG auszuwählen, wenn nach dem Einfügen direkt mit gedrückter Shift-Taste und dem Pfeil nach links gedrückt wird, sichtbar wird das jedoch nur durch das Popup zur Einstellung der Breite.

Bild zeigt das Popup zur Einstellung der Breite
Dass das SVG ausgewählt ist zeigt sich nur dadurch, dass das Popup zur Einstellung der Breite angezeigt wird.

Erst wenn ich eine Breite eingetragen habe sehe ich, ob ich das richtige Bild eingefügt habe:

Bild zeigt das Icon im Text mit der Breite von 50 Pixeln an
Sobald eine Breite eingegeben wurde ist das Bild sichtbar!

Erneut hilft hier ein Blick auf den Code der von WordPress auf das Bild einwirkt.

.block-editor__container img {
    max-width: 100%;
    height: auto;
}

WordPress stellt an dieser Stelle also nur sicher, dass Bilder in der Breite nicht über den Satzspiegel hinaus ragen. Dadurch, dass keine Breite angegeben wurde wird die Original-Breite des Bildes verwendet, wenn das Bild kleiner als die des Satzspiegels ist.

Damit das Bild von Anfang an im Editor sichtbar ist habe ich das folgende CSS in die Darstellungsanweisungen für das Gutenberg-Backend 2 integriert, von dem nur Bilder mit der Dateiendung “.svg” beeinflusst werden:

img[src*=".svg"] {
   min-width: 30px;
}

Es funktioniert! Das Bild ist von Anfang an im Backend sichtbar und wird – wie das folgende Bild zeigt – mit einer Breite von 30 Pixeln und automatisch proportionaler Höhe dargestellt:

Markiertes Inline-Bild das die Breite 0 im Popup hat.
Das SVG ist sichtbar und kann viel leichter markiert werden. Im Popup das dann erscheint wird sichtbar, dass es noch keine Breite hat.

Die Darstellung ist jedoch rein virtuell. Im Frontend wird das Bild nach wie vor nicht angezeigt:

Screenshot der Textzeile mit eingefügtem SVG das nicht angezeigt wird.
Im Frontend ist das SVG noch nicht sichtbar!

Ein weiteres Problem habe ich entdeckt: Wenn ich das Bild größer als 30 Pixel darstellen möchte wird dies angezeigt. Aber wenn ich es kleiner darstellen möchte wird diese Angabe ignoriert, da ja eine Mindest-Breite angegeben ist.

Eingestellt sind 5 Pixel Breite, dargestellt werden 30 Pixel
Die Breite des Bildes wurde auf 5 gesetzt, die Darstellung bleibt bei 30 Pixel – wegen der Mindest-Breite.

Also muss ich meinen Code noch mal anpassen. Wieder schaue ich in den Code um eine Eigenschaft zu finden die ich nutzen kann um das CSS nur für den Spezialfall zu adressieren dass keine Größe gesetzt wurde. Ich kombiniere das obige CSS mit einem zusätzlichen Attribut-Selektor:

img[src*=".svg"][style="width: 0px;"] {
min-width: 30px;
}

Nun wird das Bild auch kleiner dargestellt, wenn ich den vordefinierten Wert unterschreite:

Die Größe des Bildes stimmt mit der eingegebenen Größe überein
Die Minimal-Größe gilt jetzt nur noch für Bilder mit der Breite “0px” – Größen kleiner als 30 Pixel Breite werden nun korrekt angezeigt!

Jetzt bleibt nur noch eines zu tun: Das SVG auch dann im Frontend sichtbar zu machen wenn ihm keine Größe zugeordnet wurde. Für diesen Fall nutze ich den obigen Code auch im Frontend-CSS!

Zwischen diesen Pfeilen habe ich ein SVG eingefügt: ›Icon Smartphone
(Händisch eingegebene Breite: 15 Pixel)

Zwischen diesen Pfeilen habe ich ein SVG eingefügt: ›Icon Smartphone 2
(Es wurde keine Breite eingegeben, das Bild wird in der Standard-Größe aus dem CSS angezeigt)

Wichtiger Hinweis: Ein Inline-Bild, das mehrfach integriert werden soll, muss auch mehrfach händisch eingetragen werden. Wenn es einfach kopiert und eingefügt wird interpretiert WordPress es nicht als Inline-Bild, sondern als normales Bild, was anderen Einstellungen unterliegt. Wer sich nicht die Einstellungen merken möchte, sondern lieber doch kopieren mag kann dies auf der Code-Ebene im Editor tun. Aber das ist nicht jedereins Ding!

Smartphone-Icon
Das Inline-Bild das rauskopiert und eingefügt wurde verhält sich jetzt wie ein normales Bild!

Zum Schluss noch ein Hinweis zur Barrierefreiheit

Inline-Bilder in WordPress müssen vor dem Einfügen in der Mediathek mit einem Alt-Tag ausgestattet werden. Dieser kann aktuell nicht im WordPress-Backend geändert werden sobald das Bild eingefügt wurde. Nachträglich in der Mediathek vorgenommene Änderungen werden ebenfalls nicht übernommen.

Spätestens beim Einfügen des Bildes muss der Alt-Tag editiert werden. Dabei gemachte Änderungen in der Mediathek-Ansicht wird dabei in der Mediathek gespeichert.

Weitere Artikel über die Verbesserung von WordPress-Backends

Fußnoten
  1. Diese Illustrationen entstand als Beispiel für die Studierenden im Corona-Sommerkurs Interaktions- und Interfacedesign im Studiengang Medien-Informatik an der Beuth-Hochschule
  2. damit WordPress das Stylesheet für gutenberg findet muss dieses in der functions.php des Themes aufgerufen werden!

    // Enqueue WordPress theme styles within Gutenberg.
    function gutenberg_styles() {
    // Load the theme styles within Gutenberg.
    wp_enqueue_style( 'gutenberg', get_theme_file_uri( 'gutenberg.css' ), false);
    }
    add_action( 'enqueue_block_editor_assets', 'gutenberg_styles' );