Fix the gallery format

Author: offbyone

package-lock.json

@@ -10,6 +10,7 @@
     "@primer/view-components": "^0.48.0",
     "autoprefixer": "^10.4.23",
     "dompurify": "^3.3.1",
+    "jquery": "^3.7.1",
     "littlefoot": "^4.1.3",
     "magnific-popup": "^1.2.0",
     "postcss": "^8.5.6",

package.json

@@ -1,6 +1,6 @@
 IMG_8996.png: The cloudy mountaintops from the parking lot
 IMG_8998.png: The east entrance to the tunnel
-IMG_8999.png: Looking back east, with the tunnel lit by my red read light
+IMG_8999.png: Looking back east, with the tunnel lit by my red rear light
 IMG_9005.png: A family walking away from me, carrying a flashlight
 IMG_9006.png: The west end of the tunnel has a small picnic area with, I'm told, quite a view. Sometimes.
 IMG_9009.png: The mountainside

photos/galleries/snoqualmie-2021/captions.txt

@@ -74,3 +74,34 @@
 .mfp-counter {
   color: var(--color-mute);
 }
+
+// EXIF details expansion
+.mfp-title {
+  details.mfp-exif-details {
+    margin-top: 0.5rem;
+    
+    summary {
+      cursor: pointer;
+      color: var(--color-mute);
+      font-size: 0.875rem;
+      user-select: none;
+      transition: color 0.2s ease;
+      
+      &:hover {
+        color: var(--color-primary);
+      }
+      
+      &::marker {
+        color: var(--color-primary);
+      }
+    }
+    
+    small {
+      display: block;
+      margin-top: 0.25rem;
+      color: var(--color-mute);
+      font-size: 0.75rem;
+      line-height: 1.4;
+    }
+  }
+}

themes/offby1/scss/offby1/_magnific-popup.scss

@@ -32,7 +32,7 @@ document.addEventListener('DOMContentLoaded', function() {
     }
   });
 
-  // Initialize Magnific Popup on all gallery images (do this once after processing all sections)
+  // Initialize Magnific Popup on manually created gallery images
   if (document.querySelectorAll('.gallery-image').length > 0) {
     jQuery('.gallery-image').magnificPopup({
       type: 'image',
@@ -46,4 +46,50 @@ document.addEventListener('DOMContentLoaded', function() {
       }
     });
   }
+  
+  // Initialize Magnific Popup for photos plugin galleries
+  // These are already created by the pelican photos plugin
+  if (document.querySelectorAll('.gallery-item').length > 0) {
+    jQuery('.gallery-item').magnificPopup({
+      type: 'image',
+      gallery: {
+        enabled: true,
+        navigateByImgClick: true,
+        preload: [0, 1]
+      },
+      image: {
+        titleSrc: function(item) {
+          // Use data-caption if available, otherwise use title attribute
+          const caption = item.el.attr('data-caption');
+          const exif = item.el.attr('data-exif');
+          let title = caption || item.el.attr('title') || '';
+          
+          // Add EXIF data as an expandable details section if available
+          if (exif && exif !== 'None') {
+            title += '<details class="mfp-exif-details"><summary>Photo details</summary><small>' + exif + '</small></details>';
+          }
+          
+          return title;
+        },
+        markup: '<div class="mfp-figure">' +
+                  '<div class="mfp-close"></div>' +
+                  '<div class="mfp-img"></div>' +
+                  '<div class="mfp-bottom-bar">' +
+                    '<div class="mfp-title"></div>' +
+                    '<div class="mfp-counter"></div>' +
+                  '</div>' +
+                '</div>'
+      },
+      callbacks: {
+        markupParse: function(template, values, item) {
+          // Manually set the title HTML to avoid escaping
+          if (values.title) {
+            setTimeout(() => {
+              template.find('.mfp-title').html(values.title);
+            }, 0);
+          }
+        }
+      }
+    });
+  }
 });

themes/offby1/static/js/gallery.js

@@ -52,9 +52,9 @@
             {% for name, photo, thumb, exif, caption in gallery %}
             <a href="{{ SITEURL }}/{{ photo }}" 
                class="gallery-item" 
-               title="{{ name }}"
-               {% if exif %}data-exif="{{ exif }}"{% endif %}
-               {% if caption %}data-caption="{{ caption }}"{% endif %}>
+               title="{{ name }}"{% if exif %}
+               data-exif="{{ exif }}"{% endif %}{% if caption %}
+               data-caption="{{ caption }}"{% endif %}>
                 <img src="{{ SITEURL }}/{{ thumb }}" alt="{{ caption or name }}" loading="lazy">
                 {% if caption %}
                 <div class="gallery-caption">{{ caption }}</div>

themes/offby1/templates/article.html.j2

@@ -42,7 +42,7 @@
         {% endassets %}
 
         {# Magnific Popup CSS #}
-        {% assets output="css/magnific-popup.css", "magnific-popup/dist/magnific-popup.css" %}
+        {% assets output="css/magnific-popup.min.css", "magnific-popup/dist/magnific-popup.css" %}
         <link rel="stylesheet" href="{{ SITEURL }}/{{ ASSET_URL }}" type="text/css" />
         {% endassets %}
 
@@ -104,16 +104,18 @@
 
         {% block scripts %}
         {# jQuery - required for Magnific Popup #}
-        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+        {% assets output="js/jquery.min.js", "jquery/dist/jquery.min.js" %}
+        <script src="{{ SITEURL }}/{{ ASSET_URL }}"></script>
+        {% endassets %}
 
         {# Magnific Popup for image galleries #}
-        {% assets output="js/magnific-popup.js", "magnific-popup/dist/jquery.magnific-popup.js" %}
+        {% assets output="js/magnific-popup.min.js", "magnific-popup/dist/jquery.magnific-popup.min.js" %}
         <script src="{{ SITEURL }}/{{ ASSET_URL }}"></script>
         {% endassets %}
         <script src="{{ SITEURL }}/theme/js/gallery.js"></script>
 
         {# Littlefoot footnotes - loaded from node_modules via webassets #}
-        {% assets output="js/littlefoot.js", "littlefoot/dist/littlefoot.js" %}
+        {% assets output="js/littlefoot.min.js", "littlefoot/dist/littlefoot.js" %}
         <script src="{{ SITEURL }}/{{ ASSET_URL }}"></script>
         {% endassets %}
         <script type="text/javascript">