Are you using MailChimp to manage your blog email subscriptions? If not, you should be. But you also need to make sure that the images you use don’t break your MailChimp email layout. Don’t worry, it’s much easier than you might think.
First, the problem.
There is a good chance that your email template is setup to be 600 pixels wide… with a content area smaller than that — if you chose a template with a sidebar than the content section is significantly smaller than that.
Due to the limitations of CSS support in most email clients you cannot easily (and consistently) set a “max-size” for images in your email campaigns. This means that if your blog posts include images that are wider than your MailChimp template’s content area, the template will simply expand to contain your images… but only in the section containing the blog posts, not the header or footer. The result if a broken template design.
Are your images the wrong size? Often, blog images are pulled into feeds at a size that’s much larger than necessary, which can alter the look of your campaign. The format of the images needs to be changed on the feed.
— MailChimp KB Article “Troubleshooting RSS in Campaigns”
That last sentence in there is MailChimp’s way of saying, “We’re not going to deal with that issue in our tools… you figure something out on your own.”
The geeky fix.
There are two ways to solve this issue. If you are a developer or if you want maximum control over your RSS feed, then you can customize your RSS feed to automatically filter images larger than your email template’s width. I recommend using a script like WP Thumb for real-time image resizing.
If you’re using WordPress then you can do this in a custom RSS feed template or via some WP filters. See here for options:
The easy fix.
If you don’t need this level of customization (and you probably don’t) then the simple fix is to use a solution that MailChimp provides but does not promote as much as they should: ChimpFeedr.
What is ChimpFeedr? It is an RSS aggregator. The main purpose is to allow you to combine multiple RSS feeds into one master feed that you can then use for an RSS to email campaign. Here’s how MailChimp describes it:
Enter a bunch of RSS feeds into ChimpFeedr, and we’ll mash ’em up into one master RSS feed. Then, maybe you can use that master feed for your awesome RSS-to-email campaigns!
But how does this fix my image problem? Simple. This little checkbox will tell ChimpFeedr to automatically scan your feed(s) for large images and then resize them for you!
And you don’t have to add more than one feed for ChimpFeedr to work. You can use it to filter just one feed. Here’s how:
- (Optional but useful.) Go to the archive page of your last email, open your browser’s “Inspector” window, and look at how wide one of your main content paragraphs is. This will give your your main content size (a.k.a. the max-width of your images). Mine is 564px and I am not using a template with a sidebar. A client’s was 360px and they were using a sidebar.
- Copy your full RSS feed URL… probably something like http://benstewart.net/feed/
- Go to ChimpFeedr and paste your feed URL into the box.
- Click the checkbox for “Resize Images?”
- Enter the content width from Step #1 in the “Scale down images…” box. If you didn’t do Step #1 then just keep the default or guess.
- Click the button and ChimpFeedr will say something like, “Your mix is being updated and will be accessible at:” then provide you a link to your new RSS feed.
- Copy the new RSS feed’s link and paste it into your browser. It will start off empty. Wait about 1-2 minutes then reload until you see your content.
- Login to MailChimp and edit your RSS to Email Campaign.
- Replace your old RSS feed URL in the settings with the new ChimpFeedr RSS feed URL.
- Confirm and re-start your campaign.
- Sleep a little easier each night knowing that your awesome content will look spectacular in your email template.
Now it’s your turn: What are your favorite MailChimp tips and tricks?