Share this question

Welcome to Teachnovice Q&A, where you can ask questions and receive answers from other members of the community.

This is a collaboratively edited question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

Add whitespace to image and save file to server

0 like 0 dislike
198 views

I have a script that generates some HTML for newsletters. I'm floating an image using "align=left" and wrapping text around it. I use an inline CSS style, in this case margin-right, to give the image some breathing room. Outlook ignores this. Outlook also ignores padding - I even tried a 10px border-right, it ignored that, too.

I can't change the layout and put the image in a table. I am thinking of using GD to manipulate the image, adding 8px of whitespace to the right side of it. The catch is, since this is a newsletter going out to thousands of people, is that I then need to save the modified image to the server somewhere so I can link to it. I don't want to generate this on the fly.

I have zero experience with GD or saving files to a location with PHP. Here is my image code:

<img alt="<?php print $main2['title']; ?>" height="127" width="185" src="http://www.mydomain.com/uploads/<?php print $main2['filename']; ?>" align="left" style="margin:8px 8px 0 0;"/> 
asked Jan 5, 2012 by anonymous  
Non-web-based mail clients don't behave precisely as web-pages do or ought to, and they don't necessarily adhere to web standards, particularly not Outlook; you have to take a more specific approach for this very kind of this to handle compatibility. Outlook has predefined support for certain HTML
I am absolutely positive that padding the image itself with whitespace is not the right solution to your problem. Why don't ask a html/css question of "how do I get this to look right in outlook"?

2 Answers

0 like 0 dislike

You should first avoid css for a newsletter as you can't rely on it, except if you make an text only version of it.

This method seems a little overkill for this simple problem. Plus de fact that your images are going to be modified forever. If you send your newsletter to thousands of people with css in it, i think you should first make sure of your client are all able to check it correctly.

You said that you can't change the layout, can i ask why ?

Now, to answer your question, you don't need GD to do this, you can simply make a script to "transform" your images in batches and have them all ready for your newsletter.

Eg: http://www.imagemagick.org/Usage/thumbnails/#pad

two suggestions

First

Try to use tables instead of css in your newsletter, you will be able to pad effectively with a table inside a table.

Second

Check at the problem first, the design is an issue and it is really important if you want to reach correctly all your suscribers. Have a look at mailchimp free acounts, you can setup a newsletter template all and test it all for free, you will be able to check the generated code.

 

answered Jan 5, 2012 by anonymous  
0 like 0 dislike

You can use a gif spacer (old school html yeah):

<img alt="" height="127" width="8" src="http://www.mydomain.com/spacer.gif" align="left" /> 

A Spacer is a simple 1x1 transparent pixel, you give it the size you need with html attributes and that should do the trick.

Btw your main issue is actually how you have build your html/css. Here is some great ressources on how to do cross-clients html emails: http://www.campaignmonitor.com/design-guidelines/

 

answered Jan 5, 2012 by anonymous  
...