Computer Programming web Web programming Tips

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

function resize($original_image, $thumb_width, $resized_image, $thumbdir, $orig_image_dir)

    //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);

        $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);
        $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.




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.



//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)



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)



Display large image

On the largeimage.php page display the main image



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

My eBooks on


No comments yet.

Add Comment

* Required information
(never displayed)
Smile Sad Huh Laugh Mad Tongue Crying Grin Wink Scared Cool Sleep Blush Unsure Shocked
How many letters are in the word two?
Enter answer:
Enter code:
Notify me of new comments via email.
Remember my form inputs on this computer.
I have read and understand the privacy policy. *
I have read and agree to the terms and conditions. *
Powered by Commentics