PHP Album Tutorial

Welcome to the PHP Album Tutorial! Before going ahead with the tutorial, you should make sure you feel comfortable with basic PHP programming, the GD image library, Perl-compatible regular expressions (PCRE). These topics, in addition to advanced Program Execution and functions used to access Directories will be explained briefly. The tutorial also relies on the FFmpeg package for video files. Good luck!

Step 1: Planning

The basic method the script will use is as follows (in pseudocode):

for each ( file in the current directory ) {
	if ( extension indicates a picture ) {
		get image information using libgd
		if needed, generate and cache a thumbnail
	} else if ( extension indicates a video ) {
		launch a FFmpeg child process to get video information and,
			if needed, to output the first frame
		parse the text output of FFmpeg and,
			if needed, generate and cache a thumbnail of the first frame
	append generic information (eg. file size)

for each ( summary ) {
	output HTML code

Specifically, the "summary" is an associative array returned by the file processing functions (prefixed by "image_build_") that include the following:

Key Description Example 1 (VV 007.jpg) Example 2 (VV 004.avi)
file File name (including extension) "VV 007.jpg" "VV 004.avi"
thumb Thumbnail file path "/~cat/thumbs/VV 007.jpg" "/~cat/thumbs/VV 004.jpg"
type File type "JPEG" "AVI"
cx Width (in pixels) 1024 320
cy Height (in pixels) 768 240
size File size (in bytes) 130365 4289380
duration Video length (in seconds, video only) N/A 13.8
fps Frames per second (video only) N/A 15

Step 2: Thumbnail Processing (image_thumbnail)

This function is very basic yet very important. It is used by picture and video processing functions to generate a thumbnail. The procedure is fairly simple, it operates on a GD image handle ($im) and outputs a JPEG thumbnail directly to file (named in $thumb):

Step 3: Picture Processing (image_build_picture)

This function, just like the other image processing function, receives the file name to be processed ($file), the path where a thumbnail should exist or be generated ($thumbfile), and the URL where the thumbnail should be accessible if it already exists or will exist ($thumburl). It also returns the summary array which contains all kinds of juicy facts about the image.

The role of $picture_types is to facilitate the conversion of getimagesize's return value to a string representing the image type.

Step 4: Video Processing (image_build_video)

I've already described the arguments and return value of these two functions. However, the focus of explanation for image_build_video will need to be the actual processing. In my opinion, it's the most complex but also the neatest (dare I say, most beautiful?) part of this script.

Before continuing, please take a look at FFmpeg. In fact, you'll need to compile it and make sure it's executable by the script. Also, familiarize yourself with pipes and how to control processes using proc_open.

Two main cases are handled: when the thumbnail exists, and when it doesn't.

All right, well the truth is that you don't really have to include video support. If you're certain you don't need this ridiculously cool feature, you can omit the image_build_video function along with lines 186 through 189.

Step 5: Glue

I will mainly explain here the image_build function and most of the top-level code that binds the parts I've described, up to generating the summary array.

Step 6: HTML Output

Everything you need is in the $files array, so it really shouldn't be too hard to write this second part. I have, however, some neat size and time formatting utility functions that I'd like to show off, so here's what I did:


I hope this tutorial was productive for you, and that you actually learned something by following it. Please feel free to send any comments and suggestions to Make sure to add the word "NOTSPAM" in the subject line.