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:

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

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=””>

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=””>

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”>

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”>

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.

6 Replies to “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

This site uses Akismet to reduce spam. Learn how your comment data is processed.