How to Add Images to your RSS Campaigns with MailChimp
So I just ran into an interesting problem with a client who does a Daily Digital Drawing on her iPad and sends it out to over 100 people via email each day. So we decided to set her up with MailChimp to do the mailing to reduce the amount of work needed each day. To streamline things, we get her to post her Daily Digital Drawing to her blog on her website where it gets auto-posted to her Facebook page as soon as she publishes. Then we setup an RSS Campaign through Mailchimp to send out an email with all new posts to her subscribers on a daily basis at 3pm because she usually has her drawing finished and posted by then. The hiccup came with the RSS Campaign and the RSS feed from her WordPress website. The image from her post was not showing up in the email so her readers had to do an extra step to go to their browser and see the post. We wanted to make this easier, so we set out to find a way to make sure it shows up in the RSS feed correctly so that MailChimp can merge the image into the daily email.
I’m mostly writing this post to help others who might be trying to do the same thing! So here are some steps for how I got it going:
1. Modify WordPress to create a picture site that is appropriate for the email.
Go to your WordPress theme folder and change the functions.php file to have a custom size: add_image_size( ‘my-email-thumb’, 580, 9999 ); //580 pixels wide (and unlimited height)
In order for the code up top to work, your theme has to support Post Thumbnails.
2. Install the Regenerate Thumbnails plugin in WordPress so that all your current pictures have the new image size created.
Note above that I labeled the new image size as “my-email-thumb”; we’ll use that later. Also note that I set the width of the image size to 580 and the height to unlimited; adjust these as needed for your use.
3. Modify the RSS file in your WordPress install to pull in the new image and put it in the feed.
- Open the feed-rss2.php file in the wp-includes directory
- Add xmlns:media=”http://search.yahoo.com/mrss/” to inside of the <rss > start tag. This is the namespace that Yahoo uses. It works with MailChimp’s RSS campaigns.
- Go to the spot in the code you see the <item> start tag.
- Paste the following code
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), ‘my-email-thumb’ ); $url = $thumb[‘0’];?>
<media:content url=”<?=$url?>” type=”image/jpeg” width=”580″/>
- Upload the new feed-rss2.php file to your web server. You should now be able to got to http://your-wordpress-site.com/feed/ and see the rss xml code showing a link to the image in your post.
4. Create an RSS Campaign from within MailChimp and add the merge tag *|RSSITEM:IMAGE|* in the content area where you want the image to show up.
That’s it! When you Test the Campaign in a pop up window it should show your image in the email.
I’m sure I’ve missed a few steps, so this is not a full on How-To, but for WordPress developers who know what they are doing, this should be a pretty easy step by step. Feel free to comment below if you have any questions.
Pingback: How to Focus at Will: Monday Hotsheet #144
Some notes because I found this post while searching in Google for help with Mailchimp’s attrocious implementation of the RSSITEM:IMAGE feature.
Controlling the size will drive you crazy, especially if you want the mobile preview to look good as well. You can control it’s default size using the ‘width’ property of the media tag, but that will be locked in, and MC gives you no way to implement it’s responsive images feature on the RSS image.
The solution I finally figured out was to wrap the image in a div.rss-image-container (max-width:100%), then add in a [style type=’text/css’] (with of course) that gave a width:100%; to .rss-image-container img.
Anyway you get the idea. You’ll need to add HTML around the RSSITEM|IMAGE tag in the RSS block, then add the CSS section to style img inside of the container.
I havent’ tested my solution in all email clients but it works on my phone and in the preview so you’re probably okay (most phones will surely support some CSS right? It’s the old ones that make us all go bananas.
Hi Jeremy! Sorry I missed this comment…I’ve been away on vacation for a while. I have certainly pulled out a few hairs dealing with how various phones will render an email, so that’s great to see you have found solution that seems to work to keep the image size correct while also keeping it responsive. I’ll have to give that a try soon and test it on a few more phones. Cheers! Andrew