Alt Comp

User Tools

Site Tools

Trace:
photo_gallery

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
photo_gallery [2024/05/01 13:46] – adminphoto_gallery [2024/05/02 14:32] (current) – admin
Line 10: Line 10:
 ### ###
  
-[[https://trainutz.com|{{wiki:remounts.jpg}}]]+[[https://trainutz.com/rcMOUNT.shtml|{{wiki:remounts.jpg}}]]
  
 === Live Demo === === Live Demo ===
Line 20: Line 20:
   - Web server running Linux and Apache or Lighttpd plus PHP   - Web server running Linux and Apache or Lighttpd plus PHP
   - A directory source of .jpg images with lower case file names   - A directory source of .jpg images with lower case file names
-  - <del>Previously created thumbnails (100 x 75 and filename_th.jpg)</del> - please see my recent CreateThumbs Script+  - <del>Previously created thumbnails (100 x 75 and filename_th.jpg)</del> - please see my recent [[create_thumbs|CreateThumbs]] Script
  
 === Description === === Description ===
Line 26: Line 26:
 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.  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 ===
 +<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>
 +
 +</code>
 +
  
 === Installation === === Installation ===
-This is pretty much a manual setup. The Photo Gallery does nothing but display a contact sheet of clickable thumbnails and displays the higher resolution image in a new window when clicked.+### 
 +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 :)
  
-<del>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!</del> Note: I have now created the 'companion script' to go with this which you can find here CreateThumbs Script+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 [[https://www.faststone.org|FastStone Photo Resizer]] under windows for that task which preserves the date and time info. You should also be aware that if you resize your main images some image programs will wipe out your EXIF data. I use [[https://www.faststone.org|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)
 +
 +<del>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!</del> Note: I have now created the 'companion script' to go with this which you can find here [[create_thumbs|CreateThumbs]] Script
 ### ###
  
photo_gallery.1714571210.txt.gz · Last modified: 2024/05/01 13:46 by admin