Build An Automated PHP Gallery System In Minutes

Whether you own a business or a personal Website, you would have used html photo Web pages for either showcasing your products, or perhaps to share photos from your last holiday with friends; in either case it’s an enormous amount of manual work to build those Web pages. If you've tried your hand at the painstaking process of separately making thumbnails for each photo, and then maintaining individual pages for them, you know exactly what I mean.

In this article we’ll build a simple yet effective gallery system that’s easy to maintain and update. We’ll use PHP and MySQL, with a little help from GD or ImageMagick to build this automated gallery system. The focus of this article is to introduce the concept of File Uploading and using it to build an Automatic Gallery system; therefore I’ll presume that you have a basic knowledge of coding in PHP.

Getting Started

Any decent gallery system should have two major capabilities:

1. a category-based listing of images
   
2. a browser-based image uploading system

In addition to these, another feature we require in order to automate this gallery system is the ability to build automatic thumbnails as soon as the images are uploaded. To achieve that, we will use either GD or ImageMagick -- whichever is available on your server. Usually, GD is bundled with PHP itself, but its capabilities differ from version to version. For example, versions of GD before 2.x.x can support the creation of images with up to 256 colors only. This limitation doesn’t exist within ImageMagick, nor later versions of GD. To identify which version of GD you have, you can use the function phpinfo() to list all the installed DLL’s and their version details.

The following is a simple procedure that we’ll use to build the gallery:

• Design the database schema (with the same structure, you can use Flat Files too)
• Build the browser-based uploading system
  • Index within the tables
  • Store the files
  • Build automatic thumbnails
  
  
• View the categories and their images

Designing the Database Schema

Throughout this article, I will use examples of MySql databases, however, if you wish to use flat files, you can use similar structures to achieve the same output. We will assign each image in our gallery to a certain category; for this we require a separate table to list all the categories, and a separate table to list the entries of the uploaded images.

Category Table: let’s name it gallery_category.

Images Table: let’s name it gallery_photos.

The following are the MySql queries of the two tables:

CREATE TABLE gallery_category (
 category_id bigint(20) unsigned NOT NULL auto_increment,
 category_name varchar(50) NOT NULL default '0',
 PRIMARY KEY  (category_id),
 KEY category_id (category_id)
) TYPE=MyISAM;

CREATE TABLE gallery_photos (
 photo_id bigint(20) unsigned NOT NULL auto_increment,
 photo_filename varchar(25),
 photo_caption text,
 photo_category bigint(20) unsigned NOT NULL default '0',
 PRIMARY KEY  (photo_id),
 KEY photo_id (photo_id)
) TYPE=MyISAM;

You can use simple INSERT queries to add the initial records to the category table, for example:

INSERT INTO gallery_category(`category_name`) VALUES('My First Gallery');

Before we can upload the images, we require a directory in which to store them. Therefore, let’s make a new directory, and name it “photos” (for *nix servers, set write permissions for this directory using chmod, e.g. 777).

Now, let’s build our first script. This script will serve as our database connection file and will hold the name of the directory where we’ll store the uploaded images. In the code below, you’ll notice the name of the directory being defined to the variable $images_dir. If you wish to name your storage directory something else, make sure you reflect that in the code.

Let’s name this script “config.inc.php”.

<?php

 $mysql_link = mysql_connect('localhost', 'root', 'root');
 mysql_select_db('sitepoint') or die('Could not select database');

 $images_dir = 'photos';

?>

The above code also establishes a connection with the MySql database named “sitepoint”. Before implementing this code, you should insert your own username, password, and database name values.