Anleitung: Bilder posten

Autostadt

Damit die Fotos hier auf dem Blog eine einheitliche Größe haben, müssen sie, bevor sie hochgeladen werden, auf eine bestimmte Größe gebracht werden. Für Fotos im Querformat muss die Breite 910 Pixel betragen, für Fotos im Hochformat die Höhe 910 Pixel!

 1. Artikelbild posten

Um ein Foto wie hier oben zu posten, bitte die folgenden Schritte und Screenshots beachten:

Schritt 1 Schritt 2 Schritt 3

Zunächst sollte man einen Titelnamen angeben und möglichst auch einen kurzen Text, der die geposteten Bilder beschreibt. Im Bereich "Kategorie" bitte eine Kategorie wählen. Dadurch können später durch einen Klick auf den Namen der Kategorie alle Artikel in dieser angezeigt werden. Bei reinen Fotos die Kategorie "Fotos", ansonsten können auch mehrere Kategorien für einen Artikel gewählt werden. Aussagekräftige "Schlagworte" sollten auch vergeben werden, das macht es u.a. für Suchmaschinen leichter, die Artikel zu erfassen und auch für uns, da Schlagworte eine weitere Filtermöglichkeit darstellen.

Um wie oben in diesem Artikel nun ein Foto zu posten, einfach unten rechts auf "Artikelbild festlegen" klicken, die vorher auf die richtige Größe (also die 910 Pixel Geschichte von oben) gebrachte Datei auswählen und hochladen. Dann wie im dritten Screenshot markiert die Einstellungen vornehmen. Also Titel und Alternativtext angeben, auf "Datei-URL" klicken, Ausrichtung "Links" wählen und "Vollständige Größe". Abschließend auf "Als Artikelbild nutzen" klicken und dann auf "Alle Änderungen speichern".

Das Artikelbild sollte bitte im Querformat sein! Wenn man auf das Bild klickt, öffnet sich die Diashow!

Das erste Bild eines Artikels sollte immer das Artikelbild sein!

 2. Mehrere Bilder posten

Damit die Diashow aus mehr als nur einem Bild besteht, können weitere Bilder in den Artikel eingefügt werden. Natürlich auch wieder nach der oben beschriebenen 910-Pixel-Vorgabe.

Für die folgenden Schritte muss im Artikel-Editor zur "HTML"-Ansicht gewechselt werden. Zu finden oben rechts:

HTML-Ansicht

 

Damit man wie oben bei den Screenshots zu sehen eine Reihe mit drei Miniaturbildern hat, muss eine Tabelle eingefügt werden. Dazu den folgenden Code kopieren und in der HTML-Ansicht an der gewünschten Stelle, wo die Miniaturbilder erscheinen sollen, einfügen!

<table>
<tbody>
<tr>
<td><a href="https://www.fotogruppe-bs.de/wp-content/uploads/2012/01/1.jpg"><img class="alignleft size-thumbnail wp-image-120" title="Schritt 1" src="https://www.fotogruppe-bs.de/wp-content/uploads/2012/01/1-150x150.jpg" alt="Schritt 1" width="150" height="150" /></a></td>
<td><a href="https://www.fotogruppe-bs.de/wp-content/uploads/2012/01/2.jpg"><img class="alignleft size-thumbnail wp-image-122" title="Schritt 2" src="https://www.fotogruppe-bs.de/wp-content/uploads/2012/01/2-150x150.jpg" alt="Schritt 2" width="150" height="150" /></a></td>
<td><a href="https://www.fotogruppe-bs.de/wp-content/uploads/2012/01/3.jpg"><img class="alignleft size-thumbnail wp-image-124" title="Schritt 3" src="https://www.fotogruppe-bs.de/wp-content/uploads/2012/01/3-150x150.jpg" alt="Schritt 3" width="150" height="150" /></a></td>
</tr>
</tbody>
</table>

Die vorhandenen drei Bilder (also der Code jeweils zwischen <td> und </td>) nach und nach in der HTML-Ansicht markieren und wenn eines der Bilder markiert ist, das eigene Bild einfügen. Dazu bitte den Button über dem Artikel-Editor anklicken ("Hochladen/Einfügen"). Wie im vorigen Abschnitt die Bilder hochladen und die oben genannten Einstellungen vornehmen mit der Änderung, dass anstelle von "Vollständige" Größe" bitte "Miniaturbild" ausgewählt wird! Der Code wird dann entsprechend ersetzt! Um weitere Reihen hinzuzufügen, den gesamten Block zwischen <tr> und </tr> unter den ersten einfügen, aber vor </tbody>!

Ist jetzt ein etwas längerer Post geworden, aber ich hoffe, dass damit alles klar ist. Sollte noch etwas fehlen oder Fragen auftreten, einfach hier im Artikel einen Kommentar schreiben!


Kommentieren

Folgende HTML-tags stehen zur Verfügung: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>