"Why would I upload an overly-sized photo that would span longer than the average screen resolution?"

Well, the answer is simple: by making use of GD and PHP, you can create a gallery that will not only eliminate the hassle of resizing your photos, you will also be able to provide thumbnail images so that you can view a smaller-sized version prior to clicking on the higher-quality image, thus saving your bandwidth and your insanity!

For this small project, we're going to make use of PHP, MySQL, and GD, all of which are freely available for download. I am also going to introduce a thumbnail-making class file, which will be easily reusable in any other of your future projects.

Welcome Class – It's Thumbnail Time!

First things first, we'll start by coding our thumbnail class – which I've dubbed GallerySizer. One of the first things we need to figure out is how big we want our full-sized images to be. For the most part, the standard resolution is roughly 800x600, although, 1024x768 is slowly becoming the norm. Nonetheless, we're better off catering to those with smaller screens, so that they can experience the full effect of your photos.

// Define script constants
DEFINE("IMAGE_BASE", '../photos/');
DEFINE("THUMB_BASE", '../thumbs/');
DEFINE("MAX_WIDTH", 100);
DEFINE("MAX_HEIGHT", 100);
DEFINE("RESIZE_WIDTH", 800);
DEFINE("RESIZE_HEIGHT", 600);

The lines above simply define constant variables that will be used throughout our GallerySizer class. The beauty behind constants, is that because their values never change throughout the class, we can simply define them at the top of the class. If we decide we want the values to change, we need only to change the values in the one location, and the changes will take effect throughout the rest of the code.

We first start by defining out IMAGE_BASE constant, which is the directory location where our re-sized images will be stored for viewing. The THUMB_BASE directory is the location that will store our thumbnails. MAX_WIDTH and MAX_HEIGHT define the maximum width and height of our re-sized images, respectively.

Note:

In case you're wondering, I've decided not to store the actual images inside a database. It's a discussion that is brought up regularly in our forums, and to be honest, I prefer to store the images in a directory, while storing the path to the actual image in the database table. There are pros and cons to each method, but for reasons related to the speed of the database, we'll store the path in our tables. We'll discuss our database structure later on.