Very simple image gallery

If you have the need for an image gallery without anything fancy, for example just to share a couple game screenshots like I do, here’s a small gallery script.

This script reads the contents of the image directory and compares its image count with the thumbnail directory. If there are more images than in the thumbnail directory, it’ll create thumbnails. You can set the thumbnail size by chosing a width.

Below the code in segments, at the end of the post is the full code.

$dir_tn = "tn/";
$dir_img = "img/";

$img_count = count(glob($dir_img."*.jpg"));
$tn_count = count(glob($dir_tn."*.jpg"));
$img_dir_list = scandir($dir_img);

sort($img_dir_list);
unset($img_dir_list[0]);
unset($img_dir_list[1]);
sort($img_dir_list);

At first we’re setting the image and the thumbnail directories. Since in my cases of use they’re sub directories of the docroot, I’m setting them to ‘img/’ and ‘tn/’ respectively. If having other directories, set them accordingly.

This is followed by the counting of the jpeg files in those directories. Adjust if you’re using another filetype or use the * if using multiple filetypes. Afterwards read the “img/” contents into an array with scandir().

The first following sort() does just that, sorts the directory list in an ascending order, to make sure. Then we can unset the first two keys, which are “.” and “..”, since I’m using Linux after all. May look different with Windows, and therefore need to check and may just remove the first sort() and both unset().
After removing the first key, we’re running sort() again to set new array keys, starting from 0.

if ($tn_count < $img_count)
{
    //create thumbnails
    $dir_handle = opendir($dir_img);

    foreach($img_dir_list as $img_file)
    {
        if (!file_exists($dir_tn.$img_file))
        {
            $img = imagecreatefromjpeg($dir_img.$img_file);
            $width = imagesx($img);
            $height = imagesy($img);
            $tn_width = 200;
            $new_height = floor($height * ($tn_width / $width));
            $tmp = imagecreatetruecolor($tn_width, $new_height);
            imagecopyresized($tmp,$img,0,0,0,0,$new_width,$new_height,$width,$height);
            imagejpeg($tmp,$dir_tn.$img_file);
        }
    }
}

This is the whole thumbnail generation part.
We’re starting out by first checking if the image count matches the thumbnail count, and if it doesn’t, we’re entering the thumbnail creation process.

Once entered, we’re setting the directory handle by opening the set image directory, using opendir().
As we have an array in form of the $img_dir_list of the contents, we’re iterating through them using foreach(). To prevent each image having a thumbnail created if one exists already, we’re checking it through
the next if condition employing file_exists(), the condition being that if the current value of the iterated array doesn’t exist in the thumbnail directory as file, we’re continuing with the creation process.

Next in line we’re creating a new jpeg object using the php-gd function imagecreatefromjpeg() and reading in the current iterated value, followed by getting its x and y dimensions through imagesx() and imagesy() respectively.

The next variable sets your thumbnail size through specifying its width. I’m using 200 pixels, but adjust as needed. Through this we calculate the thumbnail’s height. We divide the set thumbnail width with the image’s original width, multiplicate that with the image’s original height, then round the fractions down with floor().

Next step is to create a new image object, eloquently named $tmp, using imagecreatetruecolor(), passing the variables for it’s new width and new height, followed by inserting the resized image into this object with imagecopyresized(). The passed variables are the newly created object, the original image, the x and y position where to enter the image in the new object, the x and y position of the original image where to take the image from, the new dimensions and the original dimensions.

This whole shebang then gets written to a file using imagejpeg(), passed variables are the new object $tmp and the file position. Since we’re creating a thumbnail, we’re writing it to the set thumbnail directory with the same name as the original file, which is the current iterated value of $img_file.
This writes the file to your filesystem.

?>
<script type='text/javascript' src='js/jquery.js'></script>
<script src="js/jquery.lightbox-0.5.js" type="text/javascript"> </script>
<script type="text/javascript">
    $(function() 
    {
        $('a').lightBox();
    });
</script>
<?php

If you want to use a fancy ajax lightbox to display your images in a neat overlay, insert above’s code into the file. Make sure you have the lightbox and jquery files, obtainable from here (Opens a new tab).

The first three lines after “?>” read in the javascript and css files necessary.
The next script part simply sets all links in the gallery to be used with the lightbox. Since no other files or links exist in this tiny gallery, it’s save to use this option. Further options to only use links between in a <div></div> section can be found on the author’s page above.

If you don’t want it, just leave above’s section out.

$x=0;

print "<table align='center' width='900'>";
foreach($img_dir_list as $img_link)
{   
    if ($x%3==0)
    {   
        print "<tr>";
    }   
        print "<td align='center' width='300'><a href='".$dir_img.$img_link."' >
        <img src='".$dir_tn.$img_link."' border='0'/></a></td>";
    $x++;
    if ($x%3==0)
    {   
        print "</tr>";
    }
}

print "</table>";

The block above displays the thumbnails in a centered table with a fixed width of 900 pixels, three thumbnails in a row, giving each column a width of 300 pixels, enough for our 200 pixels wide image.

To easily insert a new row after three images, we’re starting out setting a variable $x to 0, then we start iterating our directory listing array again.

As we want to insert a new row with every three images, we’re checking if the current value of x returns 0 on modulo 3. If it occurs, we insert a new row.
Next line we simply display the thumbnail with a link to the full image. Use border=’0′ to prevent an ugly border around your image links. Now raise the value of x by 1.
Again, if modulo 3 of $x equals zero, we now close the row.
At the end the table’s closed, and we’re done. That’s it, fairly simple and nothing for a high frequented gallery I might add 😉

Below’s the whole thing:

<php
$dir_tn = "tn/";
$dir_img = "img/";

$img_count = count(glob($dir_img."*.jpg"));
$tn_count = count(glob($dir_tn."*.jpg"));
$img_dir_list = scandir($dir_img);

sort($img_dir_list);
unset($img_dir_list[0]);
unset($img_dir_list[1]);
sort($img_dir_list);

if ($tn_count < $img_count)
{
    //create thumbnails
    $dir_handle = opendir($dir_img);

    foreach($img_dir_list as $img_file)
    {
        if (!file_exists($dir_tn.$img_file))
        {
            $img = imagecreatefromjpeg($dir_img.$img_file);
            $width = imagesx($img);
            $height = imagesy($img);
            $tn_width = 200;
            $new_height = floor($height * ($tn_width / $width));
            $tmp = imagecreatetruecolor($tn_width, $new_height);
            imagecopyresized($tmp,$img,0,0,0,0,$new_width,$new_height,$width,$height);
            imagejpeg($tmp,$dir_tn.$img_file);
        }
    }
}

?>
<script type='text/javascript' src='js/jquery.js'></script>
<script src="js/jquery.lightbox-0.5.js" type="text/javascript"> </script>
<script type="text/javascript">
    $(function() 
    {
        $('a').lightBox();
    });
</script>
<php

$x=0;

print "<table align='center' width='900'>";
foreach($img_dir_list as $img_link)
{   
    if ($x%3==0)
    {   
        print "<tr>";
    }   
        print "<td align='center' width='300'><a href='".$dir_img.$img_link."' >
        <img src='".$dir_tn.$img_link."' border='0'/></a></td>";
    $x++;
    if ($x%3==0)
    {   
        print "</tr>";
    }
}

print "</table>";
?>