Seit Version 2.9 haben WordPress-User nun die Möglichkeit jedem Artikel ein eigenes Bildchen zuzuordnen, die Post-Thumbnails. Beispiel gefällig? Schaut mal nach oben, neben dem Artikel-Titel. Auch in der Artikelübersicht nutze ich Thumbnails:

Wie ihr diese Funktionalität freischaltet und für euren Blog nutzt? So geht’s…

Aktivierung der Funktion

Da die Funktion standardmäßig deaktiviert ist, müssen wir diese zunächst aktivieren. Dies geschieht durch folgenden Eintrag in der Datei  functions.php eures WordPress-Themes:

add_theme_support('post-thumbnails');

Dies aktiviert die Post-Thumbnails für Seiten und Artikel. Wollt ihr nur Artikel oder nur Seiten, ändert den Code entsprechend ab:

add_theme_support('post-thumbnails', array('post')); <!-- nur für Artikel -->
add_theme_support('post-thumbnails', array('page')); <!-- nur für Seiten -->

Größe der Thumbnails

Die Größe der Thumbnails wird hier ebenfalls festgelegt. Durch den Eintrag

set_post_thumbnail_size(60, 60);

wird die Größe der Thumbnails auf 60 x 60 Pixel festgelegt. WordPress passt die Bilder automatisch auf diese Größe an. Kein Problem, wenn ihr quadratische Bilder habt. Aber wenn ihr andere Auflösungen habt, wie beispielsweise 100 x 50 Pixeln werden diese anhand ihres Seitenverhältnisses (hier 2:1) entsprechend verkleinert dargestellt. Das führt dazu, dass nicht alle Thumbnails die selbe Größe haben.

Im Gegensatz dazu, habt ihr bei folgendem Code (ihr seht das true, oder?)

set_post_thumbnail_size(60, 60, true);

immer Thumbnails in einer Größe von 60 x 60 Pixeln. Sind die Bilder größer als 60 x 60 Pixel, schneidet WordPress die Bilder in Höhe und Breite ab.

Probiert es mal aus, was euch besser gefällt. Ich habe mich für die erste Variante entschieden und achte darauf, dass ich quadratische Bilder verwende. Zur Not bearbeite ich die Bilder vorher und füge in der Breite oder Höhe halt noch ein paar Pixel dazu.

Verwendung in eurem Template

Die Einbindung in euer Template ist denkbar einfach. Durch den Aufruf

<?php the_post_thumbnail(); ?>

fügt ihr eurem Template die Thumbnails hinzu. Wer mehr über Parameter zu dieser Funktion wissen möchte, schaut sich die Referenz an.

Mehrere Größen festlegen

Wenn ihr die Post-Thumbnails in verschiedenen Templates einsetzen wollt, wünscht ihr euch vielleicht auch verschiedene Größen. Auch das ist möglich und wird, wie sollte es auch anders sein, in der functions.php definiert. Über folgenden Code

add_image_size( 'small-post-thumbnail', 25, 25 );
add_image_size( 'xsmall-post-thumbnail', 20, 20 );

könnt ihr verschiedene Größen festlegen. Im Template werden diese dann mit

<?php the_post_thumbnail('small-post-thumbnail'); ?>

aufgerufen.

Häh? Ich versteh‘ nur Bahnhof

Okay. Dann noch mal zusammengefasst, was in die functions.php gehört:

if (function_exists('add_theme_support')) {
add_theme_support('post-thumbnails', array('post'));
set_post_thumbnail_size(60, 60);
add_image_size( 'small-post-thumbnail', 25, 25);
add_image_size( 'xsmall-post-thumbnail', 20, 20);
}

Mit diesem Code fügt ihr die Funktion nur für Artikel in drei verschiedenen Größen hinzu.

Und nun?

Nun gilt es eure Artikel mit Bildern zu versorgen. Habt ihr den obigen Eintrag vorgenommen und öffnet im Backend einen Artikel, erscheint eine neue Option namens Artikelbild.

Klickt ihr auf den Link öffnet sich die bekannte Mediathek, in der ihr eine neue Datei hochladen könnt, oder eine schon vorhandene auswählen könnt. Habt ihr ein Bild hochgeladen oder ausgewählt, klickt ihr auf den ebenfalls neuen Eintrag Als Artikelbild nutzen.

Beispiel für das Einbinden ins Template

Die Thumbnails werden als <img>-Tag ausgegeben. Wollt ihr die Thumbnails noch etwas stylen oder die Position/Abstände anpassen, solltet ihr unabhängig vom <img>-Tag in euerem Stylesheet eine neue Klasse definieren.

Ich hab es wie folgt gelöst. Hier im Stylesheet:

.post .thumbs {
float:left;
margin:0 10px 10px 0; }

Unterhalb der Klasse „post“ habe ich eine neue Klasse „thumbs“ angelegt, die wie folgt ins Template eingebunden wird:

<div <?php post_class() ?> id="post-<?php the_ID(); ?>"> <!-- gibt' schon -->
<div class="thumbs"> <!-- Beginn des neuen Containers -->
<?php the_post_thumbnail(); ?>
</div> <!-- Ende des neuen Contaierns -->
... <!-- ab hier geht's weiter wie bisher -->