MailChimp issues with image slices from Photoshop file? [FIX]

Create HTML newsletter in PS without body text.

Slice this up using Photoshop’s slice tool.

Right click to promote any autocreated (grey) slices to user (blue) slices.

File->Save for web and devices.

Select gif or jpg depending if graphics or photo based (respectively).

Saves images and html file.

Open html file in Dreamweaver, even though it LOOKS ok, if you upload this as is to MailChimp and send it, Gmail, hotmail and many others with break up the table layout. Try it and see! It’s very easy to tweak the HTML code to fix this, click read more to find out how.

At present each cell entry would look like:

<td>
<img src=”images/spacer.gif” width=”30″ height=”1″ alt=””>
</td>

But rather than specificy a blank cell and then put an <img> is as it’s content, we want to specify a cell with the <img> as the background to the cell and NO content (or at least not yet).

What you want to do is highlight the width=”xx” height=”xx” and CUT that (CMD-X or CTRL-X) then PASTE it in just after td

<td width=”30″ height=”1″>
<img src=”images/spacer.gif” alt=””>
</td>

Then after the height tag you want to add background=”img_you_want” tag. So just copy and paste the “images/image_your_want.gif” from the line below and then you’re left with:

<td width=”30″ height=”1″ background=”images/spacer.gif”>
<img src=”images/spacer.gif” alt=””>
</td>

Since we want the contents to be empty you can now remove the middle line simply leaving:

<td width=”30″ height=”1″ background=”images/spacer.gif”>
</td>

You’re done.

If you want to add text OVER the table background images you’d simply place it before the </td> tag.

<td width=”30″ height=”1″ background=”images/spacer.gif”>
SOME TEXT CAN GO HERE
</td>

Now when you upload your files to MailChimp to generate a newsletter it should display correctly in Hotmail, Gmail, etc without the table and background being mis-aligned and broken.

Recent queries:

  • how to slice an image in mailchimp
  • using slices in mailchimp

Author: Scoopz

Creator of http://blog.scoopz.com Computer Nerd with a bias towards anything and everything Apple. Petrol head with a 5.0L V10 507bhp 205mph car...and a 4.0L V6 4x4 for the dog...and a 2.0L 25yr stripped out, rolled caged car for the track too. Owner of a giant Bernese Mountain Dog. Proud to be an all-round geek!

6 thoughts on “MailChimp issues with image slices from Photoshop file? [FIX]”

  1. Thanks! This is working well for me.. could you please also show how to change the code if we want to assign a URL to a sliced element?

Leave a Reply