Claudia Klinger am 10. August 2007

Bilder einbinden mit WordPress – Teil 1

Dieses Tutorial für Einsteiger enthält Informationen und Schritt-für-Schritt-Anleitungen zu folgenden Themen:

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;
5. Bilder vom Text umfließen lassen (folgt in Teil 2);
6. Randabstände zum Text verbessern (folgt in Teil 2).


Fotolia

1. Für wen ist das Tutorial nützlich?


Kurz gesagt: für echte Einsteiger, die nicht schon 1000 Jahre Webseiten gestalten und mit der Maus in der Hand geboren sind! Zur meist verbreiteten Blogsoftware WordPress gibt es zwar jede Menge Tipps und Tricks zur Installation, zur Konfiguration, zum Design („Theme“) und zum Ausbau mit Modulen. Sucht man allerdings nach Schritt-für-Schritt-Anleitungen für die Basis-Funktionen, sieht es schlecht aus. Gestandene, in ihrer jeweiligen Profession kompetente und erfahrene Frauen und Männer stehen schon mal ratlos vor mancher Eingabemaske und können sich keinen Reim machen auf eine Auswahl wie etwa „Link zu ->Datei ->Seite ->keine“.

Da ich als Webdesignerin für meine Auftraggeber/innen zunehmend WordPress einsetze, um die übliche Selbstdarstellungs-Website „selbst änderbar“ zu machen und die Blogfunktion zusätzlich zum Publizieren im eigenen Fachgebiet anzubieten, bin ich häufig mit den Erklärungsbedürfnissen konfrontiert, die ECHTE Neueinsteiger/innen mit den Basisfunktionen haben. Dieser Artikel soll dem Mangel abhelfen und mir in Zukunft manche Erläuterungs-Mail ersparen.

nach oben

Welche Bilder dürfen eingebunden werden?

Grundsätzlich nur solche, an denen man selbst die Bildrechte besitzt, bzw. das Einverständnis des Rechte-Eigners eingeholt hat.

  • Das Urheberrecht haben regelmäßig die jeweiligen Fotografen, das ausschließliche Nutzungsrecht oft auch deren Verwertungsfirmen und Verlage.

    Zur Vertiefung und für spezielle Fragen siehe die Seldom asked Questions (SAQ) von Johannes Röhnelt

  • Die auf dem Bild erkennbaren Personen haben das Recht am eigenen Bild und müssen ebenfalls mit einer Veröffentlichung einverstanden sein. Ausgenommen sind Personen der Zeitgeschichte und Bilder von Personen, die auf Straßen und Plätzen, sowie bei Veranstaltungen und öffentlichen Umzügen nur „beiläufig“ mit auf dem Bild sind (eine Gruppe Touristen vor dem Brandenburger Tor ist kein Problem, ein Zoom auf ein besonders hübsches Mädel aus dieser Gruppe wäre NICHT erlaubt!).

    Ausführliche Informationen zum Bildnis- und Persönlichkeitsrecht gibt’s auf bildnisrecht.de

  • Handelt es sich um ein künstlerisches Werk im öffentlichen Raum (Statue, Plakat, Architektur), fällt die Ablichtung und Veröffentlichung in Deutschland unter die Panoramafreiheit und ist erlaubt, sofern von öffentlich zugänglichen Plätzen aus fotografiert wird und sich das Werk „bleibend“ im öffentlichen Raum befindet (Christos Reichstagsverhüllung war nicht bleibend!).

All diese Rechte sind in jedem Fall zu beachten, ganz egal, woher das Bild, das man einbinden möchte, stammt. Vorsicht geboten ist auch bei Bildern aus öffentlichen Datenbanken, denn man kann ja nicht wissen, ob derjenige, der sie dort eingestellt hat, auch tatsächlich die Rechte zur Veröffentlichung und Weitergabe besitzt.

nach oben

Bilder vorbereiten: Format, Auflösung, Größe

Zum Format:

Nicht alle Formate, die von Digitalkameras bzw. Bildbearbeitungssoftware erzeugt werden, sind im Web verwendbar, sondern ausschließlich die Formate .jpg, .gif und .png.

  1. Das JPG-Format hat sich als Standardformat für Fotos durchgesetzt. Es komprimiert die Daten je nach Einstellung mehr oder weniger, wobei hohe Komprimierungsraten die Bildqualität sichtbar verschlechtern.
  2. GIF ist nach wie vor für Logos und andere Grafiken in Gebrauch . Es komprimiert die Daten verlustfrei, ist jedoch auf 256 Farben beschränkt.
  3. Das als Verbesserung des GIF-Formats entwickelte PNG wird nicht von allen Browsern problemlos angezeigt, weshalb ich (noch) davon abrate.

Das JPG-Format mit einer mittleren Komressionsrate wird für Einsteiger in den meisten Fällen die richtige Wahl sein. Wichtig: Das Bild erst nach der Bearbeitung als .jpg abspeichern, da jeder Abspeichervorgang erneut die Daten komprimiert, das Bild also jedes Mal an Qualität verliert.

Die Auflösung

„DPI“ (engl.: dots per inch = Punkte pro Zoll) meint die Anzahl der Bildpunkte, aus denen sich ein Bild zusammen setzt. Druckerzeugnisse benötigen je nach Qualität des Drucks Bilddateien mit Auflösungen zwischen 150, 300 DPI und höher. Auf Bildschirmen genügen 72 DPI, mehr werden nicht angezeigt, selbst wenn wir ein Bild mit 600 DPI einbinden – allerdings verlängert sich die Ladezeit dadurch massiv.

Also: in der Bildbearbeitung das Bild auf 72 DPI reduzieren, doch am besten erst dann, wenn man den passenden Bildausschnitt gewählt hat.

Die Bildgröße

Wie groß ein Bild für ein Blog sein soll, hängt von der Breite der Spalte ab, die zur Verfügung steht, von der Ladezeit, die man Surfern ohne DSL (es gibt sie noch!) zumuten will, und von der gewünschten optischen Wirkung.

Hier im Webwriting-Magazin dürfte ein spalten-breites Bild 500 Pixel breit sein, im wilden Gartenblog sind es 450 Pixel: man sieht an diesem Beispiel, wie dominant ein solch großes Bild wirkt.

altes Logo des Webwriting-MagazinsWenn das Bild etwas bescheidener daher kommen und noch vom Text umflossen werden soll, wähle ich eine Größe mit maximal der Hälfte der Spaltenbreite oder kleiner. Dann ist nämlich halbwegs gesichert, dass der verbleibende Platz für den umfließenden Text noch groß genug ist, um nicht mangels Wort-Trennung komische Löcher im Textfluss zu verursachen.

nach oben

Bilder hochladen und einbinden

Zum Start gehen wir vom einfachsten Fall aus: ein nahezu spaltenbreites Bild ist vorbereitet und soll unterhalb eines Textabschnitts im Blogposting erscheinen. So wie dieses hier, das die Bildupload-Maske unterhalb der Texteingabe im Admin-Bereich zeigt:

Bild-Upload-Eingabe WordPress

Wie man auf dem Bild sieht, ermöglicht die erste Eingabezeile die Auswahl der Bilddatei, die hochgeladen werden soll.

  1. Ein Klick auf die graue Taste „durchsuchen“ eröffnet in einem PopUp-Fenster den Blick auf die eigene Festplatte, wo man sich ins Verzeichnis schaltet, in dem das Bild liegt und es mit einem weiteren Mausklick auswählt.
  2. Mit „öffnen“ (rechts unten im PopUp) fügt man den Dateinamen (hier bildupload.jpg) in die Eingabezeile „Datei“ ein.
  3. Es empfiehlt sich, dem Bild auch einen Titel mitzugeben
  4. Ein Klick auf „Upload“ lädt das Bild auf den Server.

Wir schauen jetzt auf die Eingabe-Maske für die weitere Bearbeitung:

Bild-Upload-Eingabe WordPress - bearbeiten

Wir wählen nun die Einbindung in „vollständiger Größe“ und verzichten mittels der Auswahl „keine“ darauf, das Bild mit irgend etwas zu verlinken. Ein letzter Klick auf die Taste „zum Editor senden“ bindet das Bild in die Texteingabe-Maske ein – und zwar an die Stelle, an der der Cursor gerade steht!

De spaltenbreite Bilder in einem eigenen Absatz stehen sollten, prüfen wir nochmal, ob der letzte Absatz mit der Enter-Taste beendet wurde: der Cursor sollte am linken Rand stehen, bevor das Bild mittels „zum Editor senden“ dort landet. Sobald es übertragen ist, schließt ein weiterer Klick auf die Enter-Taste den Absatz, in dem das Bild nun alleine steht.

Nun kann man das Posting „veröffentlichen“ oder zunächst nur „speichern“, um in der Vorschau (= Link rechts oberhalb der Texteingabe) zu sehen, ob alles gut aussieht. Wer nun mit der Maus über das eingebundene Bild fährt, wird vielleicht die Anzeige des Titels vermissen.Um diesen sichtbar zu machen, müssen wir (zumindest in der WordPress Version 2.2.1) das Bild in der Texteingabe markieren, dann auf das Bildsymbol (mit Bäumchen) am oberen Rand klicken und im nun aufspringenden Pop-Up „Bild einfügen/bearbeiten“ noch einmal „aktualisieren“:

PopUp Bild einfügen / bearbeiten

Nach einem letzten „Speichern“ in der nun wieder sichtbaren Text-Eingabe wird der Titel beim MouseOver nunmehr korrekt angezeigt.

nach oben

Hier gehts zum Teil 2 dieses Tutorials mit weiteren Feinheiten in Sachen „Bilder einbinden“.

Diskussion

Kommentare abonnieren (RSS)
29 Kommentare zu „Bilder einbinden mit WordPress – Teil 1“.

  1. Im 2. Teil würde ich auf jeden Fall auch FTP Upload (finde ich komfortabler) und das Auslagern der Bilder auf flickr-Accounts berücksichtigen.

  2. Uber Google habe ich Ihnen gefunden weil ich als WordPress Anfanger ein Problem hatte mit Photos einbinden. Sie haben mir weiter geholfen und ich warte jetzt mit Spannung auf Ihre nächste Tutorial.

  3. Bilder en blog…

    “Ein Bild sagt mehr als tausend Worte.” So lautet ein gern und viel zitiertes, angeblich chinesisches, Sprichwort. Wo bei einem geschriebenen Text der Inhalt erst durch sequenzielles Lesen nach und nach erfaßt werden kann, gelingt dies bei…

  4. […] WebWriting-Magazin: WordPress-Bilderlehrgang Teil 1 […]

  5. Vielleicht kannst Du mir/uns auch sagen, wie man Bilder in den Rss-Feed bekommt?

    Danke schon mal.

  6. Ein interessanter Artikel. So weit ich das sehe funktioniert das Uploaden im IE nur mit der Maus. Mit der Tastatur geht’s im IE nicht, sondern nur im Firefox.

  7. Danke für dein Tutorial. Hab das eine oder andere für meinen WordPress-Blog anwenden können. Weiter so!

  8. Hey danke für den guten Artikel. Jetzt krieg auch ich es hin unseren Firmenblog mit Bildern zu füllen.

  9. Jau, Danke für das Tutorial.
    Ich hatte Probleme bei den Bildern mit der Ausrichtung, am Ende lag es am CSS Style/Theme. Tipp: nicht verzweifeln wenn bei den Bildern nicht alles 100% klappt.

  10. nach dem schritt „upload“ war bei mir ende. ich sehe kein bild auf der linken seite. stattdessen steht links der name des bildes wie bei einem link. vielleicht liegts daran, dass ich bei strato wordpress als kunde nutze?
    ich kann auch nur bei den statischen seiten etwas hochladen. bei den artikeln gibt es diese funktion anscheinend nicht. please help.

  11. hallo
    hab mal ne frage: also das einbinden von fotos in beiträgen/artikeln ist ja soweit kein problem. nur habe ich seit kurzem das kleine problem das die fotos zwar in den beiträgen auftauchen aber auf der kompletten beitragsseite wo alle angezeigt werden taucht kein bild auf…..nur der text….wie gesagt erst wenn ich dann den jeweiligen beitrag anklicke taucht der text mit bild auf ….hat jemand ne lösung für mein problem…..

    würde mich echt freuen da ich schon einige stunden auf der suche bin

    gruss

  12. Du solltest halt mal deine Website angeben, dann könnte man mal schauen.. :-)

  13. Schon ziemlich tiefgehend für ein Anfänger Tutorial :)
    Dankeschön.

  14. Super, vielen Dank für Deine Mühe. Genau danach habe ich gesucht und nur umständliche bzw. gar keine Anleitungen gefunden. Merci!

  15. Danke, das kann ich meinen Praktikanten zum lesen geben, wenn die sich mal wieder das erste Mal mit WP beschäftigen sollen.

  16. Hallo, auch ich sage: vielen Dank.
    Die Infos haben mir bei dem Relaunch sehr geholfen. Gruss

  17. Hej,

    ich hab mich grad bei einem Blogservice angemeldet, der WordPress verwendet, und stehe wie der Ochs vorm Berg. Deine Erklärungen sind extrem hilfreich – aber bei mir sieht das Fenster zum Bilderhochladen überhaupt nicht so aus wie hier. Ich bin ratlos.
    Ich kann ein Bild auswählen und hochladen, dann habe ich aber nur drei Punkte zur Auswahl: Datei auswählen / Galerie (da ist dann das Bild drin, das ich aber weder anschauen noch sonst was kann) und Mediathek. Es gibt keine Buttons, ich kann das hochgeladene Bild nicht einfügen, an den Editor senden oder irgendwas damit machen, ganz unten steht nur Alle Änderungen speichern.
    In den vielen Foren finde ich dazu auch nichts. Kannst du mir vielleicht helfen? DANKE!!!

  18. Klasse Tutorial! Sollte als Referenz auf diesem Gebiet weiterempfohlen werden.

  19. Kann mich nur anschliessen ..einige gute Tipps erhalten…Danke

  20. Danke für diese Infos – aber wie ich lese sind alle auch ein bischen am kämpfen. Versuche mich auch gerade an einem Blog und meine Bilder werden auch noch nicht sichtbar – aber das wird schon!

  21. Zur Frage von Mareike (17.)

    Ich hab festgestellt, dass man zwischen einer Flash-Maske und einer Klassischen-Maske (für den Upload) wählen kann (es hat eine Option innerhalb der Maske zum wechseln). Bei der Flash-Maske waren bei mir auch nur die von Mareike beschriebenen Optionen verfühgbar. Bei der Klasischen-Maske hats dann wunderbar funktioniert…

  22. Danke für diese gute Übersicht/ Zusammenfassung. Es ist somit wieder ein Stück einfacher mir WordPress zu arbeiten.

  23. Gott sei dank hat sich der Bilder Upload in den neuen WordPress Versionen stark verbessert. In den ersten Versionen von WordPress war diese Upload-Funktion schrecklich.

  24. Kann ich nur bestaetigen!

  25. Kenne ich…

  26. Hilfe
    bitte Lenas Hompage anschauen und uns
    helfen diese schöner und ansprechender
    zugestallten.

  27. Danke! Ich wurschtele mich gerade durch die Blogeinrichtung und bin froh, wenn Google einem solche auf den Punkt gebrachten Anleitungen präsentiert. Besser als bei wordpress selber

  28. Hallo,

    was spricht denn dagegen, das Bild direkt per drag and drop in das Textfeld zu ziehen? Ist doch einfacher als die hier beschriebene Methode, oder?

    Michael