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.

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

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 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:

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:
- Ein Inline-Bild
in einen Text einfügen (hier mein altes Logo)
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:
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“.

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.

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

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:

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

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.

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:

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: ›‹
(Händisch eingegebene Breite: 15 Pixel)
Zwischen diesen Pfeilen habe ich ein SVG eingefügt: ›‹
(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!
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
- Diese Illustrationen entstand als Beispiel für die Studierenden im Corona-Sommerkurs Interaktions- und Interfacedesign im Studiengang Medien-Informatik an der Beuth-Hochschule▲
- 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' );