Add whitespace to image and save file to server

2020-07-27 06:07发布

问题:

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;"/>

回答1:

You can certainly rely on CSS for newsletters - just certain properties only, and inline. We run a very successful set of campaigns and the newsletters look just fine for everyone.

It's not a problem that we have a folder on our web server where there are a few thousand small modified images.

We can't change the layout, well, because that's what some important people want - and the important people pay me a decent amount of money to make what they want happen. Yeah, I could raise a big stink about it and probably convince them otherwise, but if I could conversely spend a few hours and get it to work, why not?

FWIW, I did manage to get this done with GD - wasn't as complicated as I thought - will post the script if anyone else needs it:

// get image
$url = 'myimage.jpg';
$src = imagecreatefromjpeg($url);

// dimensions (just to be safe, should always be 185x127 though)
$src_wide = imagesx($src);
$src_high = imagesy($src);

// set white padding color
$clear = array('red'=>255,'green'=>255,'blue'=>255);

// new image dimensions with right padding
$dst_wide = $src_wide+8;
$dst_high = $src_high+8;

// New resource image at new size
$dst = imagecreatetruecolor($dst_wide, $dst_high);

// fill the image with the white padding color
$clear = imagecolorallocate( $dst, $clear["red"], $clear["green"], $clear["blue"]);
imagefill($dst, 0, 0, $clear);

// copy the original image on top of the new one
imagecopymerge($dst,$src,0,8,0,0,$src_wide,$src_high, 100);

// store the new image in tmp directory
$pth = 'tmp/myimage.jpg';
imagejpeg($dst, $pth, 100);

// free resources
imagedestroy($src);
imagedestroy($dst); 


回答2:

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.



回答3:

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/