#How can images be displayed in RSS Readers like Feedly?

7 messages · Page 1 of 1 (latest)

ripe copper
#

I was following the astro guide to create a blog, so i use the astrojs/rss package to generate my rss.xml and got this: https://peterdotdev-astro-blogs.netlify.app/rss.xml

The thing is that when RSS readers preview your content images aren't being displayed. (see attached image )

So my thoughts are that the rss.xml.js that generates the rss.xml file:

import rss, { pagesGlobToRssItems } from '@astrojs/rss';

export async function GET(context) {
  return rss({
    title: 'Astro Learner | Blog',
    description: 'My journey learning Astro',
    site: context.site,
    items: await pagesGlobToRssItems(import.meta.glob('./**/*.md')),
    customData: `<language>en-us</language>`,
  });
}

Is missing a tag when generating the <items></items> in the rss.xml that makes feedly readers show the image in their previews.

So taking a post.md for example this one:

---
layout: ../../layouts/MarkdownPostLayout.astro
title: My Fourth Blog Post
author: Astro Learner
description: "This post will show up on its own!"
image:
    url: "https://docs.astro.build/default-og-image.png"
    alt: "The word astro against an illustration of planets and stars."
pubDate: 2022-08-08
tags: ["astro", "successes"]
---
This post should show up with my other blog posts, because `Astro.glob()` is returning a list of all my posts in order to create my list.

What should i do to fix this issue?

image.png
serene hinge
#

@compact scroll didn’t you get this working ?

compact scroll
#

Partly but not fully

#

It’s two issues really

#

You need an “enclosure” but only some readers support it, mainly because rss is a pretty terrible spec

#

Also, you almost always need absolute not relative image paths

#

Whether you’re using mdx, md, content collections, or the older glob imports, you often need to mess around with remark/rehype plugins to get things working too