Weniger ist mehr. Wir misten gemeinsam aus. Die #LebeMehrMitWeniger Challenge

How To: Das Beitragsbild als Vorschau in Bloglovin nutzen

by Judith P. 12. April 2015

12. April 2015

Beitragsbild als Vorschau in Bloglovin nutzen | Featured Image to RSS Feed | www.youdid-design.de

Wie kann man das Beitragsbild als Vorschau in Bloglovin nutzen? Im dritten Teil meiner Bloglovin-Serie möchte ich erklären, wie du Bloglovin dazu bringst, das Titelbild eines Artikels als Vorschau zu nutzen und nicht das erste Bild im Text.

Bloglovin-Serie:

1.Teil: Einleitung – Was ist Bloglovin?
2.Teil: Bloglovin zeigt keine Bilder an
3.Teil: Das Beitragsbild als Vorschau in Bloglovin nutzen (diesen Teil liest du gerade)
4.Teil: 3 geniale Funktionen von Bloglovin
5.Teil: Mit Bloglovin mehr Follower bekommen und deinen Blog vermarkten

How To: Das Beitragsbild als Vorschau in Bloglovin nutzen

Letzte Woche habe ich bereits erklärt, was du machen musst, wenn auf deinem Bloglovin-Profil gar keine Bilder angezeigt werden. Heute möchte ich dir zeigen, wie du Bloglovin dazu bringst das Beitragsbild, auch Titelbild oder Featured Image genannt, zu verwenden.

Standardmässig nutzt Bloglovin bei einem Wordpress-Blog nämlich immer das erste Bild, das im Text vorkommt, für die Vorschau. Das hat zur Folge, dass wenn kein Bild im Text vorhanden ist Bloglovin auch kein Bild anzeigt, sondern nur die Textbox. Selbst wenn du ein Beitragsbild verknüpft hast, wird kein Bild angezeigt. Wie das aussieht, habe ich im letzten Tutorial gezeigt.

Wahrscheinlich kreierst du aber schöne Titelbilder und möchtest auch, dass diese in der Bloglovin-Vorschau angezeigt werden z.B. auf deinem Profil oder im Feed deiner Abonennten. Und wahrscheinlich ärgert es dich genauso wie mich, das Bloglovin nicht deine Titelbilder verwendet. Deshalb gibt es heute dieses Tutorial, das sich mittlerweile auch schon einige Leser gewünscht haben.

Das Feature Image als Vorschaubild anzeigen

Das Problem mit den fehlenden Bildern in Bloglovin ist ja einfach gelöst. Nun kommt aber die Master Class. Damit Bloglovin das Featured Image anzeigt, muss dieses zunächst in den RSS-Feed eingebunden werden. Normalerweise nutzt der RSS-Feed gar keine Bilder und deshalb sucht Bloglovin einfach im Inhalt des Artikels das erste Bild. Wenn du allerdings schon bestimmst, welches Bild im Feed zu sehen ist, dann nimmt Bloglovin auch dieses Bild.

Um nun also das richtige Bild in den RSS-Feed zu bekommen, hast du zwei Möglichkeiten.

1. Featured Image im RSS-Feed mit einem Plugin (Anfänger)

Diese Variante habe ich nicht ausprobiert und die Plugins auch nicht getestet. Aber ich denke anhand der Bewertungen kannst du dir sicher ein gutes Bild über die Plugins machen und das richtige auswählen.
Featured Images in RSS w/ Size and Position
Featured Image In RSS Feed
RSS with Images

2. Code-Änderung in der functions.php (Fortgeschritten)

Um meine Seite schlank und performant zu halten, versuche ich möglichst wenig Plugins zu installieren. Deshalb habe ich mich für die Code-Variante entschieden, die eher für fortgeschrittene Anwender zu empfehlen ist. Wenn du ein wenig Ahnung von der Programmierung in Wordpress hast, dann würde ich dir diese Variante empfehlen. Es ist nur sehr wenig Code der eingebaut werden muss, aber man spart sich ein ganzes Plugin.

Wer beim letzten Tutorial noch die Kommentare studiert hat, hat die Lösung eventuell sogar schon entdeckt. Die liebe Christiane hat die Lösung nämlich schon verraten.

Folgenden Code fügst du am besten in die Datei functions.php in deinem Child-Theme ein. Wenn du es in der functions.php deines regulären Themes einfügst, geht die Änderung bei jedem Update verloren.

1
2
3
4
5
6
7
8
9
10
11 /*-----------------------------------------------------------------------------------*/ /* Function to add featured images to the RSS feed /*-----------------------------------------------------------------------------------*/ function featuredtoRSS($content) { global $post; if ( has_post_thumbnail( $post->ID ) ){ $content = '' . get_the_post_thumbnail( $post->ID, 'thumbnail', array( 'style' => 'float: left; max-width:300px; height:auto; margin: 5px 10px 10px 0;' ) ) . '' . $content; } return $content; } add_filter('the_excerpt_rss', 'featuredtoRSS'); add_filter('the_content_feed', 'featuredtoRSS');

Wenn du diesen Code einfügst wird an den Inhalt ($content) eines jeden Artikels das Featured Image übergeben. Das Bild erhält man über die Funktion get_the_post_thumbnail. Für das Bild habe ich auch noch ein paar Styleangaben mitgegeben, damit es etwas hübscher aussieht.

Browsertest

Ob das ganze funktioniert kannst du im Browser testen, indem du deine Feed URL aufrufst.
In meinem Fall lautet die URL: https://youdid.blog/feed/

Wenn du mit Chrome surfst, sieht du eventuell keine Bilder und bekommst die folgende Meldung: This XML file does not appear to have any style information associated with it. The document tree is shown below. In diesem Fall fehlt dir eine Browsererweiterung zum Anzeigen von gestylten RSS-Feeds.

Firefox hat so eine Browsererweiterung bereits integriert. Deshalb sieht mein RSS-Feed dann so aus.

Natürlich kannst du das ganze auch mit Bloglovin selbst kontrollieren, sobald du neue Beiträge veröffentlichst. Auf bereits veröffentlichte Artikel lässt sich die Änderung leider nicht mehr anwenden.

Ich hoffe das Tutorial hat dir geholfen. Du kannst übrigens gerne meinen RSS-Feed abonnieren z.B. in Bloglovin. Dann verpasst du keinen Post mehr und ich freue mich immer über neue Follower.

Hast du noch weitere Fragen zu Bloglovin? Dann schreib mir doch einfach einen Kommentar.

#blog #bloglovin #social media #tutorial #wordpress

Judith P.

Hi, ich bin Judith und alles, was du hier auf meinem Blog findest, das bin ich: Ende Zwanzig, Mediendesignerin, Bloggerin und Mama von zwei süßen Töchtern. Auf Youdid.Blog blogge ich über Media Design, Blogging Tipps, DIY, Reisen und das Leben mit Kind. Ich liebe das Leben und liebe es das Leben schöner, leckerer, gemütlicher, praktischer und lustiger zu machen.

How To: Bloglovin zeigt keine Bilder an

31 comments

Fee von fairy likes... 18. März 2018 - 14:26

Super toll – vielen Dank für die Anleitung samt Code, liebe Judith. Ich bin ganz glücklich, dass ich endlich eine Lösung für das Problem habe. Liebe Grüße, Fee

Chris 10. Mai 2017 - 21:37

Hallo Judith,

Danke für den Artikel. Das hat mir tatsächlich sehr geholfen. Liebe Grüße, Chris von Bar-Trends.de

Isabella 1. November 2016 - 16:09

Hey, ich nochmal ?. Was für einen Link (Benutzername) hast du denn in dein Social Media Widget eingefügt? Bei mir verlinkt es immer nur auf meine Autoren Seite von Bloglovin‘, oder die Seite kann nicht gefunden werden, wenn ich den Bloglovin‘ Link meines Blogs eingebe.
Danke schonmal ?

Judith P. 2. November 2016 - 16:25

Ich habe folgenden Link eingefügt: https://www.bloglovin.com/blogs/youdiddesign-11103989
Dieser Link zeigt direkt auf meinen Blog auf Bloglovin.
Liebe Grüße
Judith

Isabella 2. November 2016 - 18:15

Vielen Dank für deine Hilfe ?

Isabella 1. November 2016 - 14:54

Vielen Dank für deine tollen Tipps zu Bloglovin‘! Ich habe diese App gerade für mich entdeckt und finde sie auch super für meinen eigenen Blog ?. Eine Sache ist mir jedoch noch unklar: Wie kann ich denn auf Bloglovin‘ ein Bild für mein Blog festlegen (als Profilbild sozusagen)? Aktuell sieht man da immer nur das Bild meines letzten Beitrags, was mich ziemlich stört.
lg Isabella

Judith P. 2. November 2016 - 16:24

Hallo Isabelle, ja dann schau dir mal die anderen Teile meiner Serie an, ich habe z.B. auch darüber geschrieben, wie man mit BLoglovin seinen Blog promoten kann.
Das Profilbild kannst du über Profil bearbeiten ändern.
Liebe Grüße
Judith

Julia F 10. Oktober 2016 - 20:56

Ich liebe es und habe keine Probleme. Tolles Tutorial. Weiter so.

Ursula 13. September 2016 - 13:57

Der Code funktioniert super, herzlichen Dank! Bloglovin ohne Bilder ist einfach doof 🙂

Desiree 23. März 2016 - 19:54

LIEBE JUDITH,

Ich bin seit kurzem auf Bloglovin und es kommt einfach nicht ins rollen. Mein Freund ist Fachmann fürs Webdesign aber schwer beschäftigt, weshalb ich ihm deine tolle Anleitung weitergegeben habe. Jetzt sagt er mir er kann damit nix anfangen, da er mit xml arbeitet und nicht wordpress. kannst du mir helfen, wie das Titelbildproblem in dieser Codierung zu lösen ist ?

Judith P. 3. April 2016 - 16:50

Hallo Desiree,
nein da kann ich leider nicht helfen. Ich weiss nur, wo man in Wordpress den Code einfügen muss.
LG

Tam 9. Februar 2016 - 22:49

Jippie super vielen Dank für die Anleitung! Funktioniert super mit dem Code und war auch gar nicht so schwer einzubauen. Einfach den Code im Child Theme einfügen und voila ☺️
Liebe Grüße Tam?

Sabine 13. September 2015 - 23:16

Liebe Judith,
tausend Dank für deinen Beitrag! Du hast mich wirklich gerettet. Ich hatte schon etliche Blogs, aber nie ein Problem mit Bloglovin. Bei meinem neuen Projekt wurde nichts angezeigt. Bisher hatte ich auch nie das Featured Image genutzt. Ich war schon dabei, alles wieder zum Alten zu ändern, obwohl ein Grid Layout mit Featured Images so viel besser zu meinem neuen Thema passt. Danke dir von Herzen!
Sabine

Judith P. 23. September 2015 - 15:17

Hallo Sabine, es freut mich immer wenn ich helfen kann. Wenn dann noch so ein netter Kommentar zurück kommt umso mehr.
LG
Judith

Sorben 8. Mai 2015 - 10:19

Hi, vielen Dank für den Code! Hat alles wunderbar geklappt. Werde öfter mal reinschauen, sind interessante Artikel!

Judith P. 12. Mai 2015 - 07:34

Bitteschön. Ich freu mich immer wenn ich helfen kann und wenn dann noch ein kleines Dankeschön in Form eines Kommentars zurück kommt, umso mehr.

Carry 21. April 2015 - 13:43

Ha ich wollte gerade dein Tutorial machen da fiel mir auf, dass Bloglovin schon meine Featured Images als Thumbnail nutzt ^^ Das liegt daran, dass ich vor kurzem diese in meinen RSS Feeds eingebunden habe. Dennoch vielen Dank für das Tutorial, das wird sicher einigen helfen 🙂

Judith P. 22. April 2015 - 17:57

Na umso besser. Wie hast du es denn eingebunden? Per Plugin?
Viele Grüße
Judith

Alison 21. April 2015 - 10:22

Erst einmal Danke für deine Mühe. Das Problem habe ich seitdem ich bei Wordpress bin. Komischerweise ging der erste Beitrag mit Bild online (bei Wordpress) nur die anderen danach nicht, obwohl ich nichts gemacht habe.
Ich habe nun die „functions.php“ Datei auf und bin mir unsicher wo ich das hin einfügen soll. Einfach rein klatschen und hoffen, dass es funktioniert will ich nicht : D Wohin soll der Code?

Süße Grüße und vielen dank für deine Hilfe : )
Alison

Judith P. 22. April 2015 - 18:00

Hallo Alison, du kannst den Code einfach am Ende anfügen.
Ich habe mir darüber noch einen Kommentar eingefügt. Aber du hast natürlich Recht in der functions.php zu arbeiten ist nicht ganz ungefährlich.

Nina 19. April 2015 - 19:13

Cool, das wäre auch mal für mich interessant, leider hab ich keine Ahnung von CSS…Und benutze auch noch blogger. Aber selbst zu entscheiden, welches Bild kommt, wäre echt mal ein gutes Feature!

Judith P. 22. April 2015 - 18:12

Hallo, ja für die Code Variante (php) ist schon eine gewisse Vorkenntnis nötig. Tut mir leid, dass ich dir da nicht helfen kann. Zumal ich für Blogger gar keine Hilfe geben kann, da ich es noch nie benutzt habe.

Normann Sötje 15. April 2015 - 22:24

Hallo,

sehr schöner Blog und eine klasse Serie. Werde mir das demnächst nochmal genauer anschauen. Gespeichert ist es schon.
Wünsche noch ein gutes gelingen mit dem Blog und ich werde bestimmt öfters vorbeischauen.

Gruß aus HH

Normann

Judith P. 18. April 2015 - 16:32

Vielen dank Normann für deinen Kommentar, ich glaub du folgst mir auch schon bei Google Plus oder Facebook, richtig? Dann bekommst du immer mit wenn ein neuer Post online geht.
Ich fange gerade erst so richtig an mit meinem Blog und schaffe es neben meinem Vollzeit-Job als Webdesigner auch nicht jeden Tag etwas zu posten. Aber wie gesagt, wenn du meinem sozialen Netzen folgst, bekommst du immer mit, wenn es was neues gibt.
Liebe Grüße
Judith

arne 13. April 2015 - 16:18

Vielen Dank für die Auflösung und die sehr schlanke Lösung.

Ich habe es zwischenzeitlich über eines der von dir angesprochenen Plugins gelöst:
https://wordpress.org/plugins/featured-image-in-rss-feed/

Das funktioniert auch mit der neuen Version von Wordpress tadellos und man hat mit einem Klick das Problem vom Hals. Ich denke nicht, dass so ein kleines Plugin ein großer Performance-Fresser ist, aber Deine Lösung ist natürlich die elegantere.

Judith P. 13. April 2015 - 17:44

Danke für deinen Kommentar. Ja mit Plugin ist es natürlich einfacher. Schön, dass du eine Empfehlung für ein Plugin geben kannst. Vielleicht hilft das anderen Lesern bei der Entscheidung.

Christiane 16. April 2015 - 15:17

Wie sieht das eigentlich aus mit den Plugins?

Also als ich damals anfing hieß es man soll so wenige wie möglich nutzen (Sicherheit undsoweiter)

Judith P. 18. April 2015 - 16:29

Hallo Christiane, da liegst du genau richtig. Desto mehr Plugins du installierst, desto größer wird das Sicherheitsrisiko. Kurz vor Weihnachten z.B. gab es eine große Angriffswelle bei einem sehr bekannten Slider Plugin. Ich hab auch mal gehört, das jedes Plugin der Performance also Ladegeschwindigkeit schadet. Aber vielleicht ist das auch schon überholt. Aber grundsätzlich gilt desto weniger Code desto besser. Ein Plugin hat aber immer mehr Code, als wenn man es selbst direkt in die passende Datei einfügt. Deshalb ja auch Variante 2, die du ja auch verwendest.
Liebe Grüße
Judith

Christiane 19. April 2015 - 18:53

Ja, deswegen verwende ich auch diese Variante 🙂

Mir ist nur in letzter Zeit aufgefallen, dass viele eher auf Plugins setzen und ich mich mit so Performance und Sicherheit eigentlich nie befasse, deswegen nicht wusste, wie aktuell meine Einstellung diesbezüglich sind 😀

(Der Code kann einen auch nicht mit Aktualisierungen nerven :D)

Julian 23. August 2016 - 23:40

@Christiane:
Plugins sollen gerade Leuten die Arbeit am Code abnehmen, eine gute Sache.
Durch die Komplexität von WordPress hat man jedoch keine einfache Übersicht, wann welches Plugin aktiv ist und was es gerade wirklich tut.

Plugins sollten immer aktuell sein, denn der Code eines Plugins ist i. A. öffentlich einsehbar, deswegen sind Sicherheitslücken leichter zu finden als bei selbstgeschriebenem Programm-Code. Außerdem lohnt sich ein (automatischer) Angriff auf Blogs, die ein bestimmtes Plugin installiert haben, viel mehr.

TLDR: Plugins aktuell halten & nicht zu viele verwenden. Beide Regeln gelten immer noch!

@Judith: Danke für deine Anleitung, ich war mir nicht sicher woher Bloglovin das Beitragsbild hernimmt. Ich dachte aus dem Quelltext der Seite, auf RSS bin ich aber irgendwie gerade nicht gekommen^^

Lieben Gruß,
Julian

Judith P. 26. August 2016 - 09:40

Hallo Julian, danke für den ausführlichen und informativen Kommentar. Und du hast vollkommen Recht. Aus diesem Grund versuche ich, wo ich kann Plugins zu vermeiden.
Lieben Gruß
Judith