MailChimp vs. WordPress RSS vs. Jetpack: Getting the Featured Image

Intro

I recently created a website to document my experience cheering on runners in races, primarily in the NYC area (shameless plug, sorry). I don’t need to do anything sophisticated – it’s a blog at its core!

Because I currently have a low number of subscribers, I can get away with using the free tier of the MailChimp marketing automation platform to reach out to them. Though I do intend to have a newsletter in the future, the only thing I’m interesting in doing right now is alerting my subscribers when a new blog post is published. Perhaps the most straightforward way of doing so is sending out an email whenever my blog’s RSS feed changes.

RSS?

RSS is, according to Wikipedia, “a type of web feed which allows users to access updates to online content in a standardized, computer-readable format”. It came about in the late 90’s, and there was a time when one might use a RSS feed aggregator to keep track of changes on one’s favorite websites. One relatively modern application of RSS is tracking podcast updates. How are you going to know when new episodes have come out if you aren’t following the corresponding RSS feed??

It’s also still a useful tool for bloggers. MailChimp has an option to alert your subscribers at a given time of day if a new entry has been added to an RSS feed. If you pick the RSS feed that corresponds to your list of blog posts, then this will effectively tell your subscribers that you have posted something new.

This all seems simple enough. But things get more complicated as we work out the design of the campaign email. I post no more than one blog entry a day (frequently less than that), and wish to check for new blog posts daily. Thus, I expect to only have one additional entry in my RSS feed when the email goes out. In my email, I’d like to have the title of the new post; the featured image (or post thumbnail as it’s also called) that accompanies the post; and an excerpt of the content followed by a link to continue reading on my website. Below is an example of a campaign template before and after the corresponding merge tags are replaced with content from the new blog post (respectively):

The part that requires work is grabbing that featured image. By default, images aren’t included in the RSS feed. We need to attach them to each RSS item ourselves.

NB: This assumes that under the Reading section in the WordPress settings you have it set to show the Summary for each article in a feed.

What do we need to do?

There are essentially two things we need to do:

1. Add the media namespace to our RSS file.
2. Add a media tag to each blog feed entry, attaching our post image in a way that still produces valid RSS.

My code is based on this Gist, with a slight modification to allow compatibility with Jetpack.

Adding the media namespace

To add the media namespace, we just need to insert the xmlns:media line in the rss tag, which may look something like this beforehand:

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/">

To do so, there is a useful WordPress hook called rss2_ns, which lets us echo additional namespaces into the rss tag. The code looks like this:

<?php
function add_media_namespace() {
  echo 'xmlns:media="http://search.yahoo.com/mrss/"'."\n";
}
add_action( 'rss2_ns', 'add_media_namespace' );

And that’s it!

Adding the media tags

To add the media tags, we can use another convenient hook called rss2_item. If we find an RSS item that has a featured image, then we want to make sure we include that image in the feed. This is the basis of the code we will use:

<?php
add_action('rss2_item', 'add_featured_image_node');
function add_featured_image_node() {
	global $post;
	if(has_post_thumbnail($post->ID)):
	    $img_id = get_post_thumbnail_id($post->ID);
	    $attachment_url = wp_get_attachment_url($img_id);
	    $src = wp_get_attachment_image_src($img_id, array(400, 300));
	    $string = '<media:content url="' . $attachment_url . '" width="' . $src[1] . '" height="' . $src[2] . '" medium="image" />';
	    echo $string;
	endif;
}

The media tag will be recognized because we introduced the media namespace via the rss2_ns hook!

You might ask why I didn’t just use the output of wp_get_attachment_img_src to provide the URL, as opposed to using a separate function wp_get_attachment_url. Because with wp_get_attachment_img_src, your URL will come with query parameters (such as a fit parameter that controls the size of the image returned) that will produce invalid RSS. So make sure not to change this!

The term array(400, 300) specifies the width and height of the images I would like to be returned. You can choose whatever values you’d like. However, there is no guarantee that the returned image will fit those dimensions exactly. Most of the photos I take are 3:2. I tend to get the desired width, but the height is adjusted to preserve the aspect ratio. So for whatever width and height are returned – those are the values I use in the media tag!

Jetpack – Disable Enhanced Distribution

Jetpack is a popular WordPress plugin that makes it easy to share your content with more people. The good and bad news is that it’s a massive package that consists of many moving parts. In the case of getting MailChimp to play nice with WordPress, it’s all bad news. There is one component in particular that causes problems with valid RSS creation: Enhanced Distribution.

Enhanced Distribution enables WordPress.com users to find your posts via a public feed. If your target audience isn’t fellow bloggers who use WordPress.com as a social network, then you can safely disable this plugin.

When Enhanced Distribution is enabled, each of your posts is given a tag that is not recognized by RSS readers. This means that MailChimp will not verify your RSS feed. Luckily, the individual components that make up Jetpack can be disabled individually, including Enhanced Distribution. This link will show you how to get to that screen. Just deactivate Enhanced Distribution and your RSS feed should verify.

Solution

Putting it all together, add the following to functions.php and that should do the trick:

<?php
function add_media_namespace() {
  echo 'xmlns:media="http://search.yahoo.com/mrss/"'."\n";
}
add_action( 'rss2_ns', 'add_media_namespace' ); // relevant WordPress hook

add_action('rss2_item', 'add_featured_image_node');
function add_featured_image_node() {
	global $post;
	if(has_post_thumbnail($post->ID)):
	    $img_id = get_post_thumbnail_id($post->ID);
	    $attachment_url = wp_get_attachment_url($img_id);
	    $src = wp_get_attachment_image_src($img_id, array(400, 300));
	    $string = '<media:content url="' . $attachment_url . '" width="' . $src[1] . '" height="' . $src[2] . '" medium="image" />';
	    echo $string;
	endif;
}

Conclusion

This post should help you get featured images in MailChimp RSS-based campaign emails! There are several WordPress plugins that are designed to enable this functionality, but I have not found any that properly add the media tag to each post. Luckily it didn’t take too much work to add it myself!