Mitunter ist es erwünscht, dass Bilder -besonders Thumbnails- vom Text umflossen werden.
Wer in der visuellen Ansicht von WordPress arbeitet, könnte einfach das Bild auswählen und in der Symbolleiste auf das passende Symbol klicken. Schlecht! Denn schon, wenn man sich die Vorschau des Beitrags ansieht, sieht man in den meisten Fällen ein optisch unbefriedigendes Ergebnis. Es fehlen Abstände zwischen dem Bild und dem umfliessenden Text:
Das liegt daran, dass WordPress beim Bild und beim Textabsatz lediglich ein align-Tag einfügt, wie wir in der Codeansicht erkennen können.
Man könnte nun mühsam auch die gewünschten Abstände als Tags einfügen, aber es geht bedeutend einfacher:
In fast allen WordPress-Themen (den Layoutmustern) sind für diesen Fall bereits Klassen im Stylesheet definiert, die man nur anwenden muss. In meinem Theme heißen diese beiden Klassen “left” bzw. “right” (für rechtsbündige Bilder). In anderen häufig verwendeten Themes gibt es die Klassen “alignleft” bzw. “alignright”. Ein Blick in die Datei style.css oder einfaches Ausprobieren hilft weiter.
Was ist also zu tun, um ein gutes optisches Resultat zu erhalten?
Man forrmatiert den Beitrag und das Foto nicht in der Visuell-Ansicht, sondern wechselt in die Code-Ansicht und fügt im img-Tag die passende Klasse in der Form class=”left” (bzw. class=”alignleft”) oder class=”right” (bzw. class=”alignright”) ein, durch Leerzeichen von img bzw. dem nachfolgenden src getrennt.
In der nun auf das Bild angewendeten Klasse sind die Abstände und der Textfluss korrekt definiert, so dass das Ergebnis optisch überzeugt.