Gallery OK (need css fix)

bundle.css

@@ -45,12 +45,12 @@ main p.pagination a {
     float: left;
 }
 
-nav {
+.topnav {
     padding: 5px 50px;
     background-color: #0C5678;
 }
 
-nav a {
+.topnav a {
     color: aliceblue;
     background-color: #0C5678;
     padding: 5px 10px;
@@ -58,10 +58,27 @@ nav a {
     border-color: black;
 }
 
-nav a:hover {
+.topnav a:hover {
     background-color: #2f647c;
 }
 
+.breadcrumbs
+{
+    padding: 5px 25px;
+    font-weight: bold;
+}
+
+.gallery-grid img{
+    width: 44%;
+    display:inline;
+}
+
+.subfolder-list {
+    
+    list-style-type: none;
+    border-radius: 10px;
+}
+
 ul.postlist {
     list-style-type: none;
     margin: 0;

eleventy.config.js

@@ -38,12 +38,26 @@ eleventyConfig.addCollection("miniImages", function(collectionApi) {
         const fullPath = path.join(dir, file);
         if (fs.statSync(fullPath).isDirectory()) {
           getFiles(fullPath);
-        } else if (file.endsWith(".jpg") || file.endsWith(".jpeg")) {
+        } else if (file.endsWith(".jpg") || 
+                  file.endsWith(".jpeg") ||
+                  file.endsWith(".png")) {
+          
+          // BEFORE =============
           const relativePath = path.relative("./_data/images", fullPath).replace(/\\/g, "/");
+          //const pathParts = relativePath.split(path.sep).slice(0, -1); // Make Breadcrumb
+          // ====================
+
           files.push({
+            // AFTER ==============
+            fullPath: fullPath, // We need this for the calculation below
+            //webPath: fullPath.replace("src/", "/"), 
+            date: fs.statSync(fullPath).mtime,
+            // BEFORE =============
             path: "/photos/" + relativePath,
-            album: dir.split(path.sep).pop(), // Gets the folder name
-            date: fs.statSync(fullPath).mtime
+            //album: dir.split(path.sep).pop(), // Gets the folder name
+            //breadcrumbs: pathParts,
+            //date: fs.statSync(fullPath).mtime
+            // ====================
           });
         }
       });
@@ -53,11 +67,40 @@ eleventyConfig.addCollection("miniImages", function(collectionApi) {
     
     // Group them by album name
     const grouped = {};
+
     files.forEach(f => {
-      if (!grouped[f.album]) grouped[f.album] = [];
-      grouped[f.album].push(f);
+      // AFTER ==============
+      const relFolder = path.relative(baseDir, path.dirname(f.fullPath));
+      // BEFORE =============
+      // Use the directory path as the unique ID (e.g., "wargaming/40k/orks")
+      //const folderPath = path.dirname(path.relative("./_data/images", f.path));
+      
+
+      if (!grouped[relFolder]) {
+        grouped[relFolder] = {
+          images: [],
+          subfolders: [],
+          breadcrumbArray: relFolder === "" ? [] : relFolder.split(path.sep)
+          //path: folderPath.split(path.sep) // Normalize to forward slashes
+        };
+      }
+      grouped[relFolder].images.push(f);
     });
 
+    // Second pass to link parents to children subfolders
+    for (const parentPath in grouped) {
+      for (const potentialChild in grouped) {
+        const parentParts = parentPath === "" ? [] : parentPath.split(path.sep);
+        const childParts = potentialChild.split(path.sep);
+
+        // Is the child exactly one level deeper than the parent?
+        if (potentialChild.startsWith(parentPath) &&
+        childParts.length === parentParts.length + 1 &&
+        parentPath !== potentialChild) {
+          grouped[parentPath].subfolders.push(potentialChild);
+        }
+      }
+    }
     return grouped;
   });
 // ========================================================

gallery.njk

@@ -7,48 +7,49 @@ pagination:
   reverse: true
 permalink: "/gallery/{{ albumName | slugify }}/index.html"
 ---
-    <nav class="breadcrumbs">
-        <a href="/gallery">Gallery</a>
-        {% for crumb in collections.miniImages %}
-        <span> / </span>
-        <span class="crumb">{{ crumb | capitalize }}</span>
-        {% endfor %}
-    </nav>
 
-<hr>
+<nav class="breadcrumbs">
+  <a href="/gallery">Gallery</a>
+  {% set pathAccu = "" %}
+  {% for part in albumName.split('/') %}
+    {% if part %}
+      {% set pathAccu = (pathAccu + "/" + part) if pathAccu else part %}
+      <span> / </span>
+      <a href="/gallery/{{ pathAccu | slugify }}/">{{ part | capitalize }}</a>
+    {% endif %}
+  {% endfor %}
+
+  {# 1. List Subfolders #}
+  {% set currentData = collections.miniImages[albumName] %}
+
+  {% if currentData.subfolders.length > 0 %}
+    <ul class="subfolder-list">
+      {% for sub in currentData.subfolders %}
+        <li>
+          <a href="/gallery/{{ sub | slugify }}/">📁 {{ sub }}</a>
+        </li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+</nav>
 
-<h2>Album: {{ albumName }}</h2>
+{# 2. List Images #}
 <div class="gallery-grid">
-  {% for photo in collections.miniImages[albumName] | sort(attribute='date') | reverse %}
-    <div class="mini-card">
-      <img src="{{ photo.path }}" alt="photo_{{ loop.index }}" loading="lazy">
-      <div class="meta">
+  {% for photo in currentData.images | sort(attribute='date') | reverse %}
+    <img src="{{ photo.path }}" alt="photo_{{ loop.index }}" loading="lazy">
+    <div class="meta">
         <span>{{ photo.date | date('YYYY-MM-DD') }}</span>
-      </div>
     </div>
   {% else %}
     <p>No photos found in this album.</p>
   {% endfor %}
 </div>
 
-        <p class="pagination">
-            {% if page.url != pagination.href.last %}
-            <a href="{{ pagination.href.next }}">⬅️ Prev Page</a>{% endif %} -
-            {% if page.url != pagination.href.first %}
-            <a href="{{ pagination.href.previous }}">Next Page ➡️</a>{% endif %}
-        </p>
-<!--
-<p>Debug Info:</p>
-<ul>
-  <li>Current Page: {{ pagination.pageNumber }}</li>
-  <li>Next Link: {{ pagination.href.next }}</li>
-  <li>Previous Link: {{ pagination.href.previous }}</li>
-  <li>Total Pages: {{ pagination.pages.length }}</li>
-</ul>
-<h3>Total posts found in collection: {{ collections.postlist.length }}</h3>
-<ul>
-{% for p in collections.postlist %}
-  <li>{{ p.inputPath }}</li>
-{% endfor %}
-</ul>
--->
+<p class="pagination">
+    {% if page.url != pagination.href.last %}
+        <a href="{{ pagination.href.next }}">⬅️ Prev Page</a>
+    {% endif %} -
+    {% if page.url != pagination.href.first %}
+        <a href="{{ pagination.href.previous }}">Next Page ➡️</a>
+    {% endif %}
+</p>

gallery_index.njk

@@ -1,15 +0,0 @@
----
-layout: main_layout.njk
-data: collections.miniImages
-permalink: "/galleryB/index.html"
----
-<h2>Index</h2>
-<ul>
-  {% for name, photoList in collections.miniImages %}
-    <li>
-      <a href="/gallery/{{ name | slugify }}/">
-        {{ name | capitalize }} ({{ photoList.length }} photos)
-      </a>
-    </li>
-  {% endfor %}
-</ul>

includes/topbar.html

@@ -3,7 +3,7 @@
         <img src="/img/astounddS.png" alt="huh" width="28">
     </a>
 
-    <nav>
+    <nav class="topnav">
         <a href="/">Home</a>
         <a href="/gallery">Photos</a>
         <a href="/about">About Me</a>