Tips & Tricks - A Picture Upload in PHP

By Vince Barnes

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.

 




Page 2 of 3

Previous Page
1 2 3
Next Page

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date