Wissen

Fließtext um Bilder im WordPress Blog

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;“


Tags:

  • wie umfliesst text foto wordpress
  • bilder um den text wordpress
  • wordpress abstand text float
  • wordpress text auf handy abgehackt
  • wordpress 4 Artikelbild umfließen

Ähnliche Artikel

2 Kommentare

  1. Vielen Dank für diesen tollen Tipp!
    Kenne mich mit CSS nur wenig aus und mich haben diese „abgehakten“ Absätze schon immer gestört und ich habe schon lange nach einer Lösung gesucht.

  2. Hallo und guten Morgen.
    Irgendwie hoffe ich, dass du mir veilleicht helfen kannst.
    Bilder in Beiträge einbauen und umfließen lassen ist kein Problem, hast du auch sehr schön beschrieben.
    Was ich suche ist eine Möglichkeit, in der Single.php für jeden Beitrag ein Bild unten rechts zu positionieren und auch dieses vom Text umfliessen zu lassen.
    Das Bild soll in jedem Beitrag das selbe und soll zum Ende des Beitrages kommen und zwar so, dass Bild und Text auf der selben Höhe abschliessen…

    Noch habe ich Hoffnung, dass es eine Lösung gibt, würde mich also sehr freuen, wenn sich jemand Gedanken machen könnte…
    Vielen Dank schonmal.

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Schaltfläche "Zurück zum Anfang"
Send this to a friend