Stuttgart Blog, Stimmen der Stadt
Stuttgart Blog, Stimmen der Stadt

Bilder hochladen und einbinden

Stand: 28.01.09, 23:00 Uhr

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:

Technische Bedingungen des Bildes

Bild hochladen

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

Bild hochladen

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

Bild beschreiben

Upload fertig

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.

Bild-Tag im Editor

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

Bildpräsentation mit Lightbox

Sie können Bilder mit Lightbox präsentieren. Klicken Sie auf das folgende Bild, um zu sehen, wie das aussieht: (Falls Sie Scrollbalken über dem Bild sehen, ignorieren Sie diese bitte, auf den »echten« Seiten wird dieser Anzeigefehler nicht auftreten.):

U-Bahnhof Charlottenplatz

Das Prinzip ist ganz einfach: sobald ein Bild mit einem anderen Bild verlinkt wird, kommt automatisch die Lightbox ins Spiel. Das zunächst angezeigte Bild kann entweder die maximal 400 Pixel breite Version sein oder der Thumbnail, der beim Hochladen eines Bildes vom System generiert wird. Letzteres eigent sich insbesondere, wenn Sie eine Bildsequenz aus mehreren Bildern einstellen möchten, also eine Art Album.

Einzelbilder

Um ein Bild in der gezeigten Weise mit Lightbox zu verknüpfen, benötigen Sie sowohl die im Artikel angezeigte Fassung (mit max. 400 Pixeln Breite) als auch die große Version, die nach dem Klick angezeigt wird. Im Beispiel nennen wir das kleinere, anzuzeigende Bild »charlottenplatz_1_klein.jpg« und das größere »charlottenplatz_1.jpg«.

<a href="http://www.stuttgart-blog.net/wp-content/media/charlottenplatz_1_klein.jpg" title="U-Bahnhof Charlottenplatz"><img src="http://www.stuttgart-blog.net/wp-content/media/charlottenplatz_1_klein.jpg" alt="U-Bahnhof Charlottenplatz" /></a>

Das ist schon fast gut, allerdings werden Sie feststellen, das sowohl das angezeigte als auch das Lightbox-Bild identisch sind (charlottenplatz_1_klein.jpg), es wird sozusagen das Bild mit sich selbst verlinkt. Also müssen Sie dem Link jetzt noch sagen, wie Ihre große Version heißt, indem Sie das _klein entfernen:

<a href="http://www.stuttgart-blog.net/wp-content/media/charlottenplatz_1.jpg"

In vollständiger Form sollte im Editor nun also etwa Folgendes stehen:

<a href="http://www.stuttgart-blog.net/wp-content/media/charlottenplatz_1.jpg" title="U-Bahnhof Charlottenplatz"><img src="http://www.stuttgart-blog.net/wp-content/media/charlottenplatz_1_klein.jpg" alt="U-Bahnhof Charlottenplatz" /></a>

Thumbnails (Album)

Eine Bildsequenz aus Thumbnails könnte z. B. so aussehen:

U-Bahnhof Charlottenplatz 1U-Bahnhof Charlottenplatz 2U-Bahnhof Charlottenplatz 3

Das Prinzip bleibt dasselbe, mit dem Unterschied, dass Sie jetzt jeweils nur noch ein Bild benötigen (charlottenplatz_1.jpg etc.) während für die Anzeige der Thumbnail verwendet wird, der beim Hochladen ohnehin erzeugt wird.

Kreuzen Sie in dem Fall neben dem Thumbnail unter Anzeigen: Thumbnail sowie unter Link to: File an und klicken anschließend auf Send to Editor, dann erscheint etwa das hier:

<a href="http://www.stuttgart-blog.net/wp-content/media/charlottenplatz_1.jpg" title="U-Bahnhof Charlottenplatz 1"><img src="http://www.stuttgart-blog.net/wp-content/media/charlottenplatz_1.thumbnail.jpg" alt="U-Bahnhof Charlottenplatz 1" /></a>

Wenn Sie das für jedes Bild machen, sieht der komplette Code (im Beispiel der obigen drei Bilder) so aus:

<a href="http://www.stuttgart-blog.net/wp-content/media/charlottenplatz_1.jpg" title="U-Bahnhof Charlottenplatz 1"><img src="http://www.stuttgart-blog.net/wp-content/media/charlottenplatz_1.thumbnail.jpg" alt="U-Bahnhof Charlottenplatz 1" /></a><a href="http://www.stuttgart-blog.net/wp-content/media/charlottenplatz_2.jpg" title="U-Bahnhof Charlottenplatz 2"><img src="http://www.stuttgart-blog.net/wp-content/media/charlottenplatz_2.thumbnail.jpg" alt="U-Bahnhof Charlottenplatz 2" /></a><a href="http://www.stuttgart-blog.net/wp-content/media/charlottenplatz_3.jpg" title="U-Bahnhof Charlottenplatz 3"><img src="http://www.stuttgart-blog.net/wp-content/media/charlottenplatz_3.thumbnail.jpg" alt="U-Bahnhof Charlottenplatz 3" /></a>

Alle verlinkten Bilder innerhalb eines Beitrags werden von Lightbox zu einem Album zusammengefasst, auch wenn Sie sich über den Text verteilen. (Aus diesem Grund bilden die vier Bilder auf dieser Seite ein einziges Album.) Wenn Sie eine Thumbnail-Ansicht wie die obige erreichen möchten, dann müssen Sie darauf achten, dass zwischen dem schließenden </a> des einen und dem öffnenden <a des nächsten Bildes kein Zeilenumbruch steht, sonst werden die Thumbnails untereinander angezeigt, was schnell etwas ermüdend wirkt.

Bitte beachten Sie: Auch wenn es mit Lightbox möglich ist, Bilder beliebiger Größe darzustellen, hat mitnichten jeder einen hochauflösenden 24-Zoll-Bildschirm zur Verfügung, mit dem sich üppige Bildtapeten betrachten lassen. Wenn Sie eine Minimalauflösung von 1024 x 768 Pixeln annehmen und das ständig zunehmende Browser-Geraffel abziehen, empfiehlt es sich, einen maximalen Bildraum von 900 x 600 Pixeln (B x H) nicht zu überschreiten. Auf solchen (nach wie vor verbreiteten) 1024er-Bildschirmen werden größere Bilder logischerweise nicht an einem Stück (im sog. Viewport) dargestellt, sondern müssen »erscrollt« werden, was den Bildgenuss entscheidend trübt.