Display on your web page images from a directory - PHP example

By Sergey Skudaev

I will show you how I display images gallery on my web page. First, I created a main images directory in my root directory. Then I create a directory for thumbnail images. Then I use PHP script to resize each main image, create a thumbnail and save it in thumbnail images directory with the same name as main image.

Then I display all thumnail images on one page in a table. Each thumbnail image has link to main image.

When user click a thumbnail, a corresponding single main image is displayed on the next page

Resize images to create thumbnails

<?php
function resize($original_image, $thumb_width, $resized_image, $thumbdir, $orig_image_dir)
{
  $max_width=$thumb_width;

    //Check if GD extension is loaded
    if (!extension_loaded('gd') && !extension_loaded('gd2'))
    {
        trigger_error("GD is not loaded", E_USER_WARNING);
        return false;
    }

    //Get Image size info
    list($width_orig, $height_orig, $image_type) = getimagesize($orig_image_dir."/".$original_image);

    switch ($image_type)
    {
        case 1: $im = imagecreatefromgif($orig_image_dir."/".$original_image); break;
        case 2: $im = imagecreatefromjpeg($orig_image_dir."/".$original_image);  break;
        case 3: $im = imagecreatefrompng($orig_image_dir."/".$original_image); break;
        default:  trigger_error('Unsupported filetype!', E_USER_WARNING);  break;
    }

    //calculate the height/width ratio
    $h_to_w_ratio = (float) $height_orig / $width_orig;

    //calulate the thumbnail width based on the height
    $thumb_height = round($thumb_width * $h_to_w_ratio);


    while($thumb_height>$max_width)
    {
        $thumb_width-=10;
        $thumb_height = round($thumb_width * $h_to_w_ratio);
    }

    $newImg = imagecreatetruecolor($thumb_width, $thumb_height);

    //Check if this image is PNG or GIF, then set if Transparent*/
    if(($image_type == 1) OR ($image_type==3))
    {
        imagealphablending($newImg, false);
        imagesavealpha($newImg,true);
        $transparent = imagecolorallocatealpha($newImg, 255, 255, 255, 127);
        imagefilledrectangle($newImg, 0, 0, $thumb_width, $thumb_height, $transparent);
    }
    imagecopyresampled($newImg, $im, 0, 0, 0, 0, $thumb_width, $thumb_height, $width_orig, $height_orig);

    //Generate the file, and rename it to $resized_image
    switch ($image_type)
    {
        case 1: imagegif($newImg,$thumbdir."/".$resized_image); break;
        case 2: imagejpeg($newImg,$thumbdir."/".$resized_image);  break;
        case 3: imagepng($newImg,$thumbdir."/".$resized_image); break;
        default:  trigger_error('Failed resize image!', E_USER_WARNING);  break;
    }

    return $resized_image;
}
?>

Let say you have main images in the images directory and you want to create a thumbnail image in the thumb directory. Then you place directory names in the function arguments.

$files=array();
$count=0;

$files=scandir(dirname(__FILE__)."/images/");

$count=count($files);


for($i=2; $i < $count; $i++)
{
echo resize($files[$i], 170, $files[$i],'thumb','images');
}

?>

Display Thumnails

Now when your created thumbnail images in the thumb directory, you may display these images on your web page. Again, I used scandir function to get image names.

$files=array();
$images=array();
$count=0;

$files=scandir(dirname(__FILE__)."/".$thumb."/");

$count=sizeof($files);
//two first file name are not valid images for some reason and you have to skip them.
for($i=0; $i<$count; $i++)
{
if($i >1)
$images[]=$files[$i];
}

$count=sizeof($images);

print('<table><tr>');

for($i=0; $i<$count; $i++)
{
//pass image name to the main image directory to display large image on the next page.
print('<td><a href="largeimage.php?path='.$orig_image_dir.'/'.$images[$i].'">
<img src="'.$thumb.'/'.$images[$i].'"></a></td>');
if(($i+1) % 6==0)
{
print('</tr><tr>');
}

}
print('</tr></table>');

?>

Display large image

On the largeimage.php page display the main image

$imagefile="";

if(isset($_GET['path']))
$imagefile=$_GET['path'];

print('<table align="center" border="7"><tr><td>');
print('<img src="'.$imagefile.'" width="593" alt="an image caption"/>');
print('</td></tr></table>');