Gallery: EXIF date for sorting

README.md

@@ -31,6 +31,10 @@ And don't forget to do CMD+Maj+. on MacOS to show hidden files and folder (.giti
 This is for local testing
 (Don't forget to often restart this when modifying the eleventy.config.js file)
 
+## Notes
+- Gallery may only accept lowercase .jpg .jpeg .png extension ? maybe...
+- Gallery will only accept images with a valid EXIF Date (real photos) !
+
 ## File Structure
 - _data - Photos are stored here and automagically added to website
 - _drafts - ignored md files from the builder

bundle.css

@@ -191,6 +191,7 @@ code {
   transition: opacity 0.3s ease;
   color: white;
   font-weight: bold;
+  text-align: center;
 }
 
 .gallery-item:hover .meta-overlay {

eleventy.config.js

@@ -33,9 +33,9 @@ eleventyConfig.addCollection("miniImages", function(collectionApi) {
     const files = [];
     const baseDir = "./_data/images/";
 
-    // Recursive function to find all jpgs
+    // Recursive function to find all images
     const getFiles = (dir) => {
-      if (!fs.existsSync(dir)) return; // [EXIF] Safety check
+      if (!fs.existsSync(dir)) return; // Safety check
       fs.readdirSync(dir).forEach(file => {
         const fullPath = path.join(dir, file);
         if (fs.statSync(fullPath).isDirectory()) {
@@ -48,12 +48,17 @@ eleventyConfig.addCollection("miniImages", function(collectionApi) {
           // .jpg an others extensions might be case sensitive on some systems !!
           
           // READ EXIF DATA
-          let exifData = {};
+          let exifDate = null;
           try {
             const buffer = fs.readFileSync(fullPath);
             const parser = exifParser.create(buffer);
             const result = parser.parse();
             
+            // Grab Exif Date of photo taken (if exists)
+            if (result.tags.DateTimeOriginal) {
+              exifDate = new Date(result.tags.DateTimeOriginal * 1000);
+            }
+            
             exifData = {
               model: result.tags.Model || "Unknown",
               lens: result.tags.LensModel || "Unknown",
@@ -63,7 +68,7 @@ eleventyConfig.addCollection("miniImages", function(collectionApi) {
               iso: result.tags.ISO || "N/A"
             };
           } catch (e) {
-            console.error(`Could not parse EXIF for ${file}:`, e.message);
+            console.error(`Skipping ${file}: No valid EXIF date found.`);
           }
           // END READ EXIF DATA
 
@@ -72,14 +77,17 @@ eleventyConfig.addCollection("miniImages", function(collectionApi) {
           //const pathParts = relativePath.split(path.sep).slice(0, -1); // Make Breadcrumb
           // ====================
 
-          files.push({
-            fullPath: fullPath, // We need this for the calculation below
-            //webPath: fullPath.replace("src/", "/"), 
-            date: fs.statSync(fullPath).mtime,
-            path: "/photos/" + relativePath,
-            folderPath: path.relative(baseDir, path.dirname(fullPath)),
-            exif: exifData,
+          // Only add real photos with EXIF date
+          if (exifDate) {
+            files.push({
+              fullPath: fullPath, // We need this for the calculation below
+              //webPath: fullPath.replace("src/", "/"), 
+              date: exifDate,
+              path: "/photos/" + relativePath,
+              folderPath: path.relative(baseDir, path.dirname(fullPath)),
+              exif: exifData,
           });
+          }
         }
       });
     };
@@ -89,6 +97,9 @@ eleventyConfig.addCollection("miniImages", function(collectionApi) {
     // Group them by album name
     const grouped = {};
 
+    // This here ? or just before return grouped ?
+    files.sort((a, b) => a.date - b.date);
+
     files.forEach(f => {
       const relFolder = path.relative(baseDir, path.dirname(f.fullPath));
 
@@ -117,6 +128,7 @@ eleventyConfig.addCollection("miniImages", function(collectionApi) {
         }
       }
     }
+
     return grouped;
 });
 // ========================================================
@@ -135,17 +147,17 @@ eleventyConfig.addCollection("allPhotos", function(collectionApi) {
 //    return d.toISOString().split('T')[0]; // Returns YYYY-MM-DD
 //  });
 
-eleventyConfig.addFilter("date", function(dateObj) {
-  const d = new Date(dateObj);
-  
+//eleventyConfig.addFilter("date", function(dateObj) {
+//  const d = new Date(dateObj);
+//  
   // Check if the date is actually valid
-  if (isNaN(d.getTime())) {
-    console.warn("Skipping invalid date for a file. Value received:", dateObj);
-    return "Date Unknown"; 
-  }
+//  if (isNaN(d.getTime())) {
+//    console.warn("Skipping invalid date for a file. Value received:", dateObj);
+//    return "Date Unknown"; 
+//  }
 
-  return d.toISOString().split('T')[0];
-});
+//  return d.toISOString().split('T')[0];
+//});
 
 
 return {

gallery.njk

@@ -35,11 +35,12 @@ permalink: "/gallery/{{ albumName | slugify }}/index.html"
 
 {# 2. List Images #}
 <div class="gallery-grid">
-  {% for photo in currentData.images | sort(attribute='date') | reverse %}
+  {% for photo in currentData.images | reverse %}
     <a href="/gallery/single/{{ photo.path | slugify }}/index.html" class="gallery-item">
       <img src="{{ photo.path }}" alt="photo_{{ loop.index }}" loading="lazy">
       <div class="meta-overlay">
-          <span>{{ photo.date | date('YYYY-MM-DD') }}</span>
+          {{ photo.date.toLocaleDateString("en-GB") }}<br>
+          {{ photo.date.toLocaleTimeString("en-GB", { hour: '2-digit', minute: '2-digit' }) }}
       </div>
     </a>
   {% else %}

image_show.njk

@@ -43,5 +43,8 @@ permalink: "/gallery/single/{{ photo.path | slugify }}/index.html"
   </ul>
   {% endif %}
   <img src="{{ photo.path }}" alt="photo" style="max-width: 100%; height: auto;">
-  <p class="uploaded-date">Uploaded on: {{ photo.date | date('YYYY-MM-DD') }}</p>
+  <p class="uploaded-date">
+    Taken on {{ photo.date.toLocaleDateString("en-GB") }} at
+    {{ photo.date.toLocaleTimeString("en-GB", { hour: '2-digit', minute: '2-digit' }) }}
+  </p>
 </div>