Ilovephp.org - programming with passion

wait

Programming tutorials - Images thumbnails (PHP)

This tutorial will learn you how to create image thumbnails. Thumbnails are smal images. Once click a thumbnail it open the original image. Let see how could we do this thing possible. First of all we need to create two folders: one for original images and we rename it into pictures and one for thumbnails, this is called thumbnails. What is verry important is that in this two folders we put only JPG images otherwise we have some errors. This script can be adapt for any image format, GIF or PNG but the principal scope of this tutorial is to learn you how to create thumbnails and how to use image functions from PHP.
The PHP that you run it must have GD2 library to run this script, otherwise you have an error that announce you that functions for image cand not be find. If GD2 library is not active, you can activate it in this way in WINDOWS OS: add this lines in php.ini:

extension_dir = "extensions/"
extension=php_gd2.dll

The value of extension_dir variable must be the relative way to extensions folder, usually this is php/extensions/
We open pictures and thumbnails folders and we read every file name that is in these folders and we put as $pictures and $thumbnails values.

$open_pictures = opendir("pictures");
while($file = readdir($open_pictures)){
if(substr($file, 0, 1) != '.') $pictures[] = $file;
}
closedir($open_pictures);
$open_thumbnails = opendir("thumbnails");
while($file = readdir($open_thumbnails)){
if(substr($file, 0, 1) != '.') $thumbnails[] = $file;
else $thumbnails = array();
}
closedir($open_thumbnails);

We put in two arrays the names of pictures who are in folder pictures but not in thumbnails and pictures who are in thumbnails folder but not in pictures. In this way for every picture who is in folder pictures but not in thumbnails we create a small picture with sizes seted in $max_width and $max_heigt keeping the proportion of original picture calculated with $ratio therefore if the width of original picture is bigest than height, $ratio will be the maximum width seted in $max_width divided with width of original picture otherwise $ratio will be the maximum heigh seted in $max_height divided with height of original picture. The size of original picture can be find with getimagesize() function which returns an array with picture attributes.
Next, we get the sizes of the small pictures calculated by multiply the original pictures size with $ratio. We put these values in $thumbnail_height for height and $thumbnail_width for width.

$diff_pic = array_diff($pictures, $thumbnails);
$diff_tumb = array_diff($thumbnails, $pictures);
foreach($diff_pic as $key => $value){
$image_name = 'pictures/'.$value;
$image_attribs = getimagesize($image_name);
$max_width = 100;
$max_height = 100;
$ratio = ($image_attribs[0] > $image_attribs[1]) ? $max_width / $image_attribs[0] : $max_height / $image_attribs[1];
$thumbnail_width = $image_attribs[0] * $ratio;
$thumbnail_height = $image_attribs[1] * $ratio;

Next we create these thumbnails by appling of php functions for images. For the beginning create a image from the priginal picture with function imagecreatefromjpeg(), after that we create a black image with sizes calculated above for thumbnails.
The names for the thumbnails will be the same as the original pictures with the only difference that we save in other folder.
The way and the name of thumbnail will put in $thumbnail_name value, than we'll copy the original picture after thumbnail keeping the proportions. We create an JPG image in thumbnail folder with the name of the original picture using imagejpeg() function.

$image = imagecreatefromjpeg($image_name);
$image_new = imagecreatetruecolor($thumbnail_width, $thumbnail_height);
imageantialias($image_new, true);
$thumbnail_name = 'thumbnails/'.$value;
imagecopyresampled($image_new, $image, 0, 0, 0, 0, $thumbnail_width, $thumbnail_height, $image_attribs[0], $image_attribs[1]);
imagejpeg($image_new, $thumbnail_name);
imagedestroy($image);
}

It is possible that in thumbnails folder to be pictures that are not in in pictures folder, these are not necessary and we'll erase them using unlink() function.
You remember that above we find which pictures are in thumbnail folder but not in picture folder using array_diff() function that make the difference between values of firs array and values of the second.

foreach($diff_tumb as $key => $value){
unlink("thumbnails/".$value);
}

In this moment we have created these thumbnails and we will show them in a table with $modulo cells and with a link to original pictures.
Below you have the entire source code for creating of thumbnail pictures and posting them in a web page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Thumbnails</title>
</head>
<body>
<?
$open_pictures = opendir("pictures");
while($file = readdir($open_pictures)){
if(substr($file, 0, 1) != '.') $pictures[] = $file;
}
closedir($open_pictures);
$open_thumbnails = opendir("thumbnails");
while($file = readdir($open_thumbnails)){
if(substr($file, 0, 1) != '.') $thumbnails[] = $file;
else $thumbnails = array();
}
closedir($open_thumbnails);
$diff_pic = array_diff($pictures, $thumbnails);
$diff_tumb = array_diff($thumbnails, $pictures);
foreach($diff_pic as $key => $value){
$image_name = 'pictures/'.$value;
$image_attribs = getimagesize($image_name);
$max_width = 100;
$max_height = 100;
$ratio = ($image_attribs[0] > $image_attribs[1]) ? $max_width / $image_attribs[0] : $max_height / $image_attribs[1];
$thumbnail_width = $image_attribs[0] * $ratio;
$thumbnail_height = $image_attribs[1] * $ratio;
$image = imagecreatefromjpeg($image_name);
$image_new = imagecreatetruecolor($thumbnail_width, $thumbnail_height);
imageantialias($image_new, true);
$thumbnail_name = 'thumbnails/'.$value;
imagecopyresampled($image_new, $image, 0, 0, 0, 0, $thumbnail_width, $thumbnail_height, $image_attribs[0], $image_attribs[1]);
imagejpeg($image_new, $thumbnail_name);
imagedestroy($image);
}
foreach($diff_tumb as $key => $value){
unlink("thumbnails/".$value);
}
$open_thumbnails = opendir("thumbnails");
$l = 0;
$modulo = 4;
echo '<table border="0" align="center">';
while($file = readdir($open_thumbnails)){
if(substr($file, 0, 1) != '.'){
if($l % $modulo == 0) echo '<tr>';
echo '<td align="center" valign="middle"><a href="pictures/'.$file.'" target="_blank" title="Click to enlarge!" >';
echo '<img src="thumbnails/'.$file.'" alt="thumbnail" border="0" />';
echo '</a></td>';
if($l % $modulo == $modulo - 1) echo '</tr>';
$l++;
$unfinished = $l % $modulo;
}
}
closedir($open_thumbnails);
if($unfinished != 0){
for($k = $unfinished; $k < $modulo; $k++){
echo '<td> </td>';
}
echo '</tr>';
}
echo '</table>';
?>
</body>
</html>