Artikelbilder anzeigen und formatieren

An dieser Stelle habe ich bereits beschrieben, wie du das Artikelbild in deinem WordPress-Theme aktivieren kannst. Einfach mit einer Zeile Code in der functions.php. Doch damit ist es noch nicht getan. Die Aktivierung der Funktion führt nicht zur automatischen Anzeige des Bildes. Um dies zu erreichen musst du in ein paar Theme-Dateien noch einige Anpassungen vornehmen. Wie du dies machst und worauf du dabei achten solltest, erklärt dieser Artikel.

Die Funktion der Artikelbilder gibt es seit der WordPress Version 2.9. In diesem Artikel hatte ich bereits erwähnt, wie du die Funktion in deinem Theme aktivieren kannst. Wenn dies bei dir der Fall ist, kannst du die nächste Zeile überspringen. Wenn nicht, füge folgenden Code in die functions.php hinzu. Diese findest du im Ordner deines Themes:

add_theme_support('post-thumbnails');

Theme anpassen

Für die Ausgabe ist es jetzt erforderlich, weitere Dateien des Themes anzupassen. Dabei handelt es sich in der Regel um jene, die den Loop, also die Schleife der Artikel ausgeben. Dies sind die index.php und die archive.php. Dies kann allerdings von Theme zu Theme unterschiedlich sein. Hierbei kommt es auf den Aufbau deines Themes an.

index.php

Suche in der index.php die Zeile, die in etwa folgenden Code enthält:

<?php the_content(); ?>

An dieser Stelle wird der Artikel ausgegeben. Füge davor folgenden Code ein:

<?php 
if ( has_post_thumbnail() ) { 
  the_post_thumbnail();
} 
?>

Die erste Zeile prüft, ob dem Artikel ein Thumbnail angefügt wurde. Die Zweite Zeile schließlich gibt das entsprechende Artikelbild aus.

archive.php

Die Archivdatei enthält in der Regel nicht the_content(), sondern häufig the_excerpt(). Hierbei handelt es sich um den Artikelauszug. Da dieser oft nicht zusätzlich gepflegt wird, nimmt WordPress, sofern vorhanden, den Anfang des Artikels bis zum <!–more–> Tag. Suche in der archive.php nun die Zeile, die folgenden Code enthält:

<?php the_excerpt(); ?>

Danach fügst du wieder folgenden Code hinzu:

<?php 
if ( has_post_thumbnail() ) { 
  the_post_thumbnail();
} 
?>

Möchtest du, dass das Artikelbild auch auf der Artikelseite erscheint, musst du dazu die Datei single.php um den Code erweitern.

Link zum Artikel setzen

Das nun angezeigt Artikelbild ist jetzt noch nicht verlinkt. Schön wäre es doch, wenn der Benutzer auf das Bild klickt und dann direkt zum Artikel gelangt. Dazu musst du den Code entsprechend erweitern:

<?php if ( has_post_thumbnail()) : ?>
   <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
     <?php the_post_thumbnail(); ?>
   </a>
<?php endif; ?>

Die Funktion the_post_thumbnail wurde in das HTML Link-Tag gepackt. Damit HTML geschrieben werden kann, musste die erste PHP-Abfrage beendet werden (?>). Danach wird normaler HTML-Code ausgeführt. Mit <?php endif; ?> wird die Schleife schließlich beendet.

Formatierung

Das Artikelbild wird nun angezeigt, jedoch nicht vom Text umflossen, was etwas unschön aussehen kann. Um dies zu ändern, kannst du via CSS eine neue Klasse erzeugen und auf das Bild anwenden. Wir bauen uns in diesem Beispiel einen Rahmen mit einer Kontur um das Bild und lassen den Text auf der rechten Seite umfließen.

.artikelbild {
   padding: 4px;           /* Die Breite des Rahmens */ 
   background: #f2f2f2;    /* Der Hintergrund des Rahmens */
   border: 1px solid #ccc; /* Die Stärke, Variante und Farbe der Kontur */
   float:left;             /* Lässt dieses Element mit den umliegenden Elementen umfließen */
   margin-right:18px;      /* Abstand zum Text, der sich nun rechts vom Bild befindet */
}

Diese Klasse wenden wir nun auf den Code in der index.php oder der archive.php an:

<?php if ( has_post_thumbnail()) : ?>
   <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="artikelbild" >
     <?php the_post_thumbnail(); ?>
   </a>
<?php endif; ?>

In der zweiten Zeile wird mit class=“artikelbild“ die soeben definierte CSS-Klasse angefügt. Als Ergebnis sollte dein Bild nun links ausgerichtet und auf der rechten Seite vom Text umflossen sein.

Die Formatierung lässt sich natürlich beliebig erweitern. So kann z.B. ein Hover-Effekt oder auch Schatten zum Artikelbild hinzugefügt werden.

Weiter Optionen

Es gibt die Möglichkeit, das auszugebende Thumbnail entsprechend anzupassen bzw. eine bestimmte Thumbnailgröße zu wählen. Denn beim hochladen eines Bildes in die Mediathek werden drei Formate erzeugt – thumbnail, medium und large. Die Option dafür findest du in WordPress unter Einstellungen => Medien. Wenn du der Thumbnail-Funktion im Code keine Option hinzufügst, also „()“ leer lässt, wird das Thumbnail verwendet. Dies ist die Standardeinstellung. Du kannst aber andere Größen angeben. Wenn du folgenden Parameter einsetzt, wird das Bild in der Mediumgröße verwendet:

<?php the_post_thumbnail('medium'); ?>

Dabei wird die Größe verwendet, die du in den Einstellungen vorgenommen hast. Du kannst auch andere Größen anzeigen lassen. Dafür fügst du folgende Parameter ein:

<?php the_post_thumbnail( array(135,135) ); ?>

Hier wird allerdings kein neues Bild erzeugt, sondern das nächstgrößere lediglich herunterskaliert. Du solltest darauf achten, deine Bilder nicht zu groß erzeugen und später skaliert anzuzeigen. Im Idealfall verwendest du ein Artikelbild in einer Größe, die bereits vorliegt.

Artikelbilder auf einer Blog- oder Archivseite runden den Gesamteindruck ab und sind ein gutes Hilfsmittel, Inhalte schnell zu erfassen. In der Thumbnail-Funktion und den Parametern steckt viel Potential. Damit ist es einfach, Artikelbilder an jedes Layout und den eigenen Wünschen anzupassen.