Blog-Trainer

WordPress-Seminare seit 2006

In WordPress Bilder von Text umfliessen lassen

| 36.123 mal gelesen |

blogtrainer-am-fenster.jpgtextfluss1.JPGMitunter 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:

textfluss2.JPG textfluss3.JPG textfluss4.JPG

textfluss5.JPGDas 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?

textfluss6.JPGMan 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.

In WordPress Bilder von Text umfliessen lassen auf Facebook teilen
In WordPress Bilder von Text umfliessen lassen auf Twitter teilen
In WordPress Bilder von Text umfliessen lassen auf Google Plus teilen
In WordPress Bilder von Text umfliessen lassen auf Xing teilen
In WordPress Bilder von Text umfliessen lassen auf LinkedIn teilen

8 Kommentare

  1. Wer es noch einfacher will, der nutzt im Stylesheet die netten Attributselektoren

    img[align=left] { margin-right: 10px; }
    img[align=right] { margin-left: 10px; }

    Dann kann man sich das HTML-Gefrickel sparen und einfach das Bild über die Buttons ausrichten. Der Text ist dann 10 Pixel vom Bild entfernt.
    Müsste in allen aktuellen Browsern funktioneren, im Internet Explorer aber erst seit Version 7.

  2. Ich danke Ihnen für die überaus nützlichen Informationen. Auf meiner Webseite habe ich sie umgesetzt. Merci!

  3. Danke für den Tipp, das habe ich gesucht!

    MFG

  4. Super, eine einfache Lösung für einen Neublogger. Habe lange gesucht.
    Gruss
    Jörg

  5. hmm… bei mir funktioniert das nicht, wenn ich es im Adminbereich so mache, wirds mir im Reiter „visuell“ zwar richtig angezeigt, aber so bald ich auf „vorschau“ gehe, bzw den Artikel aktualisiere/online stelle gehts nicht mehr.. zum verzweifeln.

  6. Das beschriebene Verfahren hat sich inzwischen dadurch überholt, dass seit WordPress 2.6 beim Einfügen von Bildern je nach Auswahl class=“alignleft“, „alignright“ oder „alignnone“ gesetzt wird. Du musst also nur dafür sorgen, dass diese Klassen in der style.css deines verwendeten Themes definiert sind.

  7. Hi,

    hm, klingt alles gut. Aber ich glaube, ich bin zu doof. Ich bekomme das einfach nicht hin. Egal, ob ich das eintrage, oder, wie Karl-Heinz schreibt, über die Links oder rechts geschichte beim einfügen gehe,,, Es geht bei mir einfach nicht!

    Gruß
    Christian

  8. Hallo,

    das scheint die Lösung meines Problems zu sein, bis auf die kleinigkeit, dass ( keine Ahnung ab welcher WP-Version, meine ist 2.8) der classname nun „alignleft size-thumbnail wp-image-(nr)“lautet. Da immer eine fortlaufende Nummer angehängt wird, geht das Ganze nicht mehr.

    Gibt es dafür eine Lösung?

    Gruß
    Hans