Article
Using phpThumb
Separating content from presentation is a worthy goal, but images have always concerned me. Take this site, for example…
When an image accompanies a post, I almost always scale it to a width of 420 pixels, because that is how wide the left column is. Some images are smaller, like the portrait of my girl Ashlee, but they are still made to accommodate a 420 pixel content space.
My primary concern is practical. Should I make this site 320, 520 or even 1020 pixels wide at some point in the future, all of my images will be hopelessly out of whack. Resizing would be a true pain, and I haven’t saved most of the originals — so that’s not an option.
While the image itself is content, its dimensions are not. Surely there is a way to separate the content of an image (the part you see) from the presentation of an image (specifically, how big it is). What’s a poor nerd to do?
Seeking a solution
Naturally, my thoughts turned to some type of server-side scripting. And then to PHP, which is the only server-side language I know.
My goal: To create a PHP script that resized images on the fly. Instead of using an img tag to grab an image, I wanted to pass a filename and width to the script and get back the properly sized image.
I dug through documentation for PHP and the GD Image Library. This was definitely going to be possible, but it wasn’t going to be easy for a fake programmer like me. Fortunately, Google dropped James Heinrich’s phpThumb in my lap, and it’s just what I was looking for!
A normal ‘img’ tag looks like this:
<img src="image.jpg" />
But with phpThumb, it looks like this:
<img src="phpThumb.php?src=image.jpg" />
Of course, that won’t do anything cool, but there are a bunch of options you can specify, like:
- Width:
<img src="phpThumb.php?src=image.jpg&w=100" /> - Height:
<img src="phpThumb.php?src=image.jpg&h=100" /> - Border:
<img src="phpThumb.php?src=image.jpg&bw=2" />
I’ve demonstrated a handful of these for your amusement.
Yeah, but…
My only concern with phpThumb (and probably the only thing to keep me from using it for real across this site) is how crappy the resized images look. Maybe it’s just me, but the anti-aliased output from Photoshop is much cleaner. Although I looked, I didn’t find an anti-aliasing option in James’ script, and I am not even sure if GD supports this. Does anyone know?
Other than that, this is a cool solution to what I imagine is a common problem. Questions or comments? Let me know.