Vary photo display ratios to break up uniform gallery rows

photologue/static/gallery_justified.js

@@ -3,6 +3,25 @@
 (function () {
     const SPACING = 3;
     const PADDING = 3;
+    // Photos that all share the same aspect ratio give rows of identical height,
+    // which reads as a contact sheet. Some photos are therefore displayed with a
+    // slightly different ratio than their own: `object-fit: cover` trims the
+    // edges, and the justified rows become irregular on their own.
+    const CROP_STEPS = [0.8, 1, 1, 1.25]; // display ratio multipliers, drawn per photo
+
+    // id -> multiplier, drawn once per page load and kept on resize (and when a
+    // photo is deleted) so the gallery does not reshuffle while it is looked at.
+    const cropPlan = new Map();
+
+    function displayRatio(item, index) {
+        const w = parseInt(item.dataset.width) || 1;
+        const h = parseInt(item.dataset.height) || 1;
+        const id = item.dataset.slideName || 'i' + index;
+        if (!cropPlan.has(id)) {
+            cropPlan.set(id, CROP_STEPS[Math.floor(Math.random() * CROP_STEPS.length)]);
+        }
+        return (w / h) * cropPlan.get(id);
+    }
 
     function applyLayout() {
         const container = document.getElementById('lightgallery');
@@ -13,11 +32,7 @@
 
         const containerWidth = container.offsetWidth - PADDING * 2;
         const TARGET_HEIGHT = Math.min(220, Math.floor(containerWidth * 0.4));
-        const ratios = items.map(a => {
-            const w = parseInt(a.dataset.width) || 1;
-            const h = parseInt(a.dataset.height) || 1;
-            return w / h;
-        });
+        const ratios = items.map(displayRatio);
 
         // Group items into rows
         const rows = [];