GD: pad images with whitespace

[eluser]Leon Stafford[/eluser]
Hi,

I need to add whitespace to images and increase their width.

I've searched the forums but can't find what I'm after.

I need to resize my images to 240x180.

I want images to maintain their aspect ratios and avoid cropping, so they should be have whitespace added on the lacking sides (centering the original image in 240x180).

With the CI image manipulation, I can resize it OK, just can't pad it with whitespace if smaller than 240x180.

I'll be fine with the logic if someone can point me in the right direction of some GD2 code to achieve this.

Note: I am using a design which breaks if images aren't 240x180, so padding with CSS won't cut it in this case.

Cheers,

Leon

[eluser]Leon Stafford[/eluser]
Google spurted out some more clues:

After resizing my image to the max width and height up to 240x180 pixels, I will attempt to use the GD imagecopy function to place the reduced image centered on a white 240x180 pixel background image.

Lacking a bit of logic as my brain is sore, but here's what I'm thinking:

Code:

$backgroundImage = imagecreatefromjpeg(240x180white.jpg);
$overlayImage    = imagecreatefromjpeg($resizedImage);
$overlayWidth    = imagesx($overlayImage);
$overlayHeight   = imagesy($overlayImage);
imagecopy($backgroundImage,$overlayImage,?,?,0,0,$overlayWidth,$overlayHeight);

I'd need to use a different imagecreatefrom function depending on image type, and work out the x and y coordinates to place the overlayImage to center it inside the 240x180 backgroundImage (where the ? question marks currently are). Plus a few conditionals for tall,wide or square images.

[eluser]slowgary[/eluser]
In my opinion it's not a good idea to add the page's background color to an image for padding purposes. You're ruining your images this way. Just place them inside of a <div> and use CSS.

Code:

//html
<div class='img_240x180'>
   <img src='resized_img.jpg'>
</div>

//css
.img_240x180 {
   width: 240px;
   height: 180px;
   overflow: hidden;
}

If you don't need to support IE6, you can use max-width/max-height to make it even simpler:

Code:

//html
<img src='resized_img'/>

/css
img {
   max-width: 240px;
   max-height: 180px;
}

Note, the second method will cause resizing if the image exceeds either dimension, whereas the first method will crop. Either way, since you'll have already resized your image you won't have to worry about either. It just REALLY doesn't make sense to add whitespace for so many reasons.

Here's 3 reasons that immediately come to mind:

1) You'll be increasing the image filesize for no good reason.

2) If you think of the internet as an abundance of text and images (minus design), your website's images are basically useless because of this added whitespace. Imagine search engines that can provide useful images to the searcher based on context. What is this white strip at the bottom of your images? Snow? Is it winter in that picture? It's like adding a bunch of LOREM IPSUM text to the bottom of your page because you want the page to be longer. You're adding content for the sake of presentation.

3) JPEG compression does bad things to solid colors. That means that even though the background of your page is a solid white color, this whitespace you add to your JPEG images will be a noisy speckled dirty white that ANYONE with an eye for design will be able to notice.

Additionally, I think you'll find the CSS solution to be much simpler, and less taxing on your server.

[eluser]Leon Stafford[/eluser]
[quote author="slowgary" date="1239647816"]In my opinion it's not a good idea to add the page's background color to an image for padding purposes. You're ruining your images this way. Just place them inside of a <div> and use CSS.

Code:

//html
<div class='img_240x180'>
   <img src='resized_img.jpg'>
</div>

//css
.img_240x180 {
   width: 240px;
   height: 180px;
   overflow: hidden;
}

If you don't need to support IE6, you can use max-width/max-height to make it even simpler:

Code:

//html
<img src='resized_img'/>

/css
img {
   max-width: 240px;
   max-height: 180px;
}

Note, the second method will cause resizing if the image exceeds either dimension, whereas the first method will crop. Either way, since you'll have already resized your image you won't have to worry about either. It just REALLY doesn't make sense to add whitespace for so many reasons.

Here's 3 reasons that immediately come to mind:

1) You'll be increasing the image filesize for no good reason.

2) If you think of the internet as an abundance of text and images (minus design), your website's images are basically useless because of this added whitespace. Imagine search engines that can provide useful images to the searcher based on context. What is this white strip at the bottom of your images? Snow? Is it winter in that picture? It's like adding a bunch of LOREM IPSUM text to the bottom of your page because you want the page to be longer. You're adding content for the sake of presentation.

3) JPEG compression does bad things to solid colors. That means that even though the background of your page is a solid white color, this whitespace you add to your JPEG images will be a noisy speckled dirty white that ANYONE with an eye for design will be able to notice.

Additionally, I think you'll find the CSS solution to be much simpler, and less taxing on your server.[/quote]

Hi Slowgary,

Thanks for the advice. I totally agree on those reasons. Alas, once again I have to bow down the time constraints of this project....

I got my desired effect with GD but even as someone who tries to stay as far away from design as possible, I hate the white space

As a compromise, time permitting, I will retain the original images and allow them to be cropped by the admin as they check them (user uploaded photos).

I would prefer a totally separated design via CSS, but our design/coders don't have any more time to work on this and so the story goes...

I just got home but can paste this code for anyone interested - dirty a method as it is, it solved my problem...