A thumbnail (or thumbnail sketch) is a small 1.5-inch high drawing, usually rendered very roughly. Animators use thumbnails to describe a scene or an action to another animator. It's true that a picture is worth a thousand words.

Sometimes you have a large number of photos to put on a web page in a short space of time. people may be hassling you to get them up ASAP, but also complaining that they're not nicely arranged and thumbnailed. Say, for example, you've offered to host a load of incriminating pics of a noder meet.

What you need it something that will generate the pages and the thumbnails for you. These two PHP scripts will do just that. Just fill a directory with the source images and it will make a page full of thumbnails which it will generate itself. See this in action at ascorbic.net, which has the pics of the aforementioned gathering.

This requires three files: thumbnail.php, which creates the thumbnails, index.php which creates the page, and .htaccess which directs request for missing thumbnails to the script that creates them.

thumbnail.php

This is run whenever someone requests a thumbnail that hasn't been created yet. It creates and returns the thumbnail, and saves a copy in the thumbnail directory.

<?php
//where are the big pics, and where do want
//to put the thumbnails?
$sourcedir=$DOCUMENT_ROOT ."/";
$outputdir=$sourcedir."/small/";

//how wide are the thumbnails to be?
//height will be proportionate
$outputwidth=100;

$filename=basename($REQUEST_URI);
$src=$sourcedir.$filename;

//load the big image
$im=imagecreatefromjpeg($src);

//find out how big it is
$sz=getimagesize($src);

//work out the height of the thumbnail
$h=($outputwidth/$sz[0])*$sz[1];

//create a new blank image for the thumbnail
$out=imagecreate($outputwidth,$h);

//copy and resize the large image to this
imagecopyresized($out,$im,0,0,0,0,$outputwidth,
	$h,$sz[0],$sz[1]);

//output the image
header("Content-type: image/jpeg");
imagejpeg($out);

//save the image so we don't need to recreate 
//it next time
imagejpeg($out,$outputdir.$filename);
?>

index.php

This searches the image directory for jpegs and tries to display thumbnails of each them. thumbnail.php should generate any missing thumbnails. Edit this HTML page to make it more or less pretty.

<html>
<head>
<title>pictures!</title>
<style> 
body {font-family: verdana, arial}
</style></head><body>
<div align='center'>
<h1>Look at these pics!</h1>
<?php
$sourcedir="/";
$outputdir="small/";
$dir=opendir($DOCUMENT_ROOT.$sourcedir);
while ($file=readdir($dir))
{
if (strtoupper(substr($file,-3))=="JPG")
{
printf("<a href='%s'>
	<img src='%s%s' width=100 /></a>
	",$file,$outputdir,$file);
}
}
?>
</div>
</body>

.htaccess

This wants to go in the same directory as the thumbnails. Make sure it points to wherever you put thumbnail.php. If you already have a .htaccess file, just add this line to it. Your httpd.conf will need to permit .htaccess files to change the error document.

ErrorDocument 404 /thumbnail.php

Now, get those incriminating pics up!

A thumbnail (in web graphics sense) is a small version of a picture file. Typical maximum sizes range from 75x75 to 150x150 pixels.

Thumbnails are used as a link to the actual image file. Often, information about the image file are provided near the thumbnail (real image size in pixels and file size in human-readable format). This is to help people with modems to judge what to download in full.

A typical mistake with thumbnails is to use construction similar to following:

<a href="bigimage.jpg">
<img src="bigimage.jpg"
     alt="[Thumbnail]"
     width="75" height="75" /></a>
<br />
Click on image to get a bigger version

This is wrong because the whole point of thumbnails is to provide quickly-downloading previews. This kind of construct will download every file referenced in full.

The correct way is to generate a thumbnail file separately. Here's an example for ImageMagick:

convert bigimage.jpg -geometry 75x75 bigimage_thn.jpg

and then include the image to HTML with construct like this:

<a href="bigimage.jpg">
<img src="bigimage_thn.jpg"
     alt="[Thumbnail]"
     width="75" height="75" /></a>
<br />
Click on image to get a bigger version

ImageMagick, as mentioned above, is a highly cool tool for thumbnail creation, because it allows mass conversions.

Log in or register to write something here or to contact authors.