WordPress Grundlagen - Bilder einfügen und bearbeiten

WordPress Grundlagen – Bilder einfügen und bearbeiten

Im heutigen Artikel über WordPress Grundlagen dreht sich alles um den Schmuck unseres WordPress Blogs, die Bilder und Grafiken.

Im Artikel WordPress Grundlagen – einen Artikel erstellen habe ich bereits kurz erklärt wie ihr ein Bild von eurem Computer in einen Artikel einfügt.

Im Folgenden fasse ich den Ablauf noch einmal übersichtlich zusammen und ergänze ihn an der ein oder anderen Stelle.

Ein Bild in den Text einfügen

Positioniert den Cursor an der Stelle im Text, egal ob bei einem Artikel oder einer WordPress-Seite, wo das Bild eingefügt werden soll.

Hinter Hochladen/Einfügen auf das Symbol für Bild hinzufügen klicken.

Im nun erscheinenden Pop-Up Fenster unter dem ersten Reiter Vom Computer (Reiter sollte bereits aktiv sein) den Button in der Fenstermitte [Dateien auswählen] drücken.

Ein Bild einfügen

Das Pop-Up Fenster sieht jetzt in der neuesten WordPress Version 3.3.1 im Vergleich zu einer anderen Version, die ich im Artikel WordPress Grundlagen – einen Artikel erstellen nutzte, etwas anders aus.

Ein Browserfenster öffnet sich und ihr könnt zu eurer Bilddatei auf eurem PC navigieren und das gewünschte Bild auswählen. Durch Klick auf [Öffnen] wird das Bild hochgeladen.

Bild einfügen per Drag and Drop

Eine andere Möglichkeit ein Bild zu laden ist das Bild per sogenanntem Drag and Drop die mit einer gestrichelten Linie eingerahmten Fläche im Fenster zu ziehen.

Ein Bild ins Fenster ziehen

Drag and Drop bedeutet: Die Datei anklicken, mit gedrückter Maustaste ziehen und anschließend am Zielort die Maustaste loslassen um die Datei abzulegen.

Das Bild wird nun im Pop-Up Fenster angezeigt und es werden weitere Optionen sichtbar.

Rechts neben dem Bild befinden sich die Bildinformationen wie der Dateiname, der Dateityp, das Upload-Datum und die Bildgröße in Pixel (Breite x Höhe).

Die Angaben zum Bild und der Button Bild bearbeiten

Unter dem Bild befindet sich der Button [Bild bearbeiten], dahinter verbergen sich weitere Funktionen, mit denen das Bild bearbeitet werden kann.

Das Bild bearbeiten

Die sieben Buttons über dem Bild:

Das Bild bearbeiten

Ausschnitt:

Der Button kann zuerst nicht gedrückt werden. Um einen Ausschnitt des Bildes zu erzeugen, einfach in das Bild klicken und mit gedrückter Maustaste ziehen, das Bild wird abgedunkelt und durch das Klicken und Ziehen wird ein Rechteck aufgezogen, das den Bildausschnitt umrahmt.

Anschließend die Maustaste loslassen. Die Fläche in dem Rechteck ist heller. Wenn ihr mit dem Ausschnitt noch nicht zufrieden seid, kann der Rahmen an den kleinen Quadraten verschoben und somit der gesamte Ausschnitt geändert werden.

Die Auswahl des Bildausschnitts und Hilfe-Link

Rechts in der Box Bildausschnitt befindet sich ein Hilfe-Link, durch den noch weitere Erläuterungen zum Bildausschnitt ausgeklappt werden können. Erneutes klicken auf (Hilfe) klappt die Erläuterungen wieder ein.

Seid ihr zufrieden mit dem Bildausschnitt, klickt auf den Ausschneiden-Button um das Rechteck auszuschneiden.

Gegen den Urzeigersinn drehen / Mit dem Urzeigersinn drehen:

Mit dem zweiten und dritten Button wird das Bild um 90° gegen den Urzeigersinn bzw. um 90° mit dem Urzeigersinn gedreht. Erneutes Drücken dreht das Bild 90° weiter in die entsprechende Richtung.

Vertikal kippen:

Der vierte Button spiegelt das Bild vertikal. Wiederholtes Drücken spiegelt das Bild noch einmal, wobei wieder das Ausgangsbild entstehen würde.

Horizontal kippen:

Der fünfte Button spiegelt das Bild horizontal. Auch hier bewirkt wiederholtes Drücken des Buttons, dass wir wieder das Ausgangsbild hätten.

Widerrufen:

Der sechste Button macht den letzten Schritt rückgängig, das funktioniert natürlich nur, wenn schon etwas geändert wurde.

Wiederholen:

Mit dem siebten Button kann man wieder einen Schritt vor gehen – aber erst nachdem ein Schritt rückgängig gemacht wurde.

Bild skalieren

Auch Bild skalieren ist ein Link, durch den eine nähere Erläuterung auf- und zugeklappt werden kann.

Das Bild skalieren

Wollt ihr das Bild skalieren, einfach in das erste Kästchen für die Breite oder in das zweite Kästchen für die Höhe klicken und die gewünschte Breite bzw. Höhe eingeben. Der jeweils andere Wert passt sich automatisch proportional an. Anschließend den Button [Skalierung] drücken und das Bild wird neu berechnet.

Miniaturbild Einstellungen

Auch hier verbirgt sich ein Hilfetext unter dem Link (Hilfe). In dieser Box kann angegeben werden auf welche Bilder der Beschnitt des Bildes angewendet werden soll.

Die Miniaturbild Einstellungen

Dafür gibt es die drei Möglichkeiten: Alle Bildgrößen, Miniaturbild, Alle Größen außer dem Miniaturbild

Titel und weitere Angaben

Titel, Alternativtext, Beschriftung, Beschreibung, URL, Ausrichtung und Größe des Bildes

Titel, Alternativtext, Beschriftung, Beschreibung, Ausrichtung und Größe des Bildes

Titel

Am Bildtitel könnt ihr das betreffende Bild in eurer Bilddatenbank, der Mediathek wiedererkennen. Standardmäßig wird hier der Name der Bilddatei verwendet. Dieser Name erscheint auch in der URL des Bildes. Ist der Name der Datei nicht gut gewählt worden, solltet ihr den Titel jetzt ändern.

Alternativtext

Dieser Alternativtext ist wichtig für barrierefreie Websites. Das bedeutet, sehbehinderte Leser bekommen den Text von Screenreadern vorgelesen und dort, wo sich ein Bild befindet, kann der Alternativtext zum Bild vorgelesen werden, so erhalten diese Besucher zumindest die Information, was für ein Bild sich dort befindet.

Beschriftung

Der Text, der hier eingegeben wird erscheint anschließend unter dem Bild.

Beschreibung

Die Beschreibung des Bildes ist nur für interne Zwecke. Sie soll ebenfalls die Übersicht über die Bilder in der Mediathek erleichtern.

URL

Hier wird die automatisch von WordPress dem Bild zugewiesene URL angezeigt.

Mit den Buttons direkt darunter kann eingestellt werden, auf was das Bild verlinkt werden soll.

[Keine]: Das Bild wird ohne Link eingefügt, das bedeutet, das Bild hat keine Funktion als Link, es ist nicht anklickbar.

[Datei-URL]: Das Bild verlinkt auf die angezeigte URL, das bedeutet, wenn das Bild angeklickt wird, wird die originale Bilddatei aufgerufen. Diese Einstellung ist sinnvoll wenn das Bild im Text verkleinert dargestellt wird, dann kann es so durch Anklicken vergrößert werden.

[URL des Anhangs]: Das Bild wird mit einer Seite verlinkt. Wird das Bild angeklickt, wird es auf dieser extra Seite des Blogs separat angezeigt.

Ausrichtung

Hier gibt es vier Optionen für die Ausrichtung des Bildes. Bei Links (Linksbündig), Zentriert und Rechts (Rechtsbündig) wird das Bild jeweils vom Text umflossen.

Bei der Option Keine wird kein Text links und/oder rechts vom Bild angezeigt.

Größe

Hier werden bis zu vier Auswahlen für die Bildgröße angeboten.

Das Miniaturbild hat immer eine Größe von 150 x 150 Pixel. Die Vollständige Größe ist immer die Größe des Ausgangsbildes. Die anderen beiden Größen Mittelgroß und Groß richten sich nach der Größe des Ausgangsbildes und können deshalb bei verschiedenen Bildern unterschiedlich sein.

Wenn das Ausgangsbild recht klein ist, zum Beispiel eine Größe von 300 x 200 Pixel hat, stehen nicht alle Größen zur Auswahl. Ist eine Auswahl nicht möglich, dann wird die Größe in Pixel auch nicht hinter der entsprechenden Auswahl angezeigt. Bei einer Größe von 300 x 200 Pixel steht zum Beispiel nur das Miniaturbild und die Vollständige Größe zur Verfügung.

Der letzte Schritt

Als letzter Schritt wird der Button [In Artikel einfügen] gedrückt. Das Pop-Up Fenster schließt sich daraufhin und das Bild wurde in den Text eingefügt. Das Bild ist auch gleichzeitig über die Mediathek zu finden.

Zur Mediathek kommen wir in einem weiteren Artikel über die WordPress Grundlagen.

About The Author

Diana Ludwig

Webdesignerin, Pinselschwingerin, Bloggerin und Studentin der Medieninformatik. Mein Steckenpferd ist das freie Open Source 3D Programm Blender, über das ich auf Blender-Tutorial schreibe. Du findest mich auch auf Google+ oder abonniere unseren RSS-Feed.

13 Comments

  • Sven

    9. April 2013

    Vielen Dank für diesen Artikel. An dieser Funktion verzweifle ich aber gerade.
    Ich möchte ein Bild in einen Slider einfügen, der gleichzeitig ein Stückchen unterhalb, die Miniatur des Bildes anzeigt. Verschiebe ich den Ausschnitt wie oben beschrieben, wird mir das neu entstandene Miniaturbild zwar in der Mediathek richtig angezeigt. Wenn ich es aber auf einer Seite als Beitragsbild einfüge, erhalte ich auf der Webseite den „alten“ Bildausschnitt???

  • Diana Ludwig

    9. April 2013

    Hallo Sven,

    ich tippe als erstes auf ein Cache-Problem. Leere einmal den Browsercache. Falls Du ein Cache-PlugIn für deine WordPress-Installation nutzt, dann leere den Cache auch in WordPress.
    Wenn das nicht hilft, sag einfach nochmal Bescheid. Ich drücke die Daumen 🙂

    Viele Grüße
    Diana

  • Vivien

    29. Juni 2013

    Ich habe eine Frage! Wenn ich jmd meinen blog als Link schicke zb bei facebook, wird neben meiner blogadresse immer das große W von wordpress gezeigt. ich würde da gern ein bild meiner wahl passend zu meinem blog einfügen. wie kriege ich das hin?

  • Diana Ludwig

    29. Juni 2013

    Hallo Vivien,

    wenn Du bei Facebook einen Link zu deinem Blog postest, dann sucht Facebook automatisch nach Bildern auf der verlinkten Seite. Werden Bilder gefunden, dann kannst Du aus diesen Bildern mit Hilfe der kleinen Pfeilbuttons auf Facebook eines auswählen.
    Wenn Du z.B. in deinen Blogartikeln Artikelbilder eingefügt hast, kannst Du daraus eines für den Facebook-Post nehmen.
    Ich hoffe, ich konnte dir damit helfen 🙂

    Viele Grüße
    Diana

  • Franzi

    10. Dezember 2014

    Hallo Diana,

    gerade habe ich einen neuen wp post fertiggetsellt – allerdings erscheint alles in umgekehrter Reihenfolge und die Bilder, die ich im laufenden Text eingefügt habe werden komplett davon losgelöst angezeigt. Hast du eine Idee, was ich tun kann? Vielen Dank schon einmal 🙂

    Viele Grüsse
    Franzi

  • Diana Ludwig

    11. Dezember 2014

    Hallo Franzi,

    das klingt ja sehr abenteuerlich, was Du da beschreibst. So eine Art Fehler ist mir noch nicht untergekommen.

    Leider habe ich spontan keine konkrete Idee, woran das liegen könnte.

    Meine Standard-Vorgehensweise in so einem Fall wäre ein Ausschlussverfahren wie folgt:
    Falls Du ein Cache-Plugin installiert hast, leere den Cache in WordPress und leere auch deinen Browsercache.
    Deaktiviere alle Plugins und schaue, ob es jetzt funktioniert. Wenn ja, ist ein Plugin schuld, dann aktiviere deine Plugins wieder nacheinander und schaue, wann der Fehler auftritt.

    Wenn es bei deaktivierten Plugins immer noch nicht funktioniert, ist vielleicht dein WordPress-Theme schuld. Schalte am besten kurzfristig auf ein Standard-WordPress Theme um, um das zu testen (Die Themes, die bei der Installation von WordPress schon dabei sind).

    Bei jedem Schritt solltest Du die Seite mit dem Beitrag mit Strg + F5 neu laden, damit Veränderungen auch richtig angezeigt werden.
    Ich nehme übrigens dazu nicht den Chrome, denn der hat mitunter einen so starken Cache, dass er sich manchmal weigert ordentlich zu aktualisieren.

    Ich hoffe, das hilft dir weiter und Du findest bald die Ursache 🙂

    Viele Grüße
    Diana

  • Franzi

    22. Dezember 2014

    Hallo Diana,

    vielen Dank für deine Tips – zum Glück ging es einfacher: habe einfach einen komplett neuen Post aufgesetzt, den Text reinkopiert etc., hat super geklappt.

    Viele Grüsse
    Franzi

  • Diana Ludwig

    24. Dezember 2014

    Hallo Franzi,

    super, dass es so einfach geklappt hat 😀

    Frohe Weihnachten und viele Grüße
    Diana

  • Carsten

    27. Februar 2015

    Hallo,
    ich möchte gerne Icons auf den Seiten einfügen die quasi als Button dafür dienen um einen hinterlegten Text zu öffnen. Haben Sie da eine Idee wie man das machen kann? Sorry bin noch totaler Anfänger.

    Viele Grüsse, Carsten

  • Diana Ludwig

    28. Februar 2015

    Hallo Carsten,

    ich denke, das was Du suchst, ist eine Spoilerfunktion.

    Es gibt einige WordPress-Plugins, die diese Funktion anbieten.
    Hier der Link zu den Suchergebnissen zum Suchbegriff Spoiler:

    https://wordpress.org/plugins/tags/spoiler

    Der BBSpoiler scheint auf den ersten Blick recht simpel in der Handhabung zu sein:

    https://wordpress.org/plugins/bbspoiler/screenshots/

    Am besten einfach etwas stöbern und testen, damit Du das passende Plugin für dich findest 🙂

    Viele Grüße und viel Erfolg 🙂

    Diana