Add whitespace to image and save file to server

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

Open in new window

michaelgiaimoAsked:
Who is Participating?
 
Ray PaseurConnect With a Mentor Commented:
Here is the final version that I am keeping in my library.  It's a good question, for sure!  All the best, ~Ray
<?php // RAY_image_pad_right.php
error_reporting(E_ALL);


// DEMONSTRATE HOW TO ADD WHITE PADDING TO THE RIGHT SIDE OF AN IMAGE


// MAN PAGES
// http://php.net/manual/en/function.imagecreatefromjpeg.php
// http://php.net/manual/en/function.imagesx.php
// http://php.net/manual/en/function.imagesy.php
// http://php.net/manual/en/function.imagecolorat.php
// http://php.net/manual/en/function.imagecolorsforindex.php
// http://php.net/manual/en/function.imagecreatetruecolor.php
// http://php.net/manual/en/function.imagefill.php
// http://php.net/manual/en/function.imagecolorallocate.php
// http://php.net/manual/en/function.imagecopyresampled.php
// http://php.net/manual/en/function.imagecopymerge.php
// http://php.net/manual/en/function.imagecolortransparent.php
// http://php.net/manual/en/function.imagepng.php
// http://php.net/manual/en/function.imagedestroy.php


// LOCATION OF THE IMAGE (MAYBE FROM $_GET URL STRING?)
$url = 'http://filedb.experts-exchange.com/incoming/2012/01_w01/t537963/airport.jpg';
$src = imageCreateFromJPEG($url);

// GET THE ORIGINAL DIMENSIONS
$src_wide = imagesX($src);
$src_high = imagesY($src);

// USE LOWER RIGHT PIXEL TO DETERMINE THE PADDING COLOR
$pixel = imageColorAt($src, $src_wide-1, $src_high-1);
$clear = imageColorsForIndex($src, $pixel);

// OR JUST USE WHITE/TRANSPARENT
$clear = array
( 'red'   => 255
, 'green' => 255
, 'blue'  => 255
, 'alpha' => 127
)
;

// COMPUTE DIMENSIONS FOR THE NEW IMAGE
$dst_wide = $src_wide + 10;
$dst_high = $src_high;

// CREATE A NEW IMAGE RESOURCE AT THE NEW SIZE
$dst = imageCreateTrueColor($dst_wide, $dst_high);
imageAlphaBlending($dst, TRUE);

// FILL THE IMAGE WITH THE CLEAR BACKROUND COLOR
$bgclr = imageColorAllocateAlpha
( $dst
, $clear["red"]
, $clear["green"]
, $clear["blue"]
, $clear["alpha"]
)
;
imageFill($dst, 0, 0, $bgclr);


// COPY THE IMAGE INTO THE NEW IMAGE RESOURCE
imageCopyMerge
( $dst
, $src
, 0
, 0
, 0
, 0
, $src_wide
, $src_high
, 100
)
;

// STORE THE IMAGE ON THE SERVER
imagePNG($dst, 'RAY_junk/EE_image_pad_right.png', 9, PNG_ALL_FILTERS);

// OR ACTIVATE THIS TO SEND THE IMAGE TO THE BROWSER
// header('Content-type: image/png');
// imagePNG($dst);

// FREE THE RESOURCES
imageDestroy($src);
imageDestroy($dst);

// SHOW THE STORED IMAGE
echo '<body bgcolor="gray">';
echo '<img src="RAY_junk/EE_image_pad_right.png" />';

Open in new window

0
 
Ray PaseurCommented:
Please post a sample image here.  I can show you the PHP code, but I want to test it before I post it.  Thanks, ~Ray
0
 
michaelgiaimoAuthor Commented:
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
Ray PaseurCommented:
Cool, thanks!  I have to leave for work now, but I will be able to give you a script a little later this morning.  Where is the airport?
0
 
michaelgiaimoAuthor Commented:
Thanks - it's in Dubai.
0
 
Ray PaseurCommented:
See http://www.laprbass.com/RAY_temp_michaelgiaimo.php
<?php // RAY_temp_michaelgiaimo.php
error_reporting(E_ALL);


// DEMONSTRATE HOW TO ADD TRANSPARENT PADDING TO THE RIGHT SIDE OF AN IMAGE

// MAN PAGES
// http://php.net/manual/en/function.imagesx.php
// http://php.net/manual/en/function.imagesy.php
// http://php.net/manual/en/function.imagecolorat.php
// http://php.net/manual/en/function.imagecolorsforindex.php
// http://php.net/manual/en/function.imagecreatetruecolor.php
// http://php.net/manual/en/function.imagefill.php
// http://php.net/manual/en/function.imagecolorallocate.php
// http://php.net/manual/en/function.imagecopyresampled.php
// http://php.net/manual/en/function.imagecopymerge.php
// http://php.net/manual/en/function.imagecolortransparent.php
// http://php.net/manual/en/function.imagepng.php
// http://php.net/manual/en/function.imagedestroy.php


// LOCATION OF THE IMAGE (MAYBE FROM $_GET URL STRING?)
$url = 'http://filedb.experts-exchange.com/incoming/2012/01_w01/t537963/airport.jpg';
$src = imageCreateFromJPEG($url);

// GET THE ORIGINAL DIMENSIONS
$src_wide = imagesX($src);
$src_high = imagesY($src);

// USE LOWER RIGHT PIXEL TO DETERMINE ITS TRANSPARENCY
$pixel = imageColorAt($src, $src_wide-1, $src_high-1);
$clear = imageColorsForIndex($src, $pixel);

// COMPUTE DIMENSIONS FOR THE NEW IMAGE
$dst_wide = $src_wide +10;
$dst_high = $src_high;

// CREATE A NEW IMAGE RESOURCE AT THE NEW SIZE
$dst = imageCreateTrueColor($dst_wide, $dst_high);

// FILL THE IMAGE WITH THE CLEAR BACKROUND COLOR
$clear = imageColorAllocate($dst, $clear["red"], $clear["green"], $clear["blue"]);
imageFill($dst, 0, 0, $clear);

// COPY THE IMAGE
imageCopyMerge
( $dst
, $src
, 0
, 0
, 0
, 0
, $src_wide
, $src_high
, 100
)
;

// SET BACKGROUND TO COMPLETELY TRANSPARENT
// imageColorTransparent($dst, $clear);

// STORE THE IMAGE ON THE SERVER
imagePNG($dst, 'RAY_junk/EE_temp_michaelgiaimo.png', 9, PNG_ALL_FILTERS);

// OR ACTIVATE THIS TO SEND THE IMAGE TO THE BROWSER
// header('Content-type: image/png');
// imagePNG($dst);

// FREE THE RESOURCES
imageDestroy($src);
imageDestroy($dst);

// SHOW THE STORED IMAGE
echo '<body bgcolor="black">';
echo '<img src="RAY_junk/EE_temp_michaelgiaimo.png" />';

Open in new window

0
 
Ray PaseurCommented:
Still tinkering... This may be a little bit better.  HTH, ~Ray
<?php // RAY_image_pad_right.php
error_reporting(E_ALL);


// DEMONSTRATE HOW TO ADD WHITE PADDING TO THE RIGHT SIDE OF AN IMAGE


// MAN PAGES
// http://php.net/manual/en/function.imagecreatefromjpeg.php
// http://php.net/manual/en/function.imagesx.php
// http://php.net/manual/en/function.imagesy.php
// http://php.net/manual/en/function.imagecolorat.php
// http://php.net/manual/en/function.imagecolorsforindex.php
// http://php.net/manual/en/function.imagecreatetruecolor.php
// http://php.net/manual/en/function.imagefill.php
// http://php.net/manual/en/function.imagecolorallocate.php
// http://php.net/manual/en/function.imagecopyresampled.php
// http://php.net/manual/en/function.imagecopymerge.php
// http://php.net/manual/en/function.imagecolortransparent.php
// http://php.net/manual/en/function.imagepng.php
// http://php.net/manual/en/function.imagedestroy.php


// LOCATION OF THE IMAGE (MAYBE FROM $_GET URL STRING?)
$url = 'http://filedb.experts-exchange.com/incoming/2012/01_w01/t537963/airport.jpg';
$src = imageCreateFromJPEG($url);

// GET THE ORIGINAL DIMENSIONS
$src_wide = imagesX($src);
$src_high = imagesY($src);

// USE LOWER RIGHT PIXEL TO DETERMINE ITS TRANSPARENCY
$pixel = imageColorAt($src, $src_wide-1, $src_high-1);
$clear = imageColorsForIndex($src, $pixel);

// OR JUST USE WHITE
$clear = array
( 'red'   => 255
, 'green' => 255
, 'blue'  => 255
)
;

// COMPUTE DIMENSIONS FOR THE NEW IMAGE
$dst_wide = $src_wide +10;
$dst_high = $src_high;

// CREATE A NEW IMAGE RESOURCE AT THE NEW SIZE
$dst = imageCreateTrueColor($dst_wide, $dst_high);

// FILL THE IMAGE WITH THE CLEAR BACKROUND COLOR
$clear = imageColorAllocate
( $dst
, $clear["red"]
, $clear["green"]
, $clear["blue"]
)
;
imageFill($dst, 0, 0, $clear);

// COPY THE IMAGE INTO THE NEW IMAGE RESOURCE
imageCopyMerge
( $dst
, $src
, 0
, 0
, 0
, 0
, $src_wide
, $src_high
, 100
)
;

// STORE THE IMAGE ON THE SERVER
imagePNG($dst, 'RAY_junk/EE_temp_michaelgiaimo.png', 9, PNG_ALL_FILTERS);

// OR ACTIVATE THIS TO SEND THE IMAGE TO THE BROWSER
// header('Content-type: image/png');
// imagePNG($dst);

// FREE THE RESOURCES
imageDestroy($src);
imageDestroy($dst);

// SHOW THE STORED IMAGE
echo '<body bgcolor="black">';
echo '<img src="RAY_junk/EE_temp_michaelgiaimo.png" />';

Open in new window

0
 
michaelgiaimoAuthor Commented:
Thanks so much, will play around with this.  BTW - no need for clear, padding can definitely just be white.
0
 
michaelgiaimoAuthor Commented:
Sorry, one more thing we can simplify - the source image will ALWAYS be 185px wide x 127px high.  No need to get dimensions.
0
 
Ray PaseurCommented:
No problem getting the dimensions.  You might consider how you want to set the padding, but that's a separate line of inquiry.  If all you need is right-side white space, this would do the trick.
0
 
michaelgiaimoAuthor Commented:
Thanks man, this worked perfectly!  
0
 
michaelgiaimoAuthor Commented:
PERFECT!
0
 
Ray PaseurCommented:
Thanks for the points -- it's a great question! ~Ray
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.