WordPress 5.8: Duotone, anyone?

Eine der Neuerungen, die mit WordPress 5.8 mitgekommen sind, ist ein Duotone-Filter für Bilder. Damit lassen sich Bilder über einen SVG-Filter zweifarbig einfärben.

Die Duotone-Effekte findest du beim Bilder-Block und beim Cover-Block oben in der Einstellungs-Leiste „Duotone-Filter anwenden“. Du kannst zwischen verschiedenen Voreinstellungen wählen. Du kannst aber die Voreinstellungen auch mit eigenen Farben überschreiben.

HINWEIS
Falls du diesen Artikel gerade in deinem Feed-Reader liest oder woanders außerhalb unseres Blogs, dann wirst du die Duotone-Effekte in den Beispielen weiter unten nicht sehen. Der Filter funktioniert nur innerhalb der WordPress-Site, in der er erstellt wurde. Das kann für manche Anwendungsfälle – z.B. Teilen von Inhalten auf Social Media – ein Nachteil sein.

Welche Bilder eignen sich wofür?

Wenn das Motiv im Duotone-Modus noch gut erkennbar sein soll, funktionieren am besten Fotos, die eine gleichmäßige „Zeichnung“ haben.

Bei diesem herbstlichen Motiv gibt es Licht (Himmel) und Schatten (Steg) und einen mittleren Bereich (Schilf). Sowohl die Licht- als auch die Schattenbereiche enthalten viele Details. Das sieht man ganz gut, wenn man das Bild in schwarzweiß umwandelt. Dazu kann man auch einen Duotone-Filter nutzen: Dazu die helle Farbe („Glanzlichter“) auf weiß stellen die dunkle Farbe („Schatten“) auf schwarz.

Hintergrund-Bilder

Sehr dunkle oder sehr helle Fotos eignen sich gut als Hintergrund-Bilder. Ist das Bild auf der dunklen Seite, „verschwimmen“ die dunklen Bereiche und das Bild wirkt insgesamt dunkler. Bei einem sehr hellen Bild reduzieren sich die Kontraste, das Bild wirkt weicher. Auf den Hintergrundbildern kannst du hellen bzw. dunklen Text platzieren.

Ein heller Text

Ein dunkler Text

SVG Filter

Umgesetzt wird der Effekt mit einem SVG-Filter im CSS. Die Bilder werden also nicht wirklich umgefärbt, es wird lediglich ein Filter angewendet.

.wp-duotone-filter-6103ebd6a0502 img {
    filter: url( #wp-duotone-filter-6103ebd6a0502 );
}Code-Sprache: CSS (css)

Der Filter holt sich seine Informationen aus einem SVG-Code, der sich im Quelltext ganz am Ende vor dem </body>-Tag befindet. Dort werden die Informationen für die Duotone-Farben vorgehalten. Die Zeichen nach #wp-duotone-filter- werden dynamisch erzeugt.

Duotone-Farben definieren

In den zukünftigen block-based Themes werden die Duotone-Farben zusammen mit anderen Voreinstellungen in der theme.json definiert. Hier ein Beispiel für einen Schwarzweiss-Filter aus der Dokumentation (Ausschnitt).

{
    "version": 1,
    "settings": {
        "color": {
            "duotone": [
                {
                    "colors": [ "#000", "#FFF" ],
                    "slug": "black-and-white",
                    "name": "Black and White"
                }
            ],       Code-Sprache: JSON / JSON mit Kommentaren (json)

Fazit

Es ist schon praktisch, wenn man nicht den Umweg über das Bildbearbeitungs-Programm machen muss, wenn man mal eben schnell ein Hintergrundbild testen möchte.

Ich befürchte allerdings so ein bisschen, dass wir in nächster Zeit sehr viele Duotone-Effekte sehen werden. Gerade die von der kräftig bunten Sorte. Der Effekt nutzt sich schnell ab, wenn jede zweite Website damit arbeitet.

Man kann auch die Frage stellen, ob so ein Effekt-Filter im Standard-Editor überhaupt etwas zu suchen hat. Man könnte diese Funktion auch per Plugin zuschalten.

Die ganz lebhaften Duotone-Effekte sind jetzt nicht so mein Fall. Aber ich bin auch kein Fan von den bunten Verläufen, die in vielen Gutenberg Farbpaletten auftauchen.
In Kundenprojekten würde ich Duotone-Optionen eher nicht anbieten oder nur in einer dezidierten Auswahl.