Bilder in Posts umfließen lassen

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

Code:

Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

 

Das ist oldschool-HTML.

"Schöner" ist:

HTML:

Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

 

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

 

Jau da ist eine Leerzeile bzw. Zeilenumbruch.

 

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

 

Da IST ein Zeilenumbruch!

HTML:

Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

Also gehe nochmal in den Editor, setze den Cursor vor das "So" und drücke die Backspace-Taste, damit der Zeilenumbruch entfernt wird, bzw. lösche das <br /> direkt, falls man es im Editor sieht.

 

Jottlieb, tatsächlich

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?

 

für was genau brauchst du nun ein plugin?

 

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!!)

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

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:

<img id="imagexy" alt=XY.jpg src="http://deine-domain.de/wp-content/uploads//XY.jpg" />

Jetzt füg einfach entsprechend der gewünschten Ausrichtung dies ein: class="alignleft"

Sprich, sieht das ganze danach so aus:

<img id="imagexy" class="alignleft" alt=XY.jpg src="http://deine-domain.de/wp-content/uploads//XY.jpg" />

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

 

so hab ich es auch! is wirklich die beste lösung
und das aber auch wirklich immer tippen... so bleibt man in übung

 

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.

 

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 ""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-content/barcelona-torre-agbar-_vi.jpg' title='torre-agbar'><img src='http://www.robert-koch-foto.de/blog/wp-content/barcelona-torre-agbar-_vi.thumbnail.jpg' alt='torre-agbar' /></a>
text bla text bla bla blubb text text bla text bla bla blubb text bla text bla

 

in etwa hier: (wobei ich die einfachen durch doppelte Anführungszeichen ersetzen würde)

<strong>Überschrift</strong>
<a href="http://www.robert-koch-foto.de/blog/wp-content/barcelona-torre-agbar-_vi.jpg" title="torre-agbar"><img src="http://www.robert-koch-foto.de/blog/wp-content/barcelona-torre-agbar-_vi.thumbnail.jpg" class="alignleft" alt="torre-agbar" /></a>

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