PHP Thumbnail Image Gallery Script

Description

  • This is an image gallery script that allows you to simply upload new full sized images in FTP and the script will automatically create the thumbnails for those images and add those images to a paged thumbnail gallery suitable for browsing.

Example

Download

Terms of Use

  • Version 1.2.0 and onward is released under GNU General Public License. Basically this means you are free to use the script, modify it, and even redistribute versions of your own under the same license.

What's new

  • 1.2.1 [January 13, 2008] - Code went through another cleanup and comment updates. Goal is to make it so anyone can easily modify it themselves.
  • 1.2.0 [December 26, 2007]
    1. Stripped out broken Imagemagick support.
    2. Cleaned up the code.
    3. Better commented everything.
    4. Redid the gallery layout to use CSS the user can easily change.
    5. Changed the License to GNU General Public License.
  • 1.1.0 [June 2, 2006] - Started cleaning up the code. This version was never publicly released
  • 1.01 [May 11, 2004] - Initial release

Instructions

gallery.php settings

  • Open gallery.php and scroll down to about line 30 and look for $config['size']. Set this to the maximum width or height you want your image thumbnail to be.
  • On the next line in the $config['imagequality'] set this to the JPEG quality you would like your thumbnails to be. I recommend you keep it set to 70
  • $config['rows'] and $config['cols'] are the number of rows and number of columns of thumbnail images you want shown on each page
  • $config['maxShow'] is the number of page numbers to show at one time. for instance if you have 100 pages of images, you can set this to only show the page numbers of the 10 pages close to where you currently are
  • $config['fulls'] is the relative path to the full size images located on your server. Include the trailing slash. example: $config['fulls'] = "photos/";
  • $config['thumbs'] is the relative path to where you want the thumbnail images to be stored. Include the trailing slash.

File Permissions

  • You'll need to change the permission on the directory you set $config['thumbs'] to. CHMOD it to 775 or 777 so PHP and GD2 can automatically write and create your thumbnails in that directory.

Changing the Look

  • The entire gallery table is controlled by the CSS settings you'll find toward the bottom of the gallery.php file. I tried to comment each specific part of the CSS and what it controls so you can easily change the look of the gallery without actually having to actually edit any of the PHP.

Lightbox

Lightbox Support (OPTIONAL)

  • I've had multiple people want to know how to make this gallery work with the Lighbox script or telling me that they modified it (which is great!) themselves. While the above gallery script does not come with Lightbox support, modifing it to work with Lightbox requires very minor changes.
  • In gallery.php edit line 116 to add rel="lightbox" so it becomes echo '<a href="'. $config['fulls'].$imagelist[$i] .'" title="'. $imagelist[$i] .'" rel="lightbox" target="_blank">';
  • Go down to about line 353 and include lightbox.js and its CSS in the page header (it's normal HTML down there).

Comments

Is there a way of simply adding this script to a folder and have it generate the thumbnails for that folder and all subfolders without adding the folder names?
For example, if I have 100 folders with images in, I would have to change the $config['fulls'] to match each folder (directory) name.
I have tried it with $config['/'] or $config['*'] and also leaving it blank $config[''] but none of these work.

There is no easy way in PHP to get the contents of a folder and all sub-folders. The script would need to be modified to get the list of folders in the initial directory then loop through each folder separately and get the contents for each one (doable, but not easily).

the gallery is great but the vertical images get rotated in the thumbnails. Is there a way to prevent this?

I would guess the actual original image is in landscape (horizontal) mode even though it does not show that way to you. So the script isn't actually rotating it, the thumbnail simply shows how the image was actually saved.

Here's why. Modern camera's usually only save images in landscape (horizontal) mode. However, if you have the camera turned when you take the picture, while they still save the picture in landscape mode, they do include an EXIF tag that identifies the orientation of the picture.

Most new software/browsers will read the EXIF tag and display the images as rotated for you (even though the actual image is not saved that way). I'm guessing PHP's GD2 library does not read any of the EXIF tags so you end up with a thumbnail that does not display using the same orientation.

There is likely a way to either (1) read the tag and correctly adjust the thumbnail, or (2) rewrite the necessary tag into the thumbnail using PHP. However, that addition is beyond the amount of time I want to donate into a project I no longer use myself.

After adding more photos I ran into the following issue where memory has run out. See the error below. Is this customizable in the script?

Fatal error: Allowed memory size of 67108864 bytes exhausted (tried to allocate 17152 bytes) in /home/domains/stgrard/public_html/gallery.php on line 244

You're hitting the limit on the amount of memory PHP is allowed to allocate for your server. Most likely because the image PHP is trying to process is too large in file size for it to load into memory and create a thumbnail for it. Some hosts allow you to overwrite this limit. At the top of the PHP file that is having problems, putting:
ini_set("memory_limit","128M"); might work. You can also try creating a /public_html/php.ini file with this value:
memory_limit = 128M
If that doesn't work, try creating a /public_html/.htaccess file with this value (if that file already exists, just add this line to it):
php_value memory_limit 128M

If none of those work, you'll need to either manually create the thumbnail and upload it to your thumbnail directory, or resize the original down to something smaller the script can handle (might be a good idea anyway so a visitor doesn't spend too long loading any full sized images).

Currently I'm using the gallery.php file and PHP Thumbnail script version 1.2. I want to change the order to which each JPG file is loaded with the newest on Page 1 and the oldest on Page 100 etc. Is there any way to modify the gallery.php file to do this.

In PHP, that requires reading each file for the timestamp. You can make that happen by editing the GetFileList() function and changing it to:

<?php
#-#############################################
# desc: gets the list of image files in the directory
# param: [optional] directory to look through
# returns: array with timestamp sorted list of images (newest first)
function GetFileList($dirname="."){
    global
$config;
   
$tlist = array();

    if (
$handle = opendir($dirname)) {
        while (
false !== ($file = readdir($handle))) {
           
//this matches what type of files to get. jpeg, jpg, gif, png (ignoring case)
           
if (preg_match("/\.(jpe?g|gif|png)$/i",$file)) {
               
$tlist[$file]=filemtime($dirname.$file);
            }
        }
       
closedir($handle);
    }

   
arsort($tlist);
   
$list=array_keys($tlist);

    return
$list;
}
#-#GetFileList()
?>

If you want it to show all the images on a single page by default, the easiest solution would just be to change $config['rows'] to a high number

// rows of images per page
$config['rows'] = 100;

However, if you want to keep the current default but add a "Show All" link, look for the line:
$imagelist = GetFileList($config['fulls']);and under it add:
if(!empty($_GET['showall']) && count($imagelist)>0) $config['rows'] = ceil(count($imagelist)/$config['rows']);

Then in your HTML, add your link to show all:
<a href="gallery.php?showall=true">Show All</a>

You can create cropped thumbnail images by replacing the ResizeImageUsingGD() function with this one:

<?php
#-#############################################
# desc: resize and crop image using GD library
# param: ($fullFilename) filename of full size image ($thumbFilename) filename to save thumbnail as ($size) max width or height to resize to
# returns: true if image created, false if failed
function ResizeImageUsingGD($fullFilename, $thumbFilename, $size) {

    list (
$width,$height,$type) = GetImageSize($fullFilename);

    if(
$im = ReadImageFromFile($fullFilename,$type)){
       
//new is wider than old
       
if(($height/$width) > 1){
           
$cropH=(($height/$size)*$size);
           
$cropW=$width;
        }
       
//new is narrower than old
       
elseif(($width/$height)>1){
           
$cropH=$height;
           
$cropW=(($height/$size)*$size);
        }
       
// same ratio as old. just resize
       
else{
           
$cropW=$size;
           
$cropH=$size;
        }

       
$im2=ImageCreateTrueColor($size,$size);
       
ImageCopyResampled($im2,$im,0,0,0,0,$size,$size,$cropW,$cropH);

        return
WriteImageToFile($im2,$thumbFilename,$type);
    }

    return
false;
}
#-#ResizeImageUsingGD()
?>

Note that if the thumbnails already exist, you'll need to delete them first so they can be recreated at 120x120.

I'm using your script as thumbnails creator for my webcam images. My webcam shoots a photo every 3 minutes and then store all the photos in a folder where I use your script to create thumbnails. Every 24 hours the photos are overwritten with the same image name. Problem is that for the first 24 hours thumbnails match the real photos, while after 24 hours all the photos you see in thumbnails are the old one while if you click on it it shows the real updated one. Is there a way to have all the thumbnails always updated with the last photos shot?

You'll need to add a check and see if the full sized image is newer than the thumbnail. Replace:

// create thumb if not exist
if(!$thumb_exists){
With:
// create thumb if not exist or fullsize is newer
if(!$thumb_exists || filemtime($thumb_image)<filemtime($config['fulls'].$imagelist[$i])){