Saturday, February 15, 2025

PHP Tips & Tricks – A Picture Upload, Part 2

This article continues from Part 1 of the Picture Upload "Tips &
Tricks" example. You’ll find it
here.

We now have the foundation of an image gallery with a web form to upload new
images. The previous code is by no means complete or even user friendly, but it
performs the general tasks and is good for giving a feel for how the program
should perform. In programming circles it is known as whipping up a rapid
prototype.

But now we need to start making it a little more elegant. The list_images.php
contains the bare minimum of code to list images in the directory. It does not
care about size or any aspect of presentation concerning the images contained
there. A more aesthetically pleasing approach is to have uniform thumbnails of
all the images and list those. This also will reduce bandwidth usage on the site
as thumbnails are of a considerably smaller file size than most images that will
be uploaded.

Before we begin, a small caveat; the php on the web server you are using should
have what is known as the gd extensions. Most web servers have them, but there
are some that do not. Also, gd has improved over the years and sometimes a web
server will have an older version of gd that does not allow all the modern
commands php has to offer for manipulating images. The sample code we are
working with has been limited to work only with jpeg images.

With that warning out of the way, here is some simple code for creating a
thumbnail.

$orig["dir"] = "images/";
$orig["dirimage"] = $orig["dir"] . $imagename;
$orig["res"] = @imagecreatefromjpeg($orig["dirimage"]);

$orig["x"] = imagesx($orig["res"]);
$orig["y"] = imagesy($orig["res"]);

if($orig["x"] > $orig["y"])
{
$new["x"] = 75;
$new["y"] = (75 / $orig["x"]) * $orig["y"];
}
else
{
$new["y"] = 75;
$new["x"] = (75 / $orig["y"] ) * $orig["x"];
}

//switch out imagecreatetruecolor with imagecreate if using gd version 1
//$new["res"] = imagecreate($new["x"],$new["y"]);
$new["res"] = imagecreatetruecolor($new["x"],$new["y"]);

//set background to white
$fill = imagecolorallocate($new["res"], 255, 255, 255);
imagefill($new["res"], 0, 0, $fill);
imagecopyresized($new["res"], $orig["res"], 0, 0, 0, 0, $new["x"], $new["y"], $orig["x"],
$orig["y"]);

$new["dir"] = "images/";
$new["dirimage"] = $new["dir"] . $imagename . ".thumb.jpg";

imagejpeg($new["res"], $new["dirimage"]);

imagedestroy($orig["res"]);
imagedestroy($new["res"]);

It is easy enough to place this code right after
move_uploaded_file($_FILES[’image_file’][’tmp_name’], $newimage);
in our original upload.php file. With the code in place, it should take the
newly uploaded file and instantly create a 75 by 75 pixel thumbnail of the
image.

However, this is one of those points where planning and organizing can come in
handy. We should ask ourselves, "Am I going to need to use this thumbnailing
code again?" There are many scenarios where we may need to do thumbnailing.
Also, thumbnailing is a pretty common feature needed in a host of other web
applications (such as shopping carts, content management systems) and you may
want to re use this same code again. This is when it becomes handy to start
making your own functions.

In a way, functions act like includes but with strings attached (no pun
intended). It is best to think of functions as needing inputs and giving
results. Often times, the result will just be a true or false response (true
meaning success and false meaning failure) It is important to remember that
functions need to have variables passed to them for the function to be able to
work (or to see) the variable. This is known as variable scope.

With these things in mind, here is the same above thumbnailing code rewritten to
be its own function.

function thumbimage($imagename, $maxwidth, $maxheight)
{

$orig["dir"] = "images/";
$orig["dirimage"] = $orig["dir"] . $imagename;
$orig["res"] = @imagecreatefromjpeg($orig["dirimage"]);

$orig["x"] = imagesx($orig["res"]);
$orig["y"] = imagesy($orig["res"]);

if($orig["x"] > $orig["y"])
{
$new["x"] = $maxwidth;
$new["y"] = ($maxheight / $orig["x"]) * $orig["y"];
}
else
{
$new["y"] = $maxheight;
$new["x"] = ($maxwidth / $orig["y"] ) * $orig["x"];
}

//switch out imagecreatetruecolor with imagecreate if using gd version 1
//$new["res"] = imagecreate($new["x"],$new["y"]);
$new["res"] = imagecreatetruecolor($new["x"],$new["y"]);

//set background to white
$fill = imagecolorallocate($new["res"], 255, 255, 255);
imagefill($new["res"], 0, 0, $fill);
imagecopyresized($new["res"], $orig["res"], 0, 0, 0, 0, $new["x"], $new["y"], $orig["x"],
$orig["y"]);

$new["dir"] = "images/";
$new["dirimage"] = $new["dir"] . $imagename . ".thumb.jpg";

imagejpeg($new["res"], $new["dirimage"]);

imagedestroy($orig["res"]);
imagedestroy($new["res"]);

return true;
}

Note the function syntax
function thumbimage($imagename, $maxwidth, $maxheight)

This declares our new function name as thumbimage, and it wants to have 3
arguments; an image name, and the maximum width and height. We have replaced our
hard coded 75 pixels with variables so we can just determine the thumb size we
want as we call the function.

Now to use this function we have to setup are files in the correct manner. When
first learning your way through functions and includes, it is easiest to just
make a new php file called functions.php and start stuffing all the new
functions into there. As time goes by, you make start organizing things in a
more elaborate scheme.

If we put our new thumbimage code into functions.php we will need to include
functions.php in our upload.php script… which is as easy as…
include("functions.php");
It is best just to include this at the very top of your script.

However, just including a function does not actually invoke the function. That
is
an important point to remember! You still have to call the function just as any
other built in php function. So in our upload.php script we would write the
following
line.

thumbimage($imagename, 75, 75);

This should produce the same exact result.

The thumbimage function though is still a little rough. It should have more
checks to see that it actually has a file to work with. Here are a few lines we
could add to make sure things are in order.

if(empty($imagename))
return false;

if(!is_file($orig["dirimage"]))
return false;

We also have to pay attention to a directory structure. We have set our images
directory to "images/" in our function. This is what is known as hard coding
directories or any kind of information that you might want to change in the
future. We will leave it as it is for now for the sake of simplicity.

One last little code change we should make is to go back to our list_images.php
file and have it only show the thumbnail images in the directory. We can change
1 line so that it checks for the last 9 characters of the filename…

if(is_file("images/" . $file) && (substr($file, -9) == "thumb.jpg"))

Now with our new thumbimage function and new list_images file, we should have a
cleaner and simplified image listing.

 

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured