Claudia Klinger am 24. August 2007 —

Bilder einbinden mit WordPress – Teil 2

Nachdem ich im ersten Teil dieses Tutorials die Basics beschrieben habe, nämlich

1. Für wen ist das Tutorial nützlich?
2. Welche Bilder dürfen eingebunden werden?
3. Bilder vorbereiten: Format, Auflösung, Größe;
4. Bilder hochladen und einbinden;

komme ich jetzt zu den Feinheiten:

5. Bilder vom Text umfließen lassen
6. Randabstände zum Text verbessern

5. Bilder vom Text umfließen lassen

Ich gehe davon aus, dass ein Bild vorbereitet, und hoch geladen wurde, wie in Teil 1 beschrieben. Als Beispiel verwende ich hier das Bild einer Stockrose, die formatfüllend einfach zu groß wäre, wenn es in der Ziel-Publikation nicht gerade um Pflanzendetails geht. Es ist 200 x 200 Pixel breit und in 50%-iger Qualität als JPG abgespeichert (Tipp: nach dem Verkleinern immer ein wenig nachschärfen und evtl. auch die Farbe mehr sättigen!).

Nach dem Upload wird uns das Bild so zur weiteren Bearbeitung angezeigt:

Uploadmaske WordPress

Wieder kreuzen wir „vollständige Größe“ und „keine“ an (ein Link ist momentan nicht erwünscht), achten aber darauf, dass der Cursor in der Texteingabemaske bereits am Anfang des Absatzes steht, der das Bild dann umfließen soll. Mit „zum Editor senden“ wird das Bild an dieser Stelle eingefügt. Es wird nun im Textfeld sichtbar, allerdings sieht es noch gar nicht gut aus, denn das „Umfließen“ haben wir noch nicht angeordnet:

Textfeld mit Bild am Absatzanfang

Für das Umfließen markieren wir jetzt das Bild und klicken dann auf das Bildsymbol in der Oberzeile (=das „Bäumchen“). Es erscheint ein PopUp, in dem in diesem Fall folgende Angaben zu machen sind:

PopUp einfügen/bearbeiten

Das Alignment „Left“ ergibt die Ausrichtung links (= Text umfließt rechts). Die Größenangabe (Dimensions) könnte man auch weglassen, der Rahmen (Border) ist hier auf 1 Pixel Breite gesetzt. Und SO sieht das Ergebnis aus:

PopUp Bild einfügen/bearbeiten

Wer es jetzt mal in der „Vorschau“ betrachtet, sieht, dass sich die Optik auch da nicht weiter verbessert: Der Text ist viel zu nah ans Bild geklatscht, es sieht nicht wirklich GUT aus!

Wer noch einmal oben auf das PopUp-Bild schaut, findet dort ganz unten auch die Option „horizontal Space“ (=horizontaler Freiraum). Trägt man hier z.B. „10“ ein, ergibt sich zwar ein 10 Pixel breiter Abstand zum Text, leider aber auch zum linken Rand! Das liegt daran, dass der Editor noch veraltetes HTML schreibt, mit dem es nicht möglich war, nur einer der beiden Bildseiten einen bestimmten Abstand zuzuordnen. Dennoch nutzen viele Blogger das PopUp zum Ausrichten der Bilder und leben eben mit den kleinen Darstellungsfehlern. Wir geben uns damit nicht zufrieden, sondern machen es besser.

nach oben

6. Randabstände zum Text verbessern

Um das Problem zu lösen, lassen wir das über das Bildsymbol aufrufbare PopUp einfach links liegen. Ausgangssituation ist also wieder der Zustand mit zu Beginn des Absatzes eingebundenem Bild, noch nicht vom Text umflossen (2.Grafik von oben in diesem Artikel). Oberhalb der Texteingabemaske sehen wir zwei Reiter: „visuell“ und „Code“ – voreingestellt ist die „visuelle“ Ansicht, jetzt klicken wir mal die Code-Ansicht her:

Code-Ansicht WordPress-Texteingabe

Der HTML-Code für das Bild ist folgender:

<img src=“http://www.webwriting-magazin.de/wp-content/uploads/2007/08/stockrose.jpg“
title=“Stockrose“ alt=“Stockrose“ />

Die Bildausrichtung und den Abstand ordnen wir jetzt einfach frech mit einer direkten CSS-Style-Angabe an (hier grün hervorgehoben):

<img style=“float:left;margin-right:10px“ src=“http://www.webwriting-magazin.de/wp-content/uploads/2007/08/stockrose.jpg“
title=“Stockrose“ alt=“Stockrose“ />

Und schalten dann wieder um auf „visuell“:

Bildabstand 10 pixel rechts

So sieht es schon sehr viel besser aus! Je nachdem, welche Schriftgröße und welcher Zeilenabstand der Text im Zieldokument hat, wird der Abstand unterschiedlich groß sein müssen. Da ist ein wenig Rumprobieren angesagt, wenn ich perfektionistisch sein wollte, würde ich ihn hier vielleicht noch auf 13 Pixel setzen.

Soll das Bild rechts stehen und links umflossen werden, muss man natürlich auch den CSS-Code ändern, nämlich so:

style=“float:right;margin-left:10px“

Wer schon ein wenig fortgeschrittene CSS-Kenntnisse hat und an die CSS-Datei style.css in seinem WordPress-Theme dran kommt, kann sich natürlich dort Formate definieren („links“, „rechts“) und diese anstatt des CSS-Codes verwenden.

Mehr? Mal sehen…

Mit diesen wenigen Vorgehensweisen binde ich Bilder in all meine Blogs ein, immer mit passenden Abständen da, wo ich sie haben will. Da dies ein Einsteiger-Tutorial ist, lasse ich es vorerst dabei bewenden, obwohl die Bearbeitungsmasken von WordPress auch noch andere Möglichkeiten anbieten: etwa die Verwendung von „Thumbnails“, das Linken auf Bild-Dateien, die gar nicht auf der Seite erscheinen, und manches mehr. Auch das Einbinden von Bildern aus Flickr und anderen Quellen ergäbe Stoff für einen „Teil 3“ – ob ein solcher mal erscheint, hängt davon ab, ob ich einen Bedarf spüre. Abonniere halt den Newsfeed, dann bekommst du es mit!

nach oben


Fotolia

Diskussion

Kommentare abonnieren (RSS)
24 Kommentare zu „Bilder einbinden mit WordPress – Teil 2“.

  1. Hallo Claudia,
    ein nützliches Toturial, gut verständlich geschrieben und sicher nicht nur für einen Neublogger hilfreich.
    Auf weitere Tut’s bin ich gespannt ;-)

  2. Nochmals vielen Dank. Auch ich bin gespannt auf weitere Tutorials. (Wie z.B. Titel unter/oben Photo publizieren :) ).

    Henk

  3. […] WebWriting-Magazin: WordPress-Bilderlehrgang Teil 2 […]

  4. Hallo Claudia,
    ich habe mir einfach oben zwei neue Buttons in WordPress eingebaut: Bild links und Bild rechts. Dazu einfach die Datei quicktags.js im Ordner wp-includes entsprechend anpassen. Hat den Vorteil, ich kann, nachdem ich das Bild eingefügt habe, den Mauszeiger in den HTML-Code stellen und dann nur noch per Klick das Bild ausrichten. So bin ich noch flexibler, wie wenn ich die CSS-Datei anpassen muss. Und da habe ich mir noch viele Buttons für z.B. immer wiederkehrende Links oder bestimmte Anzeigen angelegt. ;-)

  5. Hallo,
    ich habe Ihren Tipp umgesetzt, klappte prima. Nur wenn ich in der Sidebar denn CSS-Code ändern will, klappt das nicht. Wo müsste ich das einstellen?
    Danke.
    R. Kopp-Wichmann

  6. Die Sidebar wird in WordPress nicht über die Schreibmaske erreicht. Um hier etwas zu ändern, muss man in den Sidebar-Code selbst eingreifen (=eine Mischung aus HTML und PHP, abgelegt als sidebar.php im jeweiligen Theme-Ordner) ODER die CSS (Style.css) in den die Sidebar betreffenen Angaben verändern. (Das alles ist dann in jedem Theme und jedem eingebundenen Widget evtl. anders).

    Da es Ihnen wohl nur um Ihr Bild links oben geht, empfehle ich einen simplen Workaround, der das Forschen und fehlergeneigtes Ausprobieren erspart: Öffnen Sie das Bild in einer Bildbearbeitung und verbreitern sie die Fotofläche/Arbeitsfläche nach rechts (OHNE die Bildproportionen zu ändern!), so dass dort ein weißer Raum entsteht – groß genug, um den Abstand zum Text zu erzeugen, der hier gewünscht ist. Damit noch Text daneben passt, müssen Sie vermutlich das ganze Bild noch um ein Drittel oder Viertel verkleinern. Das müssten Sie aber auch mit den aufwändigeren Methoden, um Platz für den Abstand zu schaffen.

  7. Ein Bild einfügen macht ja nun wirklich kein Problem. Schwieriger finde ich es mehrere Bilder in einem Artikel einzubinden. Da verschiebt mein WordPress schon gerne mal die Positionen.
    Oder gibt’s dafür ein paar gute Tricks?

  8. Für Neulinge ist vieles ein Problem, was alte Hasen ganz easy finden.

    Ich sehe dein Problem mit mehreren Bildern nicht. Der jeweilige Absatz muss halt so lang sein, dass er das Bild umfließt, bevor das nächste (im nächsten Absatz) gesetzt werden kann. Die Bilder in diesem Beitrag zum Beispiel sind doch kein Problem?? Oder was meinst du?

  9. […] http://www.webwriting-magazin.de/bilder-einbinden-mit-wordpress-teil-2 breiter Abstand zum Text, leider aber auch zum linken Rand! Das liegt daran, dass der Editor noch veraltetes HTML schreibt, mit dem es nicht möglich war, nur einer der beiden Bildseiten einen bestimmten Abstand zuzuordnen. Dennoch nutzen viele Blogger das PopUp zum Ausrichten der Bilder und leben eben mit den kleinen Darstellungsfehlern. Wir geben uns damit nicht zufrieden, sondern […]

  10. Hallo Claudia,
    sehr tolles Tutorial. Meine Frage wäre noch: wie kann man das Bild so einfügen, dass es im Text frei beweglich ist, dass also der Text sowohl links als auch rechts (und natürlich oben und unten) vorbeifließt, und das Bild dabei überall positionierbar ist? Gibts es diese Möglichkeit?

  11. @Alex: Klare Antwort: das geht nicht!

  12. Hallo, Claudia,

    ich hab das Problem dass das zusätzliche coding „style…float“ nach dem speichern des Editors immer wieder verschwindet. Es scheint so, dass das Theme diesen CSS-Befehl nicht erkennt. Hast du eine Idee?

    Gruß
    Rolf

  13. hallo, was hier noch fehlt ist die Steuerung des Beendens des Textfließens und die Verwendung einer Bildunterschrift, die fest mit dem Bild gekoppelt ist. Vgl.
    http://www.train-und-coach.de/text-mit-grafik-oder-bild-in-wordpress-kombinieren.html
    gruß Rainer

  14. links links

  15. Vielen Dank für das nützliche Tutorial

  16. Wow! Sieht fantastisch aus! Klasse Ergebnis.

    LG
    Lisa

  17. Hallo,

    kann jemand helfen?

    Gibt es eine Möglichkeit für den Admin, Grafiken in einen Kommentar einzufügen?

    Danke.

  18. Als Admin kannst du dir doch die Kommentare zum Bearbeiten ins Bearbeitungsfenster aufrufen. Dort kannst du dann eine Grafik / ein Bild genau so einfügen, wie du es in einer x-beliebigen HTML-Seite machen würdest. Du musst allerdings den Pfad zum Bild kennen:

    -> Entweder du hast es in eine spezielles eigenes Bilderverzeichnis abgelegt, dann sollte der Pfad einfach sein, z.B. http://www.domainname.de/blogverzeichnis/bilder/bilddatei.jpg

    ODER wenn du es mit der UPLOAD-Funktion hochgeladen hast (in: „Artikel bearbeiten“) befindet es sich dann in einem Unterverzeichnis des Verzeichnisses /uploads (unter wp-content). Da musst du dann selber schauen, wie das unter /uploads weiter organisiert ist – ist aber nicht schwer zu finden!

    Der Pfad zum Bild könnte dann etwa heißen

    http://www.domainname.de/blogverzeichnis/wp-content/uploads/2010/05/deinbild.jpg

    Ist aber bei den verschiedenen Installationen verschieden, je nachdem, wie du das Uploaden angewiesen hast.

  19. @Claudia

    Lieben Dank für die Antwort. Aber warum ist das Bild so „verschoben“?

    http://www.wfinanz.de/charts/langfristcharts-der-oelpreise-in-usd-und-eur

    Muss ich das Chart verkleinern, als wenn ich es in einem Artikel mit der maximalen Größe verwende?

  20. „Muss ich das Chart verkleinern, als wenn ich es in einem Artikel mit der maximalen Größe verwende?“

    Ok, das liegt am Theme.

  21. @Tomas: das liegt alleine daran, dass das für Kommentare vorgesehene Feld ein wenig enger ist als der Chart. Du kannst das ja auch gut sehen, da der Kommentarbereich einen grauen Hintergrund hat. SCHREIBT man da rein (was ja die übliche Nutzung ist), braucht es auch noch einen Innenrand, damit die Zeilen/Buchstaben nicht am linken Rand kleben. An diesen Rand muss sich auch das Bild halten und ragt dann einfach rechts weiter raus, wenn es breiter ist. Da hilft nur um ca. 10 bis 15 Pixel verkleinern oder so lassen: es sieht fast aus wie Absicht. :-)

    Warum setzt du das Chart eigentlich nicht noch in den Artikel?

  22. Danke, sehr gute Hilfe. Gruß, Enrico

  23. Hallo,Schöner Beitrag. Interessiere mich für kreatives Arbeiten und habe einen hochwertigen Shop für Stoffe online kaufen gefunden. Falls ihr mal vorbeischauen wollt, hier der die Adresse: http://my-stoffe.de/gruppe_7! Habe in dem Online-Shop bestellt und gute Erfahrungen gemacht. Schnelle Lieferung und guter Service!

  24. いやしかし今となってはだがこの人のセンターが一番だったな…