One of the challenges for any web development team is creating systems
that are technically robust while still being intuitive to users. It's
especially important to keep in mind the level of technical proficiency of
the intended users of the system. We were reminded of this crucial truism
shortly after the initial launch of a site we recently built.
Our consulting division had been approached by a economic development
organization who wanted us to build a website. One of the desired features
of the site was a system that allowed their staff to upload member company
logos to be displayed on the front page of their site, as well as in a
member directory section. The intent was that businesses would send their
logos to the organization staff, and they'd use the system to insert the
new logos and descriptive text into a database. No problem, right?
Because
Modwest runs PHP as a chrooted CGI, it was easy to use standard PHP
upload features to get the logos from the client's personal computer
up to the server and into a database. (See
php.net/manual/en/features.file-upload.php for the basics.) What we
originally failed to account for was the size of the uploaded images.
The Problem Unveiled
The launch of the site went nicely, and the first few logos uploaded fit
the design of the site nicely. A few weeks down the line, a business sent in
a logo that was over 800 pixels wide. Of course, as soon as the staff uploaded
it into the system, it wrecked the design of the site, as the logos were
meant to be displayed in columns that were only about 250 pixels wide. The
staff member responsible for uploading called us immediately, wondering why
our system had broken. Of course, the system was doing exactly as it was told.
Our first tactic was to suggest that the staff member resize logos to be no
more than 200 pixels wide. This suggestion may have worked if we were talking
to a graphics-savvy user, but this individual wasn't terribly comfortable
using Windows Paint (the only graphics program they had available). So, we
needed a solution that would auto-resize photos appropriately and maintain
their original proportions to prevent any distortion.
Mogrify to the Rescue
Mogrify is one of the programs included in the extremely powerful
ImageMagick graphics
manipulation suite. It is capable of changing colors, sizes, formats, and
effects of an image in any of dozens of common formats. It was the perfect
tool for this job.
The first step, after actually uploading the original image to the server,
is to determine its current dimensions:
<xmp>
$currentimagesize = getimagesize($UPLOADS_URL . $imagename);
</xmp>
This returns an array of information about the image. In this case, we're
interested in the height and width. $UPLOADS_URL is a global
variable we set which simply points at the location of the uploaded original
image.
<xmp>
$image_width = $currentimagesize[0];
$image_height= $currentimagesize[1];
</xmp>
To resize the image, while retaining its original proportions, we need to
determine the current dimensions and then calculate the new desired size
(based on our maximum acceptable size of 200 pixels by 200 pixels).
<?php
if (($image_height > $max) || ($image_width > $max))
{
if ($image_height > $image_width)
{
$sizefactor = (double) ($max / $image_height);
}
else
{
$sizefactor = (double) ($max / $image_width) ;
}
}
$newwidth = (int) ($image_width * $sizefactor);
$newheight = (int) ($image_height * $sizefactor);
?>
In other words, if our uploaded image is 800 pixels wide by 200 pixels tall,
the $sizefactor is 0.25 (200/800), and both dimensions are
multiplied by this number to get a new image size of 200 pixels wide by
50 pixels high. The only thing left to do is the resizing itself:
<?php
$newsize = $newwidth . "x" . $newheight;
$cmd = "/usr/X11R6/bin/mogrify -resize $newsize ".
"$UPLOAD_PATH/$newname 2>&1";
exec($cmd, $exec_output, $exec_retval);
if($exec_retval > 0)
{
print "ERROR: exec() error: $exec_output[0]";
}
else
{
print "Image was resized from " . $image_width . "x" .
$image_height . " to $newsize :)";
}
?>
Note that that path to mogrify on your server will probably be different than
the one on the Modwest.com server (/usr/X11R6/bin/mogrify). Also note that
we redirect STDERR to STDOUT (2>&1) in the exec() line. This assures that
we catch any error or warning message generated during the resizing process.
Having resized the image, all that remains is to insert it into a database or
move it to the appropriate location.
Disaster Averted
Thanks to ImageMagick's mogrify program, a little bit of PHP code has
prevented our client from slapping a huge image on the front page of their
site, while requiring no technical graphic manipulation or other additional
work on the part of their non-technical staff.