• Anleitung für Autoren
• Einstieg ins CMS
• Benutzereinstellungen
• Texte schreiben und verwalten
• Kommentare und Trackbacks
• Bilder hochladen und einbinden
• Ton hochladen und einbinden

Bilder hochladen und einbinden

Stand: 28.11.07, 10:45 Uhr

• Vorbereitung
• Technische Bedingungen des Bildes
• Bild hochladen
• Bild in eigenem Absatz einbinden
• Bild mit Textumfluss einbinden
• Bildlegenden
• Kommentare
• Kommentieren

Vorbereitung

Bilder in Beiträgen müssen zunächst einmal in einem Zustand vorhanden sein, der bestimmte Voraussetzungen erfüllt. Wenn Sie mit Bildern arbeiten wollen, sollten Sie wenigstens über Grundkenntnisse der Bildbearbeitung verfügen, WordPress kümmert sich darum nicht bzw. nur sehr begrenzt.

Die Einbindung eines Bildes läuft in zwei Schritten: erst wird das Bild auf den Server geladen, danach wird es an der gewünschten Stelle im Beitrag eingesetzt. Theoretisch können Sie auch Bilder einbinden, die auf einem anderen Server liegen (z. B. Ihrem eigenen), aus vielerlei Erwägungen würden wir es allerdings begrüßen, wenn Sie davon absehen würden.

Die Anzahl der Bilder ist nicht begrenzt, weder pro Beitrag noch insgesamt. Im Hinblick auf das Layout haben Sie zwei Möglichkeiten:

• Das Bild steht in einem eigenen Absatz und nimmt maximal Breite der Hauptspalte (400 Pixel) ein. Diese Möglichkeit ist am einfachsten umzusetzen und sieht meistens am besten aus.
• Sie können ein Bild auch von Text umfließen lassen. Das Bild kann rechts oder links stehen und sollte maximal die halbe Breite der Textspalte einnehmen (200 Pixel). Bitte beachten Sie: Diese Möglichkeit lässt sich nur nutzen, wenn Sie von Hand ein wenig HTML eintragen, zudem erfordern Bildumflüsse ein gewisses Auge fürs Layout.

Technische Bedingungen des Bildes

• Als Dateiformate sind ausschließlich jpg (jpeg), gif oder png zulässig. Der Versuch, andere Dateiformate hochzuladen, mündet in eine Fehlermeldung.
• Das maximale Speichervolumen beträgt 300 KB. Für ein fachgerecht aufbereitetes Bild im Ausgabelayout ist dieser Wert mehr als reichlich bemessen. Auch der Versuch, Bilder hochzuladen, die mehr als 300 KB umfassen, endet in einer Fehlermeldung. Achten Sie trotz des Maximalwertes bitte auf eine sinnvolle Balance zwischen Bildqualität und Speicherbedarf – nicht jedem Besucher steht eine schnelle Leitung zur Verfügung.
• Bilder, die nicht von Text umflossen werden, dürfen maximal 400 Pixel breit sein.
• Bilder, die von Text umflossen werden, dürfen maximal 200 Pixel breit sein, sind sie breiter, werden sie gnadenlos beschnitten.
• Die Auflösung beträgt in allen Fällen 72 dpi.
• Der Dateiname darf keine Leerzeichen, Umlaute, ß und Sonderzeichen enthalten.

Bild hochladen

Unter der Texteingabe befindet sich das Feld, mit dem Sie Bilder hochladen und einbinden können:

• Klicken Sie auf Durchsuchen …
• Das gewohnte Dialogfenster Ihres Computers öffnet sich, wählen Sie das gewünschte Bild aus.
• Der Name und der Pfad des Bildes erscheint im Eingabefeld Datei, lassen Sie diesen Eintrag wie er ist.
• Geben Sie unter Titel eine kurze, möglichst aussagekräftige Beschreibung des Bildinhalts an. Machen Sie diese Angabe bitte immer, sie gehört zu einer formal korrekten Website. Achtung: Wegen eines kleinen WordPress-Fehlers sollten Sie im Titel Umlaute, ß etc. vermeiden, diese Zeichen werden nicht korrekt umgewandelt.
• Das Feld Beschreibung können Sie leer lassen, es wird nirgends berücksichtigt.

Wenn Sie bis hier alles richtig gemacht haben, sollte es ungefähr so aussehen:

• Klicken Sie jetzt auf auf Upload
• Abhängig von der Geschwindigkeit Ihrer Internetverbindung kann der Upload etwas dauern.
• Wen Ihr Bild auf dem Server angekommen ist, sehen Sie das hier:

Wenn Sie auf Durchsuchen klicken, erscheinen alle Bilder, die Sie zu diesem Beitrag hochgeladen haben, in Form eines automatisch erzeugten Vorschaubildes. Wenn Sie auf Alles durchsuchen … klicken, erscheinen alle Bilder, die Sie seit Beginn hochgeladen haben, unabhängig vom Beitrag. Theoretisch könnten Sie damit ein Bild also auch in mehreren Beiträgen verwenden.

Um ein Bild einzubinden, bringen Sie im Texteingabefeld zunächst den Cursor an die Stelle, an der das Bild erscheinen soll.

• Kreuzen Sie im Normalfall unter »Anzeigen« Full Size an und keine bei »Link to«.
• Klicken Sie auf Editor senden, dann wird das vollständige Bild-Tag an der Cursor-Position im Text eingesetzt:

Es ist einerlei, ob sie bei mehreren Bilden erst alle hochladen und sie danach einbinden, oder ob Sie abwechselnd hochladen und einbinden.

Das vollständige Bild-Tag ist so aufgebaut:

<img src="http://www.stuttgart-blog.net/wp-content/media/ihr_bildname.jpg" alt="Ihr Titel" />

Bild in eigenem Absatz einbinden

Für Bilder, die einen eigenen Absatz einnehmen sollen, gilt dasselbe wie für Text: eine Leerzeile zum vorhergehenden Absatz, eine Leerzeile zum nachfolgenden (falls es solche gibt). Komplett also so:

… letzte Zeile des vorhergehenden Absatzes

<img src="http://www.stuttgart-blog.net/wp-content/media/ihr_bildname.jpg" alt="Ihr Titel" />

Erste Zeile des folgenden Absatzes

Wenn Sie sich daran halten, wird alles wunderbar umgewandelt.

Bild mit Textumfluss einbinden

Dass ein Bild von Text umflossen werden soll, kann niemand ahnen, also müssen Sie es ihm sagen. Dazu müssen Sie ausnahmsweise von Hand etwas HTML um das Bild-Tag herumschreiben, und zwar ein <div> für das wir festgelegt haben, dass es umflossen wird. Falls das Bild links stehen soll:

<div class="bild-links">Hier kommt das Bild-Tag rein</div>

Und analog dazu, falls es rechts stehen soll:

<div class="bild-rechts">Hier kommt das Bild-Tag rein</div>

Zusammen mit dem Bild-Tag also wie folgt (achten Sie bitte auch hier unbedingt auf Leerzeilen):

… letzte Zeile des vorhergehenden Absatzes

<div class="bild-links">
<img src="http://www.stuttgart-blog.net/wp-content/media/ihr_bildname.jpg" alt="Ihr Titel" />
</div>

Erste Zeile des folgenden Absatzes

oder so:

… letzte Zeile des vorhergehenden Absatzes

<div class="bild-rechts">
<img src="http://www.stuttgart-blog.net/wp-content/media/ihr_bildname.jpg" alt="Ihr Titel" />
</div>

Erste Zeile des folgenden Absatzes

Wichtig: Das HTML darf nicht irgendwie so ähnlich lauten, sondern Sie müssen es genau so eingeben. Achten Sie insbesondere auf die Anführungszeichen und vergewissern Sie sich, dass dem öffnenden <div> (nach dem Bild) ein schließendes </div> folgt, sonst wird schlimmstenfalls das komplette Layout zerfallen.

Bitte beachten Sie auch: Falls Sie die Texteingabe mit dem WYSYWIG-Editor vorziehen, können Sie keine Bilder umfließen lassen, weil er keine HTML-Eingabe von Hand erlaubt.

Bildlegenden

Damit eine Bildlegende zum Bild zugehörig erscheint und sich harmonisch ins Gesamtlayout einfügt, müssen Sie, falls Sie eine solche angeben möchten, ebenfalls eine Zeile HTML schreiben. Am einfachsten geht es bei Bildern ohne Textumfluss:

… letzte Zeile des vorhergehenden Absatzes

<img src="http://www.stuttgart-blog.net/wp-content/media/ihr_bildname.jpg" alt="Ihr Titel" />
<span class="legende">Text der Bildlegende</span>

Erste Zeile des folgenden Absatzes

Achten Sie darauf, das Legenden-Tag nach dem Bild-Tag in eine neue Zeile zu schreiben (1 x Return), der Zwang zur peniblen Schreibweise gilt auch hier. Der Vollständigheit halber noch die Variante mit Umfluss:

… letzte Zeile des vorhergehenden Absatzes

<div class="bild-links">
<img src="http://www.stuttgart-blog.net/wp-content/media/ihr_bildname.jpg" alt="Ihr Titel" />
<span class="legende">Text der Bildlegende</span>
</div>

Erste Zeile des folgenden Absatzes