Internetkurse Köln

Seit WordPress 5.8 gibt es nun für Bilder den Effekt Duotone. Und eigentlich sollte dieser Beitrag nur davon handeln, wie Sie aus einfachen Bildern und Fotos so was wie Pop Art gestalten können. Doch dann musste ich feststellen, dass einem da ein Plugin schnell einen Strich durch die Rechnung machen kann.

Hot, hotter: Duotone

Duotone, das bedeutet das Einfärben eines Bildes mit zwei Farben. Je nachdem, um welche Farben es sich handelt, kann das Bild dann sehr knallig daherkommen (siehe oben). In Pastelltönen wird es hingegen dezent. Und mit den passenden Sepiatönen erhält es einen Vintage-Look.

Ursprünglich stammt der Begriff Tonung aus der Fotografie und bezeichnet das Einfärben von Schwarzweiß-Fotos. Kommen dabei nur zwei Farben zum Einsatz, gilt die eine den dunklen Bereichen des Bildes. Während die zweite Farbe entsprechend den hellen Bereich koloriert. In den Anfängen der Fotografie kamen dabei vor allem Brauntöne zum Einsatz, die bekannten Sepiatöne.

Farbenfroher wurde es dann vor allem in der Mitte des letzten Jahrhunderts. Wenn zwei Vollfarben aufeinandertreffen, kann der Kontrast so hoch sein, dass es zu einem Flimmereffekt kommt. Den haben sich so manche Künstler/innen zunutze gemacht. So sollten ihre psychodelischen Plakate noch mehr das Bewusstsein der Betrachter/innen beeinflussen, als es der Genuss gewisser Substanzen ohnehin schon getan hat.

Duotone ist derart angesagt, dass WordPress nun auf diesen Zug aufgesprungen ist und den Effekt Bild- und Coverblöcken zur Verfügung stellt.

Wie funktioniert der WordPress Duotone Effekt?

Dies einmal vorweg: Der neue Filter verändert Ihre Bilder nicht. Er lässt Ihre Bilder nur anders aussehen. Wie kann das sein?

Tatsächlich nutzt WordPress dafür einen SVG-Filter. Die Zuordnung findet über das automatische Auszeichnen mit der Klasse .wp-duotone-filter-... und einer eindeutigen Zeichenfolge statt.

.wp-duotone-filter-611102ed6e1ac img {
    filter: url(#wp-duotone-filter-611102ed6e1ac);
}

Was dieser Filter dann genau machen soll, legen Sie mit den Einstellungen fest. Die passende HTML-Auszeichnung, die WordPress für Sie erstellt, findet sich am Ende des HTML-Codes der Seite. Im Rahmen eines entsprechenden Elementes sind dort die Werte hinterlegt, die dem Orginalbild den Duotone-Effekt geben. Der Code kann dann zum Beispiel so aussehen:

<filter id="wp-duotone-filter-611102ed6e1ac">
	<feColorMatrix type="matrix" values=".299 .587 .114 0 0
			.299 .587 .114 0 0
			.299 .587 .114 0 0
			0 0 0 1 0"></feColorMatrix>
	<feComponentTransfer color-interpolation-filters="sRGB">
	<feFuncR type="table" tableValues="0 0"></feFuncR>
	<feFuncG type="table" tableValues="0 0.64705882352941"></feFuncG>
	<feFuncB type="table" tableValues="0 1"></feFuncB>
	</feComponentTransfer>
</filter>

Welche Werte an dieser Stelle stehen, hängt maßgeblich von den Einstellungen ab, die Sie wählen.

Einem Bild einen Duotone-Effekt zuordnen

Da WordPress die Auszeichnung für Sie übernimmt, bleibt für Sie nur noch die Zuordnung des Effektes. Sie nehmen also Ihr Bild und machen es bunt. Das ist in der Tat sehr einfach.

Jeder Bild-, aber auch jeder Coverblock hat in seiner Werkzeugleiste einen neuen Button: einen Kreis aus Pünktchen. Haben Sie bereits eine Farbauswahl getroffen, dann erscheint der Kreis wie in meinem Bild bereits in den entsprechenden Farben.

Acht Farbkombination stellt WordPress Ihnen zur Verfügung. Überdies können Sie auch Ihre eigenen Farbwerte wählen. Hier bietet es sich an, die Farbwerte zu wählen, die bereits im Theme hinterlegt sind. Immerhin stellt sich die Frage, wie bunt die Website sein soll. Es ist also vielleicht nicht die dümmste Idee, bei den Farben zu bleiben, die Sie auch sonst nutzen.

Dennoch ist es möglich, für Schatten (dunkle Bildbereiche) und Glanzlichter (helle Bildbereiche) individuelle Farbwerte zu wählen. Hierfür klicken Sie einfach auf den Kreis im jeweiligen Farbfeld. Über einen Colorpicker können Sie dann die Farbe Ihrer Wahl festlegen.

Plugin Autoptomize (Version 2.9.0) verhindert WordPress Duotone

Spätestens dies ist der Moment, da wir über das beliebte Plugin Autoptomize sprechen müssen. Das ist auch bei mir im Einsatz – und der Grund, warum ich den Duotone-Effekt hier gar nicht live darstellen kann.

Bemerke: Alle hier im Beitrag verwendeten Bilder mit Duotone-Effekt sind nur Screenshots von Bildern, die auf einer Testumgebung erstellt wurden!

Es hat mich einige Zeit und diverse graue Haare gekostet, bis ich herausgefunden hatte, welches Plugin die Ausgabe des Duotone-Effekts verhindert. Im Backend sieht mit aktivem Autoptomize nämlich noch alles gut aus. Allein im Frontend bleibt von allen Einstellungen immer nur dasselbe Originalbild übrig.

Richtig blöd wird es dann auch noch, wenn zwei Installationen dieselbe Auswahl an Plugins nutzen, dabei die eine aber den Effekt ausgibt, während die andere dies nicht tut. Da kann man schon mal richtig schlechte Laune bekommen.

Einen Grund muss es dafür aber geben. Und der lautet: Die eine Installation nutzt die Autoptomize-Einstellung »Auch für angemeldete Redakteure/Administratoren optimieren?«, die andere nutzt diese Option nicht. Soll heißen: Angemeldete Benutzer/innen sehen dann nicht, was das Plugin für die Website macht. Sie sehen so also auch nicht, dass Autoptomize (in der Version 2.9.0) den Duotone-Effekt verhindert!

Das Problem liegt im Bereich des optimierten CSS-Codes. Offenbar hakt es bei der Option »Auch Inline-CSS zusammenfügen?« Ist hier das Häkchen gesetzt, erscheinen die Bilder ohne den zugewiesenen Duotone-Effekt.

Für diesen Beitrag hier wollte ich aber diese Autoptomize Option nicht deaktivieren. Deshalb die Screenshots.

Wenn Sie also auch kurz vor dem Verzweifeln stehen, schauen Sie sich Ihre Plugins mal genauer an.

WordPress Duotone Effekt auch für Fotos

Natürlich funktioniert der Duotone-Effekt nicht nur für einfache Piktogramme. Die man sicherlich auch schnell fern von WordPress umfärben könnte. Anders sieht das bei Fotos aus. Nicht jedes Programm zur Bildbearbeitung bietet diesen Effekt. Umso netter, ihn nun einfach mit WordPress anwenden zu können.

Allerdings sieht der Duotone-Effekt nicht bei jedem Foto gleich gut aus. Es sollte schon ein relativ hoher Kontrast zwischen hellen und dunklen Bereichen herrschen, sodass diese dann auch entsprechend eingefärbt werden können.

als Coverbild mit WordPress Duotone schwarz/blau

Fazit

So hübsch der Effekt auch im Einzelfall sein kann, sollte man ihn doch mit Bedacht nutzen. Allzu schnell wird es sonst zu bunt, zu krass. Im Zweifel auch zu psychodelisch.

Ohnehin ist nicht jedes Bild geeignet. Zu flache Kontraste. Ohnehin farbenfroh. Dafür braucht es keinen zusätzlichen Farbfilter aus dem Hause WordPress.

Ferner sollte immer auch die Barrierefreiheit eine Rolle spielen. Mein rot/grünes Bild oben ist für 9 Prozent aller Männer (und 0,8 Prozent aller Frauen) wegen ihrer Rot-Grün-Sehschwäche gar kein Hingucker. Und gerade bei den Coverbildern sind Kontrast- und Farbwerte immer ein schwieriges Thema.

Schließlich sei noch zu bedenken, dass WordPress den Duotone-Effekt nur für Bild- und Coverblöcke zur Verfügung stellt. Beitragsbilder sind davon ausgenommen. Wenn nun aber gerade das Beitragsbild im Duotone erscheinen soll… Dann bleibt Ihnen nichts anderes übrig, als so wie ich wegen des Plugin-Problems zu tricksen. Aber das ist natürlich nicht wirklich im Sinne des Erfinders.

Beitragsbilder: Britta Kretschmer