Fließtext – Bilder – WordPress

Problem: Wenn Bilder in WordPress Beiträge eingefügt werden, entsteht eine Art Absatz durch das Bild, welches den Beiträg zum Teil etwas abgehackt aussehen lässt. Viel schöner wäre es, wenn der Text das Bild umlaufen würde. Doch diese Funktion bietet WordPress jedoch ohne Veränderung nicht.

Lösung:
Erweiterung der CSS, in welcher die Eigenschaft des Bildes besser definiert wird.

Folgende Erweiterungen sollten der CSS Datei hinzugefügt werden.

Für Bilder am linken Rand:

bildlinks {
float: left;
margin: 1px 10px 1px 1px;
}

Für Bilder am linken Rand:

bildrechts {
float: right;
margin: 0px 10px 0px 10px;
}

Erklärung Befehl „margin“
Der Befehl ist in 4 Gruppen eingeteilt welcher hier in unserem Fall den Abstand vom Text zum Bild regelt.
Erster Wert: Abstand oben
Zweiter Wert; Abstand rechts
Dritter Wert: Abstand unten
Vierter Wert: Abstand links

Fügt ihr nun ein Bild ein, so könnt ihr dieses um die Fließtext CSS Erweiterung ergänzen. Dazu fügt ihr direkt hinter dem „<img“ Befehl folgendes ein:

Bild links:  class=“bildlinks“
Bild rechts: class=“bildrechts“

Beispiel: „><img class=“bildlinks“ ….

Nun sollte der Text um das Bild fließen.

TIPP: Mit dem PlugIn WP Gallery können diese „class“ Tags automatisch in den Bildlink eingefügt werden.

Alternativ:
Diese Style Informationen können dem Bild auch direkt ohne CSS mitgegeben werden.
Dies kann auf folgende Art und Weise erfolgen:

Bild links: nach <img …
style=“float:left; margin: 1px 10px 1px 1px;“

Bild rechts: nach <img …..
style=“float:lright; margin: 1px 1px 1px 10px;“