WordPress Artikelbilder anzeigen und formatieren

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.

14 Gedanken zu „Artikelbilder anzeigen und formatieren“

  1. Hi Andreas,
    danke für deine gute Anleitung! Aber ich habe das Problem, dass in manchen Beiträgen das BIld angezeigt wird und in manchen nicht. Ich weiß gar nicht was ich machen und wonach ich schauen soll. BEitragsbilder sind festgelegt und warum es mal erscheint und ma lnicht kann ich nicht nachvollziehen.
    Hast ud mir einen Tipp? Ich finde durch Googlen leider gar nichts..
    Danke und Grüße
    Bettina

    1. Hallo Bettina,
      wie es aussieht, fehlt in deiner archive.php der Code zur Anzeige der Artikelbilder. Das Twntyten-Theme scheint dies von Haus aus nicht mitzubringen. Du müsstest in deiner archive.php den o.g. Code einfügen.

  2. Hallo, super Anleitung – TOP!
    nur wie kann ich das Bild innerhalb meiner Ausgabe im Template anzeigen lassen?
    Wie muss ich das umschreiben?

    <?php
    if (!have_posts()) {
    echo 'Keine Beiträge gefunden‘;
    echo ‚Zu Ihrer Suchanfrage wurden leider keine passenden Beiträge gefunden.‘;
    }
    else {
    while (have_posts()) {
    the_post();
    $link = get_permalink();
    echo “;
    echo ‚‚ . get_the_date( ‚d.m.Y‘ ) . ‚ • ‚ . get_the_title() . ‚‚;

    —>> muss hier rein das Artikelbild

    the_excerpt();
    echo “;
    echo ‚Kategorie: ‚; the_category( ‚, ‚ ); echo “;
    the_tags( ‚Schlagworte: ‚, ‚, ‚, “ );
    echo “;
    echo “;
    }

  3. hallo,
    habe eine anfängerfrage wie kan ich das beitragsbild nur in der startseite wo die letzten beiträge
    gelistet sind anzeigen, aber nicht im artikel selbst?

    Grüsse
    Jannis

    1. Hallo Jannis,
      du kannst jedem Artikel ein Beitragsbild hinzufügen. Unter „Optionen“ auf der Beitragsseite kannst du dies an- oder ausschalten. Je nach gewähltem Theme werden Beitragsbilder auf der Artikelseite angezeigt. Schau mal in deiner single.php. Dort müsste etwas wie „< ?php if (has_post_thumbnail()) {the_post_thumbnail();} ?>“ stehen. Dies zeigt die Beitragsbilder auf der Artikelseite an.

  4. Hallo Andreas,

    ich möchte gerne auf meinem Blog http://www.blickwinkel74.de/blog/ das Artikelbild besonders hervorheben. Sobald man runter scrollt verschwindet das Artikelbild und der Artikel mit den einzelnen Bildern erscheinen.
    Nach langem hin und her wurde mir gesagt das ich dafür JS und jQuery benötige um dieses um zu setzen. Ebenso wurde mir gesagt das man dieses Effekt allein mit CSS umsetzen kann.
    Als Beispiel habe ich die Seite Spotify und als WordPress Seite http://fatamanta.net/2013/09/jane/ wo man diesen Effekt sehen kann.

    Kannst Du mir da weiterhelfen? Bzw. Wie sieht der Code aus und wie und wo muss ich Ihn einsetzen?
    LG
    Chris

    1. Hallo Chris,
      interessantes Vorhaben. Der Effekt, den du suchst, nennt sich parallax Scrolling. Dabei werden einzelne Ebenen unterschiedlich schnell bewegt. Es gibt verschiedene Frameworks, die du dafür benutzen kannst. Einfach mal nach googeln. Dieser Effekt birgt allerdings auch Nachteile. Sie sind sehr rechenintensiv, müssen natürlich browserübergreifend funktionieren und auch auf Tablet funktioniert es nicht immer einwandfrei. Zum Storytelling sicher sehr gut geeignet. Nur übertrieben werden sollte es nicht.

  5. Hallo,
    Vielen Dank für den Artikel. Ich ahbe dadurch eine ungefähre Ahnung, was ich machen könnte.

    Ich habe quasi das umgekehrte Problem.
    Mein Theme (2013) zeigt immer Artikelbilder über den Artikeln und Seiten an, wenn ich welche zugeordnet habe. Das finde ich aber hässlich, weil die Bilder auch noch zentriert werden und so das Layout völlig strubbelig aussieht.
    Ich könnte ja einfach keine Artikelbilder zuordnen, dann erscheinen aber auch keine Thumprints beim Teilen oder in meiner „Weitere Artikel“ Anzeige. Da wiederum möchte ich gerne die Bilder.

    Was muss ich wo aus dem Code herausnehmen?
    Achtung ich bin Anfänger DAU 😀
    Liebe Grüße
    Martina

    1. Hallo Martina,

      es kommt ganz auf dein Theme an. Es kann die Datei index.php, aber z.B. auch die loop.php sein. Suche mal nach etwas wie


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

      in den Dateien. Am besten, du kommentierst das erst einmal aus und lädst die Datei dann wieder auf deinen Webspace.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.