Adding Images or Thumbnails to Atom 1.0 Entries

Question

This StackOverflow answer suggests that you should use HTML entry content and use a standard <img> tag to link to your images.

<content type="html">
  <![CDATA[
    <a href="http://test.lvh.me:3000/listings/341-test-pics?locale=en">
      <img alt="test_pic" src="http://test.lvh.me:3000/system/images/20/medium/test_pic.jpg?1343246102" />
    </a>
  ]]>
</content>

I have also found something called the Yahoo media extensions here which allows you to add custom additional elements.

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/">
<!-- ommitted -->
  <entry>
    <!-- ommitted -->
    <media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="path_to_image.jpg" />
  </entry>
</feed>

Google also seems to have its own similar extensions. See here.

<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:g="http://base.google.com/ns/1.0">
<!-- ommitted -->
  <entry>
    <!-- ommitted -->
    <g:image_link>http://www.google.com/images/google_sm.gif</g:image_link>
  </entry>
</feed>

My own intuition tells me I should simply be able to add links to images like so:

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <!-- ommitted -->
  <entry>
    <!-- ommitted -->
    <link rel="enclosure" type="image/png" length="1337"
        href="http://example.org/image.png"/>
  </entry>
</feed>

What is the correct approach for maximum compatibility?

Answer 1

The best practice is to do what Wordpress RSS 2.0 feeds do — if you want your post image to appear in feedly for example, put the <p><img...></p> at the top of the content. My eleventy setup has post header image inside article, but outside content variable's contents which are used in the feed. I solve the problem adding the image back:

<item>
...
  <content:encoded>
    <![CDATA[<p>{% include "src/components/partials/post-hero-img.njk" %}</p>{{ post.templateContent | textDeletePresentationDivs | htmlToAbsoluteUrls(absolutePostUrl) | safe }}]]>
  </content:encoded>

source in git

I checked, neither Atom nor RSS 2.0 feeds have post images set anywhere as standalone tags. They're simply at the top of the article's content.

With regards to your examples...

The "vanilla" Atom RSS feed has a schema xmlns="http://www.w3.org/2005/Atom" and its documentation is defined in RFC4287.

According to it, "vanilla" Atom RSS feed strictly can have <logo> which is the 2:1 ratio image, the logo of the feed. Sadly, it is placed in the root of XML (notice atom:logo in the spec, it's not atom:entry:logo). Practically, this means, you can put a picture of your RSS feed itself, but not per-article. If you do put <logo> inside <entry>, the feed won't pass the validators and post image won't appear in feedly (I tried).

Also, spec defines <icon> which is vaguely defined as a small, square image, also placed in the root. Feedly seem to detect the website's favicon anyway, although it doesn't hurt to set this tag up in rss explicitly.

That's all there is — Atom spec doesn't officially define a way how to put images per-article.

Here's where additional namespaces come in (or RSS 2.0, different spec, different XML). You mentioned xmlns:media="http://search.yahoo.com/mrss/" in example. I tried it, post images won't show in feedly. Plus, spec link http://search.yahoo.com/mrss/ is not showing any specs.

Google namespace you quoted, xmlns:g="http://base.google.com/ns/1.0" also doesn't work, post images don't show up in feedly.

The link approach, <link rel="enclosure" type="image/png" length="1337" href="http://example.org/image.png"/> would be promising except length is meant to state the filesize in bytes. In Eleventy that's problematic value to get, for example.

To sum up, the best practice is put post header image at the top of the content, inside <content>.