At lot of feeds I read tend to include image headers alongside the post. Sort of like a headline image for the post or article.

Feed image example

To do this in Jekyll is pretty straight forward, once you know how!

Generating an RSS feed in Jekyll is a pretty trivial affair. In a nutshell you create a feed.xml file at the root of your site and put the following code into it.

---
layout: null
---
<?xml version="1.0" encoding="UTF-8"?>  
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">  
  		<channel>  
		<title>{{ site.title | xml_escape }}</title>  
		<description>{{ site.description | xml_escape }}</description>  
		<link>{{ site.url }}{{ site.baseurl }}/</link>  
		<atom:link href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" rel="self" type="application/rss+xml"/>  
		<pubDate>{{ site.time | date_to_rfc822 }}</pubDate>  
		<lastBuildDate>{{ site.time | date_to_rfc822 }}</lastBuildDate>  
		<generator>Jekyll v{{ jekyll.version }}</generator>  
		{% for post in site.posts limit:10 %}  
  		<item>  
    		<title>{{ post.title | xml_escape }}</title>  
    		<description>{{ post.content | xml_escape }}</description>  
    		<pubDate>{{ post.date | date_to_rfc822 }}</pubDate>  
	        <link>{{ post.url | prepend: site.baseurl | prepend: site.url }}</link>  
	        <guid isPermaLink="true">{{ post.url | prepend: site.baseurl | prepend: site.url }}</guid>  
	        {% for tag in post.tags %}  
	        <category>{{ tag | xml_escape }}</category>  
	    {% endfor %}  
    	{% for cat in post.categories %}  
    		<category>{{ cat | xml_escape }}</category>  
    	{% endfor %}  
  		</item>  
		{% endfor %}  
  		</channel>  
</rss> 

When the Jekyll build process runs you get the resultant feed.xml file including all the feeds. A cut off example feed.xml is below;

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  		<channel>
		<title>Scriven</title>
		<description>This is the blog of Christian Dadswell
		</description>
	<link>http://scriven.chrisdadswell.co.uk/</link>
	<atom:link href="http://scriven.chrisdadswell.co.uk/feed.xml" rel="self" type="application/rss+xml"/>
	<pubDate>Wed, 17 Jun 2015 12:37:40 +0100</pubDate>
	<lastBuildDate>Wed, 17 Jun 2015 12:37:40 +0100</lastBuildDate>
	<generator>Jekyll v2.5.3</generator>

  		<item>
    		<title>Displaying Jekyll variables in a markdown formatted post</title>
    		<description>&lt;p&gt;Just a quick post to note how to include Jekyll liquid tags in a code segment block that is formatted in markdown.
		...

In order to place a header image for post or article I added the following to the feed.xml file just before the post contents.

<description><![CDATA[<img src='{{ post.image }}' width='{{ post.imageW }}' height='{{ post.imageH }}'><br><p>]]>{{ post.content | xml_escape }}</description>

The CDATA section ensures that anything within the CDATA tag (<![CDATA[...]]) isn’t interpreted as markup.

<![CDATA[<img src='{{ post.image }}' width='{{ post.imageW }}' height='{{ post.imageH }}'><br><p>]]>  

Note that the post image (url), width and height are all controlled by Jekyll frontmatter variables. Frontmatter variables are builtin or custom variables that you can put at the front of your markdown post or article file.

Here is an example of the frontmatter for this post, 2015-06-16-add-image-to-jekyll-posts-rss-feed.md;

---
layout: post
title:  "Adding an image to a Jekyll post frontmatter that only displays in the RSS feed"
date:   2015-06-17 16:51:46
author: christian
image: http://scriven.chrisdadswell.co.uk/assets/images/iLoveJekyll.jpg
imageW: 400
imageH: 300
tags:
- jekyll 
- rss
---

< content of post >

Note: The image variable above has to be set to the full path of the image and you can’t use /assets/images/iLoveJekyll.jpg

This means I can set a unique image per post and define the height and width. I could even take this a step further and set the image height and width in the global Jekyll _config.yml file. In this way I wouldn’t need to include the imageW and imageH variables in each post, but could override them (per post) should I want or need to. Jekyll is your flexible friend(tm)!

The only difference in referencing global variables within the feed.xml would be;

<description><![CDATA[<img src='{{ post.image }}' width='{{ site.imageW }}' height='{{ site.imageH }}'><br><p>]]>{{ post.content | xml_escape }}</description>

Note: the site.imageW and site.imageH above. ‘site’ refers to global variables set in the _config.yml

Once you save off your post the background jekyll build process will regenerate the feed.xml and you’ll be able to view the fruits of your labour.

Any questions or comments? Feel free to drop them below…