How to create a dynamic php photo gallery with GD library

October 19, 2017 PHP 2 Comments

Spread the love

Last updated:21st November, 2020

Dynamic php photo gallery

PHP GD library can be used to manipulate images. Often in web applications, you need to generate dynamic thumbnails of large images, where cropping each image is a tedious task. PHP GD library has many great features. In the last article, you learned, how to watermark images using PHP, in this article you are going to learn How to create a dynamic photo gallery. Images will be downloaded to a project directory and then dynamic thumbnails of images would be shown to users as a photo gallery.

In this article following tasks would be performed.

1. Create a project. php-photo-gallery in htdocs directory of XAMPP

2. Download and add images to a directory

3. Create a file thumbnails.php to generate dynamic thumbnails of images

4. Create a file photogallery.php to display dynamic thumbnails as a photo gallery

Create a project dynamic-php-photo-gallery

If you have not installed PHP yet. Visit, WAMP or XAMPP site, download and install. It is an easy wizard-based process that installs, PHP, MySQL and Apache.

After installation of XAMPP then go to htdocs directory inside XAMPP.

Create a directory named php-photo-gallery. Open this directory in your favorite IDE such as sublime text.

Add images to a directory to create a photo gallery

Create a directory images in the PHP-photo-gallery directory. Download some JPG images from the internet and save in this folder. You can download from sites like pexels.com where free images with CC0 copyrights are available. Here are 12 images as you can view.

Create a file thumbnails.php to create a photo gallery

In php-photo-gallery directory, create a file thumbnail.php.

<?php

 $image_dir = "images/";

$img = $_GET['image'];

$size = 300;

if($img){

    $image = imagecreatefromjpeg($image_dir."/".$img);

    $width  = imagesx($image);

    $height = imagesy($image);
    
    $thumb_height = $size;

    $thumb_width  = $size;
    
    $ratio_original = $width / $height;

    if($thumb_width / $thumb_height > $ratio_original){

        $thumb_width = $size * $width;

    }else{

        $thumb_height = $size / $ratio_original;

    }
    
    $thumbnail = imagecreatetruecolor($thumb_width, $thumb_height);

    imagecopyresized($thumbnail, $image, 0, 0, 0, 0, $thumb_width, $thumb_height, $width, $height);

    header("Content-type: image/jpeg");

    imagejpeg($thumbnail);

    imagedestroy($thumbnail);

    imagedestroy($image);
    
}

In the code above, first image directory path is specified. Then $image is assigned an image, passed as a URL parameter. The $size parameter is assigned a value of 300 that is used as height and width of the thumbnail. If the $image exists then an image resource is created by using imagecreatefromjpeg() method. This method expects full path of the image.

Height and width are calculated using imagesx and imagesy methods and assigned to $height and $width. The ratio of the image is calculated. Next height and width are validated if thumbnail height or width is greater than ratio. These are set by multiplying $size with width or height.

Thumbnail is created using the imagecreatetrue color method, providing height and width. An important method imagecopyresized is used and the original image, thumbnail image, thumbnail height, width and original image height and width are passed. Content type image/jpeg is sent to the browser. Using imagejpeg method a thumbnail image is generated. Finally, both original and thumbnail image is destroyed using image destroy method to free memory.

Create a file photogallery.php to create a photo gallery

In php-photo-gallery directory, create a file photogallery.php

<!DOCTYPE html>
<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            h1{

                font-family: Georgia, "Times New Roman", Times, serif;

                font-size: 18px;

                color: #FFF;                    
            }
            
            body{

                background-color: #666;
            }
            
            #gallery {

                background-color: #FFF;

                border: 1px dotted #999;
            }
            
        </style>

    </head>

    <body>

<?php
        $image_dir = "images/";

        $images = [];

        if(!$dir = opendir($image_dir)){

            die("Cannot open $image_dir");

        }
        
       
        while(false !== ($image= readdir($dir))){

            if($image != "." && $image != ".." && (strtolower(substr($image, -4)) == "jpeg" || strtolower(substr($image, -3)) == "jpg") ){

                array_push($images, $image);
            }
        }
        
        echo "<h1 align='center'>Photo Gallery</h1>";

        echo "<table id='gallery' width='50%' cellpadding=5 align = 'center'><tr>";

        $count = 0;

        foreach ($images as  $value) {
           
            echo "<td valign='bottom'><a href='".$image_dir.$value."'><img src='thumbnails.php?image=".$value."' border=0 /></a></td>";

            $count++;

            if($count >=4){

                echo "</tr><tr>";

                $count = 0;

            }

        }
        
        echo "</tr></table>";

        closedir($dir);

        ?>

    </body>

</html>

First CSS styles are added to display photo gallery. Then an image directory is specified and images array is created. Image directory is opened using opendir method. Directory handle is assigned to $dir. If the directory is not accessible script is not executed further.

Next, inside a while, loop images directory is browsed and each image is validated if it has an extension of jpeg or jpg. Image is pushed into an array of images using array_push method.

Inside an HTML table row, a loop is performed through image array and each thumbnail image is placed inside a href link. An image is passed as a URL parameter to thumbnail.php.

<a href='".$image_dir.$value."'><img src='thumbnails.php?image=".$value."' border=0 /></a>

Thumbnail.php creates a thumbnail of specified width and height. Images are displayed 4 in a row. The photo gallery is generated.

Run XAMPP or WAMP, start Apache web server, open browser and add URL.

http://localhost/php-photo-gallery/photogallery.php

Generated photo gallery

You can view the photo gallery below.

Summary

To summarize, in this article you have learned to create dynamic thumbnails from a directory of images. First images are added to a directory in the project. Dynamic thumbnails are generated and are displayed in thumbnails.php and a php photo gallery is generated. You can download the source code for the tutorial by visiting this GitHub repository.