Current state

public/legacy/js/legacy-gallery-init.js

@@ -0,0 +1,60 @@
+// Modern gallery init: wait for images to decode, then init Isotope/Masonry
+(function(){
+  'use strict';
+
+  function waitForImages(container) {
+    var imgs = Array.prototype.slice.call(container.querySelectorAll('img'));
+    var promises = imgs.map(function(img){
+      try {
+        if (!img.complete) {
+          return img.decode().catch(function(){ /* ignore */ });
+        }
+        // already complete: still attempt decode if supported
+        return img.decode ? img.decode().catch(function(){}) : Promise.resolve();
+      } catch (e) {
+        return Promise.resolve();
+      }
+    });
+    return Promise.all(promises);
+  }
+
+  async function initGallery() {
+    var grid = document.querySelector('.gallery-grid');
+    if (!grid) return;
+
+    try {
+      await waitForImages(grid);
+    } catch (e) {
+      // continue even on failures
+    }
+
+    // Prefer Isotope (legacy code included it). Fall back to Masonry.
+    if (window.Isotope) {
+      // eslint-disable-next-line no-unused-vars
+      var iso = new Isotope(grid, {
+        itemSelector: '.photo_frame',
+        layoutMode: 'masonry',
+        masonry: { columnWidth: '.photo_frame', gutter: 12 },
+        percentPosition: true,
+        fitWidth: true
+      });
+    } else if (window.Masonry) {
+      // eslint-disable-next-line no-unused-vars
+      var m = new Masonry(grid, {
+        itemSelector: '.photo_frame',
+        columnWidth: '.photo_frame',
+        percentPosition: true,
+        gutter: 12,
+        fitWidth: true
+      });
+    }
+  }
+
+  // Auto-run when DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initGallery);
+  } else {
+    initGallery();
+  }
+
+})();