Fix Max-Width Images in MailChimp RSS-To-Email Campaign

I am a very OCD person and so I always want everything to look perfect, down to the last pixel. The other day I noticed one of my MailChimp RSS-To-Email campaigns wasn’t showing up correctly when viewed on a mobile device. The problem was the image was overflowing off of the screen. After some digging around and research I discovered a few things. First off I added some CSS to fix the problem. I thought that had resolved the problem, but then after testing in Outlook I realized that it doesn’t support the max-width CSS property. Then I tried adding inline HTML into my feed. What I didn’t realize is that MailChimp still pulls the original image from the RSS feed source.

Follow the steps below to easily and quickly resolve the max-width issue in MailChimp and make sure your campaign looks great on all devices!

Step 1

I’m assuming you already have added your images to your WordPress RSS Feed. I recommend setting them to large so at minimum they will fill the width of your Mailchimp campaign template which is 560px. Thumbnails won’t look as nice. Also if you are using services such as Feedly, large images look the best.

Step 2

Next we are going to generate a new RSS feed for your MailChimp campaign which will have images that are sized down to 560px exactly (my WP images were too large at over 700px and I couldn’t change them in the media settings because it would mess up my featured images). So go over to ChimpFeedr, input the URL of your WordPress RSS Feed (domain.com/feed) and set the images scale down to 560px. Then click on “Chomp Chomp.” This will generate a new RSS feed URL for you that looks like this. http://mix.chimpfeedr.com/bcd6b-bj

chimpfeedr

Also note: ChimpFeedr feeds are automatically updated every 8 hours.

Step 3

Take the new Feed URL you got in Step 2 and enter it into the RSS Feed step in your MailChimp campaign. (Note: they now have a new feature called “Resize RSS feed images to fit template.” However this still doesn’t fix the problem for MS Outlook clients. So no need to check it as we are doing this in chimpfeedr.)

mailchimp rss feed timing

Step 4

Now go to the design setup in your MailChimp campaign. I am going to assume you are using the “Basic RSS” template. We now have images that are scaled correctly for desktop and the Outlook mail client. But we need to fix them so they work with mobile devices and are responsive for Gmail, Outlook.com, etc. Here is the CSS and RSS tags I am using. You can enter this into a text block in MailChimp by going to the “source” view.

mailchimp code

<style type="text/css">#feed-images img {
            height:auto !important;
            max-width:560px !important;
            width: 100% !important;}
</style>
<div id="feed-images">*|RSSITEMS:|*
<h2 class="mc-toc-title"><a href="*|RSSITEM:URL|*" target="_blank">*|RSSITEM:TITLE|*</a></h2>
<br />
*|RSSITEM:CONTENT_FULL|* <a href="*|RSSITEM:URL|*" target="_blank">Read in browser &raquo;</a><br />
<br />
*|END:RSSITEMS|*</div>

This will result in your campaign looking like this. It will output the title of your most recent blog post, the image scaled down to 560px to fill the width of the template, and then an excerpt with read more link below it. If you have more than one blog post within the last send period it will simply stack them with the most recent on top.

mailchimp rss email template

And here is how my email looks on a mobile device, according to the MailChimp preview. The CSS code I gave you above fixes the image overflowing problem.

mailchimp responsive

Here is a screenshot directly from my Outlook mail client on my desktop.

mailchimp outlook

And here is a screenshot directly from my Windows Phone.

mailchimp wp8

So now you have a beautiful looking MailChimp RSS-To-Email Campaign which scales perfectly on all devices.

Other MailChimp Tips

I also recommend changing the subject line to pull from the title of your most recent blog post. By default the RSS campaign email subject line will simply say “Latest updates from…” This is not very enticing and won’t grab your readers attention.

Check out an example of some email subject lines from Matthew Woodward. Notice he is using his blog post title.

matthew woodward emails

To do this go under the setup screen in MailChimp and under the “Email Subject” box update it with this RSS tag.

*|RSSITEM:TITLE|*

mailchimp email subject line

Another thing I also recommend doing is backing up your MailChimp lists.

Hopefully these fixes and tips above were helpful, as always feel free to leave your comments below!

Get More Stuff Like This

Marketing, WordPress, Blogging Tips, SEO and Reviews, once a week.

Thank you for subscribing.

Something went wrong.

17 thoughts on “Fix Max-Width Images in MailChimp RSS-To-Email Campaign”

  1. I had the exact same problem setting RSS feed newletter for tenscores.com/daily last week. My solution was to simply give up after a few failed attempts. :-) Thanks for writing this.

  2. I am with Chris! I am about to show my rookie–ness with these 2 questions! Is there a way to do this that will show the whole article in the email? Also which text box in mail chimp do you use to enter the code you created?

    • Hey Lee!

      So if you go into WordPress, under settings and then into Reading you can set the feed to show “full text” instead of summary. Since MailChimp pulls from the feed you have to change it on the WP side. And for you second question I enter it into the top box where my content is. I attached a picture that will probably help make that more clear.

      • Hey Brian – First of all, thank you so much for addressing this issue. It’s been driving me crazy. I’m also new to mailchimp and cannot figure out how to get to the source view. I used the basic template and made some changes using regular merge tags. When I click on the RSS feed section, I get this instead. Any pointers would be extremely helpful. Thanks!

  3. Hi Brian. Just reading this now and I’m almost there in getting my email campaign to work. However, I use Sqaurespace and I’m not looking to include the full amount of content in each email. I’d like to include my header image, a small amount of text, and then the “Read in browser” link. I’m not an html or css person, just trying to fumble my way through this RSS template. Any help would be appreciated. Below is what I have so far, but I can’t get the RSSITEM:IMAGE to appear in the email. Everything else shows up, but for some reason the image disappears unless I include CONTENT_FULL, which I don’t want to do.

    #feedimages img {
    height:auto !important;
    max-width:560px !important;
    width: 100% !important;}

    *|RSSITEMS:|* *|RSSITEM:TITLE|*
    *|RSSITEM:IMAGE|*
    *|RSSITEM:CONTENT|*
    Read more »

    *|END:RSSITEMS|*

  4. Hi, I have followed your instructions but no images are appearing in MailChimp. Please help! This is driving me mad.

  5. Hi Brian I used your tutorial, thank you! However, at the end of my post the words “save save save” are appearing after my post signature. Any idea of how I can get rid of that? Thank you!

  6. Hi Brian. Thanks for this post. I have been looking around to integrate smaller pictures to my post that would appear at the top-left corner foe earch item of my feed. I tried to integrate it in mailchimp using HTML tables, though I am not happy with the results. Any tips ? Best.

  7. Thanks for this detailed solution.

    It gave me a simpler solution for a vertical-stretching problem that I was getting in my WordPress-to-MailChimp email.

    I had 800×800-pixel images that were getting stretched vertically (or compressed horizontally, if you prefer) in email.

    By posting 560×560-pixel images instead of 800×800-pixel images in WordPress, the vertical stretching / horizontal compression disappeared in my MailChimp email.

    Thanks again!

  8. Thank you so much for sharing this! I wanted to jazz up my emails to blog subscribers with images and couldn’t figure out through Mailchimp how to make sure everything was sized appropriately and scaled for different devices. I don’t know CSS at all, so I really appreciate you sharing your code!

Leave a Comment