Bilder in Posts umfließen lassen

In den IMG-tag die Ausrichtung und den Abstand für den Text mit einbringen.

<img src="http://www.....jpg" align="left" hspace="10" vspace="15" alt="xxxx" /></a>

Ah, danke für den Thread! Der hat mir bei meinem Problem geholfen wo ich gerade dabei bin, meinen Blog aufzubauen, allerdings bin ich mit dem optischen Ergebnis nicht so ganz zufrieden. Guck mal hier zum Beispiel, bei diesem Eintrag:

http://www.nackonet.de/wordpress/?p=312

Dass der Text das Bild umfließt, habe ich hinbekommen durch:

<img width="120" height="92" border="0" src="bildurl" style="float:left; margin:0px 10px 0px 0px;" alt="xxx" />

Allerdings beginnt der Text nicht bündig oben mit dem Bild? Verstehst, was ich meine? Ich würde das optisch viel schöner finden, wenn der Text mit der Oberkante des Bildes beginnt und nicht erst mittendrin.

Das Experimentieren mit den margins hat mir nix gebracht. Weiß vielleicht jemand wie ich das hinbekommen kann bitte, dass der Text das Bild umfließt, der Text dabei aber bündig mit der Oberkante des Bildes abschließt?

Da wäre ich wirklich sehr dankbar für!

Alles Gute
Petar

Hallo Herr Nack,

nimm doch mal das <br>-Tag aus dem Quelltext bzw. dem ersten Absatz. Dann sollte es funktionieren. ;)

Liebe Grüße
PythOn

Hmm, nee, des BR wars nets.

Des hatte ich in der Überschrift, damit die zweizeilig wird.

Habs jetzt mal rausgemacht, hat wirklich nur die Überschrift beeinflusst,
der Text fängt aber immer noch net mit der Oberkante des Bildes an.

Hab auch schon am Bild rumexperimentiert, aber egal wie groß oder klein
des Bild is, der Text fängt nie bündig mit der Oberkante des Bildes an.

Hmmm. Woran könnte dat denn sonst noch liegen, bitte...?

Alles Gute
Herr Nack

Jottlieb, tatsächlich :confused:

Danke Dir sehr! Irgendwie hab ich das gar nicht wahrgenommen, weil da nur Zeilenwechsel war und ich kein BR gesehen hab. Nu is schön, danke Dir!!

Bitteschön. :)

Soweit ist das ja schön und gut für Leute die auch nur ein bisschen Ahnung von HTML & CSS haben.

Aber gibts das auch in nem Plugin, quasi als Knopf im Editor? Ich hab einige Autoren (teilweise auch Ältere) die nichts mit HTML anfangen können und da wäre so ne Erweiterung im Editor schon ganz schön... kennt da jemand was?

Ich nutze dazu WP-AddQicktag.
WP-AddQuicktag , plugin for adding quicktags - RMNL

Damit kannst du beliebige Button in den Editor einfügen, und somit auch den Code dafür direkt auf einen Button legen.

Naja ein Button im WYSIWYG Editor, mit dem ich sagen kann "Bild links anordnen" und "Bild rechts anordnen". Beim Klick drauf, sollten dann die styles (float:left/right) für das Bild entsprechend gesetzt werden. Sowas such ich...

Werd mir das Quicktag heute abend mal anschauen, vielleicht ist es das, was ich suche...

Einfacher: im Stylesheet verankern!

es geht auch einfacher übrigens, indem du die Bildposition im Stylesheet verankerst! Dann kannst du danach wenn du ein Bild einfügst nur noch zwischen links, rechts und zentriert wählen, ohne jedesmal den ganzen Tag abzutippen...

Also, geht wie folgt:

Füge in der CSS folgendes ein: (v.a. für Kubrik Design!!)
[size=8]
[COLOR=Green]img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left
}

.clear {clear: both;}

[size=10][COLOR=Black]Das clear macht dabei die Absatzkontrolle, sprich schliesst die postmetadaten schön unterhalb des Bildes an wenn möglich, aber das muss dich nicht interessieren :-)
Tja, und jetzt füge normal ein Bild ein und editiere den Quelltext des Bildes im Editor wie folgt. Normalerweise sieht das ja irgendwie so aus, oder:
[size=8]
<img id="imagexy" alt=XY.jpg src="http://deine-domain.de/wp-content/uploads//XY.jpg" />

[size=10]Jetzt füg einfach entsprechend der gewünschten Ausrichtung dies ein: [/SIZE][/SIZE][/COLOR][/SIZE][/COLOR][/SIZE][size=8][COLOR=Green][size=10][COLOR=Black][size=8][size=10]class="alignleft"

Sprich, sieht das ganze danach so aus:[/SIZE]
[/SIZE][/COLOR][/SIZE][/COLOR][/SIZE][size=8][COLOR=Green][size=10][COLOR=Black][size=8]
[COLOR=Black]<img id="imagexy" [/COLOR][/SIZE][/COLOR][/SIZE][/COLOR][/SIZE][size=8][COLOR=Black][size=10][size=8]class="alignleft" [/SIZE][/SIZE][/COLOR][/SIZE][size=8][COLOR=Black][size=10][size=8]alt=XY.jpg src="http://deine-domain.de/wp-content/uploads//XY.jpg" />[/SIZE][/SIZE][/COLOR][/SIZE]
[size=8][COLOR=Green][size=10][COLOR=Black][size=8][size=10]
Find ich persönlich die schönste Lösung! Da brauchst du auch keinen Button und nix, nur ein einziges Mal den oberen Text in die style.css reinkopieren, danach nur noch 5 Sekunden jeweils die "class="alignleft" etc. eintippen...Fertig!

Gruss aus Zürich, Livio[/SIZE][/SIZE][/COLOR][/SIZE][/COLOR][/SIZE][size=8][COLOR=Green]
[/COLOR][/SIZE]

Ja gut, so mache ich das auch bisher ;)

Aaber wie oben schon gesagt, hätte ich dafür gern nen Button im Editor. Werd mir jetzt das QuickTag mal anschauen.

Zitat von rftc

es geht auch einfacher übrigens, indem du die Bildposition im Stylesheet verankerst! Dann kannst du danach wenn du ein Bild einfügst nur noch zwischen links, rechts und zentriert wählen, ohne jedesmal den ganzen Tag abzutippen...

Also, geht wie folgt:

Füge in der CSS folgendes ein: (v.a. für Kubrik Design!!)
[size=8][COLOR=Green]
........

[size=10][COLOR=Black]Das clear macht dabei die Absatzkontrolle, sprich schliesst die postmetadaten schön unterhalb des Bildes an wenn möglich, aber das muss dich nicht interessieren :-)
Tja, und jetzt füge normal ein Bild ein und editiere den Quelltext des Bildes im Editor wie folgt. Normalerweise sieht das ja irgendwie so aus, oder:
[size=8]
<img id="imagexy" alt=XY.jpg src="http://deine-domain.de/wp-content/uploads//XY.jpg" />

[size=10]Jetzt füg einfach entsprechend der gewünschten Ausrichtung dies ein: [/SIZE][/SIZE][/COLOR][/SIZE][/COLOR][/SIZE][size=8][COLOR=Green][size=10][COLOR=Black][size=8][size=10]class="alignleft"

Sprich, sieht das ganze danach so aus:[/SIZE]
[/SIZE][/COLOR][/SIZE][/COLOR][/SIZE][size=8][COLOR=Green][size=10][COLOR=Black][size=8]
[COLOR=Black]<img id="imagexy" [/COLOR][/SIZE][/COLOR][/SIZE][/COLOR][/SIZE][size=8][COLOR=Black][size=10][size=8]class="alignleft" [/SIZE][/SIZE][/COLOR][/SIZE][size=8][COLOR=Black][size=10][size=8]alt=XY.jpg src="http://deine-domain.de/wp-content/uploads//XY.jpg" />[/SIZE][/SIZE][/COLOR][/SIZE]
[size=8][COLOR=Green][size=10][COLOR=Black][size=8][size=10]
Find ich persönlich die schönste Lösung! Da brauchst du auch keinen Button und nix, nur ein einziges Mal den oberen Text in die style.css reinkopieren, danach nur noch 5 Sekunden jeweils die "class="alignleft" etc. eintippen...Fertig!

Gruss aus Zürich, Livio[/SIZE][/SIZE][/COLOR][/SIZE][/COLOR][/SIZE][size=8][COLOR=Green]
[/COLOR][/SIZE]

Alles anzeigen

Und wo an welcher Stelle genau ist das einzufügen?
Themes / Theme Editor / Stylesheet (Bearbeite CSS Style) oder wo?
Wenn ich das da eintrage passiert nichts.
Oder wo würdest Du hier das "[size=8][COLOR=Green][size=10][COLOR=Black][size=8][size=10]"class="alignleft" einfügen wenn der folgende Text das Tumbnail umfließen soll:

<strong>Überschrift</strong>
<a href='http://www.robert-koch-foto.de/blog/wp-conten…e-agbar-_vi.jpg' title='torre-agbar'><img src='http://www.robert-koch-foto.de/blog/wp-conten…i.thumbnail.jpg' alt='torre-agbar' /></a>
text bla text bla bla blubb text text bla text bla bla blubb text bla text bla
[/SIZE][/SIZE][/COLOR][/SIZE][/COLOR][/SIZE]

[size=8][COLOR=Green][size=10][COLOR=Black][size=8][size=10]in etwa [COLOR=Red]hier[/COLOR]: (wobei ich die einfachen durch doppelte Anführungszeichen ersetzen würde)

[size=8]<strong>Überschrift</strong>
<a href="http://www.robert-koch-foto.de/blog/wp-conten…e-agbar-_vi.jpg" title="torre-agbar"><img src="http://www.robert-koch-foto.de/blog/wp-conten…i.thumbnail.jpg" [/SIZE][size=8][COLOR=Red]class="alignleft"[/COLOR][/SIZE][size=8] alt="torre-agbar" /></a>

[/SIZE][/SIZE][/SIZE][/COLOR][/SIZE][/COLOR][/SIZE][size=8][COLOR=Green][size=10][COLOR=Black][size=8][size=10]Die class-Anweisung gehört dann wie ich beschrieben habe in die style.css (kannst du hintun, wo du willst, und wo's für dich thematisch am besten passt). Kopier's einfach genau wie ich's beschrieben hab...muss eig. gehen...

Gruss Livio
[/SIZE][/SIZE][/COLOR][/SIZE][/COLOR][/SIZE]