Hack27.Create Thumbnail Images | PHP Hacks: Tips & Tools For Creating Dynamic Websites

Hack 27. Create Thumbnail Images

Use the GD graphics API in PHP to create thumbnails of your images.

This simple hack takes a set of JPEG images in a directory named pics and creates thumbnails of them in a directory named thumbs. It also creates a file in the same directory as the script called index.html, which contains all of the thumbnails, as well as links to the original images.

4.2.1. The Code

Save the code in Example 4-1 as mkthumbs.php.

Example 4-1. A script for handling thumbnail creation

 <?php $dir = opendir( "pics" ); $pics = array(); while( $fname = readdir( $dir ) ) { if ( preg_match( "/[.]jpg$/", $fname ) ) $pics []= $fname; } closedir( $dir ); foreach( $pics as $fname ) {   $im = imagecreatefromjpeg( "pics/$fname" );   $ox = imagesx( $im );   $oy = imagesy( $im );   $nx = 100;   $ny = floor( $oy * ( 100 / $ox ) );   $nm = imagecreatetruecolor( $nx, $ny );   imagecopyresized( $nm, $im, 0, 0, 0, 0, $nx, $ny, $ox, $oy );   print "Creating thumb for $fname\n";   imagejpeg( $nm, "thumbs/$fname" );  }  print "Creating index.html\n";  ob_start();  ?>  <html>  <head><title>Thumbnails</title></head>  <body>  <table cellspacing="0" cellpadding="2" width="500">  <tr>  <?php  $index = 0;  foreach( $pics as $fname ) {  ?>  <td valign="middle" align="center">  <a href="pics/<?php echo( $fname ); ?>"><img src="/books/1/201/1/html/2/thumbs/<?php echo( $fname ); ?>" border="0" /></a>  </td>  <?php  $index += 1;  if ( $index % 5 == 0 ) { echo( "</tr><tr>" ); }  }   ?>  </tr>  </table>  </body>  </html>  <?php  $html = ob_get_clean();  $fh = fopen( "index.html", "w" );  fwrite( $fh, $html );  fclose( $fh ); ?>

The script starts by iterating through the pictures in the pics directory. It then creates a thumbnail for each image in the thumbs directory using the GD imagint functions.

To create a thumbnail, the file first has to be read in and handled by the imagecreatefromjpeg( ) function. After that, the new (thumbnail) size is calculated, and a new image is created (using imagecreatetruecolor( )). The original file is then copied in and resized using the imagecopyresized( ) function. Finally, the thumbnail is saved with imagejpeg( ).

The rest of the script creates an HTML index for the thumbnails by using the output buffering functions ob_start() and ob_get_clean( ); both are used to store the HTML into a string. That string is then written into a file using fopen( ), fwrite( ), and fclose( ).

4.2.2. Running the Hack

Place the mkthumbs.php script into a directory, and then create two subdirectories: pics and thumbs. In the pics directory, place a bunch of JPEG images. Run the script with the PHP command-line interpreter:

 % php mkthumbs.php

This creates all of the thumbnail images and the index.html file in Figure 4-1.

Figure 4-1. The HTML file showing the thumbnails

This type of script can be really handy for creating family photo albums. I wish more people would use some sort of thumbnail script. Far too often, I get a message from my friends or relatives pointing me to an Apache directory listing of images from their recent tripall full size and with none of the blurry or bad shots removed! Lucky for all of us, PHP can turn those reels into a manageable set of thumbnails, and still preserve the originals.

4.2.3. See Also

"Split One Image into Multiple Images" [Hack #30]
"Properly Size Image Tags" [Hack #9]