Wie du das Featured Image im WordPress RSS Feed anzeigst

Artikel wurde aktualisiert am 11.02.2016

Dieser Artikel zeigt dir, wie du das Beitragsbild im WordPress RSS Feed ausgeben kannst. Die Macher von WordPress haben uns dafür ein sehr praktisches Werkzeug an die Hand gegeben. Nämlich die functions.php und die berüchtigten Hooks.

Feeds gehören noch lange nicht der Vergangenheit an. Auch in Zeiten von Smartphones und Facebook werden die Blogfeeds noch rege abonniert. Der Aufschrei, als Google den Reader beerdigt hat, verdeutlicht sehr schön wie wichtig diese Technik auch heute noch ist. Auch ich verfolge Webseiten ausschließlich über RSS.

Leider ignoriert WordPress das Featured Image beim Generieren des RSS Feeds. Eine Option zum Einfügen werde wünschenswert.
Es ist aber einfach möglich das Beitragsbild in den Feed zu zaubern.

Hier das Howto zum Einfügen des Bildes in den Feed.

Warum sollte ich Bilder im Feed anzeigen?

Es geht wie immer um Aufmerksamkeit. Gerade wenn sonst keine Bilder im Artikel vorhanden sind, oder nur ein Teil für den Feed bereit gestellt wird, sorgt dein Blogpost nicht gerade für viele Blicke, wenn alle anderen Posts mit bunten Bildern bestückt sind.

Deshalb möchten wir unser WordPress Beitragsbild im RSS Feed mit ausgeben. Natürlich ganz oben, wie auch im Theme.

Ein schönerer Feed bedeutet mehr Besucher!

Variante 1: Code in die functions.php einfügen

Ich bin ja kein Fan von überflüssigen Plugins. Alles was mit wenigen Zeilen in der functions.php gelöst werden kann, ist auf jeden Fall schlanker, wie ein zusätzliches WordPress Plugin.

Deshalb fangen wir mit der Variante zum Einfügen des Featured Image im WordPress RSS Feed, in der functions.php an. Für versierte WordPress User sicher kein Problem.

Hattest du noch nie mit der Datei namens functions.php zu tun, mache dir auf jeden Fall vorher ein Backup davon.

Deine functions.php finden
Deine functions.php finden

Du findest die Datei im Verzeichnis deines Themes. Dort wo auch die index.php deines Themes liegt.
Pfad: /wp-content/themes/DEINTHEME/functions.php

Die Datei function.php öffnest du in deinem Editor und fügst folgenden Code ganz am Ende ein.

// Add featured image to RSS feed
function j0e_imagetoRSS($content) {
global $post;
if ( has_post_thumbnail( $post->ID ) ){
$content = '

' . get_the_post_thumbnail( $post->ID, 'full', array( 'style' => 'max-width: 100%; height: auto; margin-bottom: 10px;' ) ) . '

' . $content; } return $content; } add_filter('the_excerpt_rss', 'j0e_imagetoRSS'); add_filter('the_content_feed', 'j0e_imagetoRSS');

Alternativ kannst du aber auch direkt im WordPress Backend die Theme Dateien bearbeiten. Ich persönlich nutzte diese Möglichkeit aber generell nicht.
Design –> Editor –> rechts auf Theme-Funktionen klicken.

Anpassungen

Je nachdem welche Bildergrößen du in deinem Theme nutzt und wie der Post dann im Feadreader aussehen soll, kannst du die Ausgabe deines Featured Images im RSS Feed noch anpassen.

Wie du oben sehen kannst, habe ich get_the_post_thumbnail( $post->ID, 'full' full eingesetzt. Damit gebe ich also die volle Größe des Beitragsbildes an. So wie ich es hochgeladen habe.

Alternativ kannst du aber noch folgende Werte einfügen:

  • thumbnail
  • medium
  • large
  • full

Nach 'style' => ' hast du noch die Möglichkeit jeden erdenklichen CSS Code anzugeben. Hier kannst du das Bild also noch formatieren und positionieren.
In meinem Beispiel oben hab ich mit 'margin-bottom: 10px;' lediglich 10px Platz unter dem Bild gelassen.
Mit 'float:left; margin:0 10px 10px 0;' könntest du das Bild zum Beispiel links anheften und den Text rechts vorbeifließen lassen. Dann wäre es aber besser thumbnail oder medium, für die Bildgröße zu nutzen.

Variante 2: Ein Plugin nutzen

Falls du lieber nicht in php Dateien herumfummeln möchtest und lieber ein Plugin zum einfügen des Beitragsbildes in den RSS Feed nutzt, führen natürlich wie immer 1000 Plugins nach Rom.

Alle aufgeführten Plugins wurden in den letzten Monaten aktualisiert. Sortiert habe ich nach der Anzahl der aktiven Installationen. Dieser Wert lässt einen sehr guten Rückschluss auf die Qualität des Plugins zu.

Featured Images in RSS w/ Size and Position

Featured Images in RSS w/ Size and Position
Featured Images in RSS w/ Size and Position

Insgesamt macht dieses Plugin den besten Eindruck. Die Bewertungen sind alle sehr positiv und das Plugin wird auf mehr als 10000 Installationen genutzt.

In den Einstellungen kannst du die Größe des Bildes wählen und auch noch die Ausrichtung. Also die gleichen Optionen, die wir auch oben in dem Snippet gemacht haben.

» Download

Featured Image In RSS Feed

Featured Image In RSS Feed
Featured Image In RSS Feed

Das zweite Plugin erledigt die gleichen Aufgaben wie das erste. Bei den Einstellungen kannst du allerdings nur die Bildgröße verändern. Als Standard ist Thumbnail ausgewählt.

» Download

Send Images to RSS

Send Images to RSS
Send Images to RSS

Etwas umfangreicher ist das Plugin Send Images to RSS. Da kannst du auch die Breite in px angeben.
Außerdem kann für E-Mails ein separater und optimierter Feed generiert werden. Das ist praktisch, wenn du deine neuen Artikel automatisch an deine E-Mail Abonnenten senden möchtest. Das geht sehr gut mit Mailchimp.

» Download

RSS Image Feed

RSS Image Feed Plugin
RSS Image Feed Plugin

Zuletzt möchte ich noch das Plugin RSS Image Feed aufzeigen. Es geht einen etwas anderen Weg und nimmt das erste Bild aus dem Text und fügt es darüber ein.
Das Plugin macht im Prinzip das Gleich wie die anderen Plugins, jedoch nimmt es das erste Bild im Post her und nicht das Beitragsbild.
Einstellungen oder Formatierungsmöglichkeiten gibt es leider keine.

» Download

Problemlösungen

Es kann immer was schief gehen. Oder oft vergisst man einfach die Funktionen eines anderen Plugins, die uns ins Handwerk Pfuschen.

Leere WordPress Seite

Falls deine Seite nur mehr weiß ist, nachdem du den Code in die functions.php eingefügt hast, stimmt damit irgendwas nicht. Mache die Änderungen noch mal rückgängig und achte darauf ganz am Ende eine Leerzeile einzufügen und füge dann noch mal den Code ein. Eigene Anpassungen mach erst wenn alles mit dem Code von oben funktioniert.

Bild ist nicht im RSS Feed sichtbar

Hier kommen meist Caching Plugins ins Spiel. Falls du WP Super Cache oder W3 Total Cache nutzt, leere auf jeden Fall den kompletten Cache, nachdem du die Änderungen vorgenommen hast. Diese Plugins halten nämlich auch deinen Feed gecached.

Fazit

Es kann sich durchaus lohnen, das Featured Image in deinen Feed einzufügen. Besonders wenn du nicht den kompletten Artikel, sondern nur einen Auszug ohne Bilder per RSS ausgibst.
Dieser Artikel hat dir gezeigt wie es geht.

Updates

11.02.2016: Verbesserung des Codes für die functions.php. Anpassung des CSS, damit das Bild auch voller Größe angezeigt wird.

Verfasst in: WordpressTags: ,
22 Kommentare
  1. Hallo,
    was ich auch versuche, der Text erscheint nicht rechts neben dem Bild. Er beginnt mit einer Zeile am unteren Rand des Bildes und wird dann unterhalb fortgesetzt. (Bei allen Bildgrößen) Was mach ich falsch?

  2. Hallo Axel,
    wenn du das Bild links haben möchtest und der Text rechts laufen soll, musst du das mit „float“ machen.
    Also diesen Code in den CSS Teil nutzen:
    float:left; margin:0 10px 10px 0;

    Die Zeile würde dann etwa so aussehen:
    ‚ . get_the_post_thumbnail( $post->ID, ‚full‘, array( ’style‘ => ‚float:left; margin:0 10px 10px 0;‘ ) ) . ‚

  3. Danke, aber so hab ich es ja gemacht. Steht ja oben im Text. Es scheint wohl am Firefox zu liegen, der es nicht richtig darstellt. Denn im Thunderbird sieht es richtig aus! … Ich werde wohl ganz auf Bilder verzichten.

    vg Axel

  4. Der Style Code wird bei dir nicht angefügt.

    Das erste Bild Tag schaut so aus:
    <img xmlns="http://www.w3.org/1999/xhtml&quot; src="http://lwrs-smue.de/wp-content/uploads/2018/01/Ankündigung-300×200.png&quot; class="attachment-medium size-medium wp-post-image" alt="" height="200" width="300" />

    sollte aber so aussehen:
    <img xmlns="http://www.w3.org/1999/xhtml&quot; src="http://lwrs-smue.de/wp-content/uploads/2018/01/Ankündigung-300×200.png&quot; class="attachment-medium size-medium wp-post-image" alt="" style="float: left;margin: 0 10px 10px 0;" height="200" width="300" />

    Sende mir mal den Code in deiner functions.php. Vielleicht sehe ich den Fehler.

  5. // Add featured image to RSS feed
    function j0e_imagetoRSS($content) {
    global $post;
    if ( has_post_thumbnail( $post->ID ) ){
    $content = ‚

    ‚ . get_the_post_thumbnail( $post->ID, ‚medium‘, array( ’style‘ =>’float:left; margin:0 10px 10px 0;‘ ) ) . ‚

    ‚ . $content;
    }
    return $content;
    }
    add_filter(‚the_excerpt_rss‘, ‚j0e_imagetoRSS‘);
    add_filter(‚the_content_feed‘, ‚j0e_imagetoRSS‘);

  6. Das Hochkomma wurde beim Kopieren durch ein Komma ersetzt. … ist also in der Orignialdatei „oben“

  7. Also bei deinem Code stimmen einige Zeichen nicht. Könnte durchs Kopieren sein.

    So sollte es aussehen:

  8. Hast du was vergessen?

    Ich versuche das Kopieren nochmal:

    // Add featured image to RSS feed
    function j0e_imagetoRSS($content) {
    global $post;
    if ( has_post_thumbnail( $post->ID ) ){
    $content = ‚

    ‚ . get_the_post_thumbnail( $post->ID, ‚medium‘, array( ’style‘ =>’float:left; margin:0 10px 10px 0;‘ ) ) . ‚

    ‚ . $content;
    }
    return $content;
    }
    add_filter(‚the_excerpt_rss‘, ‚j0e_imagetoRSS‘);
    add_filter(‚the_content_feed‘, ‚j0e_imagetoRSS‘);

  9. Danke!
    … aber gleiches Ergebnis!

    Was bedeuten eigentlich die letzten beiden Zeilen? „‚j0e“ deutet ja auf deine Webseite hin.

    vg

  10. Super, nun passt es. Der Code wird nun angefügt und der Text verläuft neben dem Bild.

    Der Firefox entfernt in der Feed-Darstellung den CSS Code.
    Musst dir im Internet Explorer ansehen.

  11. Ja das „j0e_imagetoRSS“ ist lediglich der Name für die Funktion. Ich setzte vor alle meine Funktionen „joe_“, damit es zu keinen Problemen mit anderen Funktionen kommt.

    Du kannst auch alle „j0e_imagetoRSS“ mit zb „lwrs_imagetoRSS“ ersetzen.

  12. Vielen Dank für die Hilfe!!!

  13. Hallo Jochen,

    hast du eine Idee was ich in der functions.php anpassen muss, damit meine Bilder im Content in voller Auflösung statt in 150x150px angezeigt werden? Habe oft eine kleine Galerie in den Beiträgen. Da aber nur die kleine Vorschau im Feed landet, wird z.B. bei Google Play Kiosk das kleine Bild auf volle Breite gezogen und damit verpixelt. Würde gerne alle Bilder in voller Auflösung einbinden.

    Danke
    Manuel

  14. Also wenn du von oben die Variante 1 in deine functions.php einfügst, wird das Beitragsbild in voller Größe in deinen Feed eingefügt.
    Damit sollte dein Problem gelöst sein.

    Unter der folgenden Adresse kannst deinen Kiosk noch anpassen: https://www.google.com/producer/

  15. Vielen Dank, vermute auch, dass das bei einer WordPress-Installation funktioniert.
    Jdoch habe ich hier (https://www.juniorenauswahl.de/feed/) nur das Featured Image, die 6 Grafiken im ersten sind jedoch in kleiner Auflösung hinterlegt.

  16. Achso, die Bilder im Artikel…
    Dazu müsstest du die Bilder im Artikel auch ich der Größe einbinden, wie du sie im Kiosk möchtest.

    Zwei Möglichkeiten:
    1. Momentan hast du die 6 Bilder als Galerie eingefügt. Beim Einfügen der Galerie kannst du die Größe der Bilder wählen. Aktuelle hast du Thumbnail ausgewählt. Nimm einfach die nächste Größe.

    2. Die Bilder direkt in voller Größe einbinden, ohne Galerie.

  17. Wenn ich die nächst höhere Größe (Mittel) nehme, dann definiert er auch wieder Mittel als volle Größe. Variante 1 für also nicht zum Ziel.

    Variante 2 nehme ich ungern, weil dann hab ich ja die volle Größe auch in der normalen Webansicht. Auf diese Größe ist das Theme vermutlich nicht ausgelegt und ich will ungern die volle Größe über schmale Mobilfunkverbindungen jagen, ohne dass der Nutzer das angefordert hat.

  18. Nun schaut das aber gut aus!

    Die Bilder deiner Galerie werden nun als srcset dargestellt. D.h. es werden alle Bildergrößen angeboten und der Browser oder Kiosk wählt dann die passende Variante aus.

    Öffne mal deinen Feed und drücke STRG+F5, dann siehst du was ich meine.

    Also abwarten, bis der Kiosk den neuen Feed geholt hat, dann sollte es passen.

  19. Ah 🤦, ja klar.
    Ich hab nur auf die erste img-URL geschaut, aber die großen Bilder sind ja weiter hinten verlinkt.

    Super, vielen Dank und ein schönes Wochenende


Kommentar verfassen

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

Kommentar *
Name *
E-Mail *
Webseite