One File PHP Photo Gallery with EXIF Date and Time
This is my attempt at a PHP Photo Gallery with code snippets and ideas leached from various sources around the net. The page layout and style of the 'contact sheet' is done with CSS within the same file. I have tried to keep it as simple as possible with few bells and whistles.
You may be able to tell I am not a CSS or PHP expert. I just wanted something small (how about 35 lines / 1.41Kb?) with low resources that would work for me and re-create the style of the old Kodak Slides I remember as a child. With this in mind I should caution you that this script may not adhere to the best practices in design and security. If your budgie dies as a result of using it, it's not my fault!
Live Demo
A 'Live Demo' of the script is here https://www.cpcnw.co.uk/travelog/2022-07-GRASSINGTON/
Prerequisites
- Web server running Linux and Apache or Lighttpd plus PHP
- A directory source of .jpg images with lower case file names
Previously created thumbnails (100 x 75 and filename_th.jpg)- please see my recent CreateThumbs Script
Description
A single php script that generates thumbnail images and presents them in a 'contact sheet' style layout similar to the old Kodak slides as shown below. Clicking on the thumbnail opens the image in a new browser tab. Viewers own browser controls to close each tab.
The Code
<?php $dirname=basename(dirname(__FILE__));?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo $dirname;?></title>
<base target="_blank">
<style>
.title{color:white;font-family:Verdana;font-size:12px;text-align:center;margin-bottom:12px;}
body{background-color:black;margin-top:18px;margin-bottom:30px}
a{color:black}
a:hover{color:OrangeRed}
img{max-height:75px;max-width:100px;}
.sheet{margin:0 auto;width:706px;overflow:auto;border:1px solid #f8f8f8;border-radius:6px;background-color:#808080}
.slide{float:left;background:white;border-radius:6px;border-right:1px solid #000;border-bottom:1px solid #000;width:100px;height:104px;padding:12px;margin:8px;text-align:center;}
.info{font-family:Verdana;font-size:10px}
.exif{font-size:9px;padding-left:6px;padding-right:6px;color:dimgray}
</style>
</head>
<body>
<div class='title'>
<?php echo $dirname;?>
</div>
<div class='sheet'>
<?php
$imageDir = '';
$thumbsDir = 'thumbs/';
foreach(glob("$imageDir{*.jpg}", GLOB_BRACE) as $images) {
$imageName = explode("/", $images);
$imageName = end($imageName);
$thumbName = preg_replace('/(\.[.]+)$/',sprintf('%s','_th'),$imageName);
$getExif = exif_read_data("$images");
$exifDate = $getExif['DateTimeOriginal'];
$dateFormat = preg_replace('/:/','-',$exifDate,2);
echo "<a href='$imageDir$imageName' title='$imageName'><div class='slide'>
<img src='$imageDir$thumbsDir$thumbName'><div class='info'>$imageName<div class='exif'>$dateFormat</div></div></div></a>";
}
?>
</div>
</body>
</html>
Installation
This is pretty much a manual setup. Copy the above into a file called index.php and drop this into your web image directory along with your main photos. You should also have a thumbnails sub-directory that contains the 100 x 75 pixel thumbnails. For a portrait image the thumbnail size is 56 x 75 - of course you are free to adapt and improve this to your own needs :)
Note: the above is case sensitive .JPG is different to .jpg on Unix like systems and the image names must be lower case!
You should also be aware that if you resize your main images some image programs will wipe out your EXIF data. I use FastStone Photo Resizer under windows for that task which preserves the date and time info.
That's it. Hope you find this useful. If you have any comments or suggestions for improvements please do let me know. (admint AT cpcnw DOT co DOT uk)
I may at some point look into how to auto generate the thumbnails / directory. For now though it just displays photos and you'll need to manually create the sub-directory and thumbnails! Note: I have now created the 'companion script' to go with this which you can find here CreateThumbs Script