Timing debugging on media page, have to push to test timing in production.

Author: DanielFeshbach

_pages/media.html

@@ -13,15 +13,15 @@
   .media-card {
     min-width: 0 !important;
     background: #fff !important;
-    border: 1px solid #e1e4e8 !important; /* Professional gray border */
+    border: 1px solid #e1e4e8 !important;
     border-radius: 8px !important;
     padding: 1rem !important;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; /* Subtle shadow */
-    margin: 0 !important; /* Remove margin, let grid handle spacing */
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
+    margin: 0 !important;
     display: block !important;
     width: 100% !important;
     box-sizing: border-box !important;
-    transition: box-shadow 0.2s ease !important; /* Smooth hover effect */
+    transition: box-shadow 0.2s ease !important;
   }
 
   /* Hover effect for cards */
@@ -35,8 +35,8 @@
   .media-grid {
     display: grid !important;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
-    grid-auto-rows: 10px !important; /* Smaller row height for tighter packing */
-    gap: 12px !important; /* Slightly smaller gap */
+    grid-auto-rows: 10px !important;
+    gap: 12px !important;
     align-items: start !important;
     width: 100% !important;
     max-width: none !important;
@@ -80,10 +80,28 @@
     border-radius: 4px !important;
     margin-bottom: 0.5rem !important;
   }
+
+  /* Production debugging - remove after fixing */
+  .debug-info {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    background: rgba(0,0,0,0.8);
+    color: white;
+    padding: 10px;
+    font-size: 12px;
+    z-index: 9999;
+    max-width: 300px;
+  }
 </style>
 
 <h1>Media</h1>
 
+<!-- Debug info for production -->
+<div class="debug-info" id="debug-info">
+  Initializing...
+</div>
+
 <section class="media-grid">
   {% assign media_items = site.media | sort: "date" | reverse %}
   {% for item in media_items %}
@@ -120,39 +138,72 @@ <h3 class="archive__item-title">
 
 <script async src="https://www.instagram.com/embed.js"></script>
 <script>
+let masonryAttempts = 0;
+let lastHeights = [];
+
+function updateDebug(message) {
+  const debug = document.getElementById('debug-info');
+  if (debug) {
+    debug.innerHTML = `Attempt ${masonryAttempts}: ${message}<br>Time: ${new Date().toLocaleTimeString()}`;
+  }
+}
+
 function masonryLayout() {
   const grid = document.querySelector('.media-grid');
-  if (!grid) return;
+  if (!grid) {
+    updateDebug('Grid not found');
+    return;
+  }
 
   const items = grid.querySelectorAll('.media-card');
-  const rowHeight = 10; // Match the updated CSS grid-auto-rows
-  const gap = 12; // Match the updated CSS gap
+  const rowHeight = 10;
+  const gap = 12;
+  
+  masonryAttempts++;
 
-  // First, reset all items to auto height
+  // Reset all items
   items.forEach(item => {
     item.style.gridRowEnd = 'auto';
   });
 
-  // Force browser to recalculate layout
+  // Force reflow
   grid.offsetHeight;
 
-  // Now calculate proper row spans for each item
-  items.forEach(item => {
-    const rect = item.getBoundingClientRect();
-    const itemHeight = rect.height;
+  // Wait a bit for content to settle, then calculate
+  setTimeout(() => {
+    const currentHeights = [];
 
-    // Calculate how many grid rows this item needs
-    const rowSpan = Math.ceil((itemHeight + gap) / (rowHeight + gap));
+    items.forEach((item, index) => {
+      const rect = item.getBoundingClientRect();
+      const itemHeight = rect.height;
+      currentHeights.push(itemHeight);
+      
+      const rowSpan = Math.ceil((itemHeight + gap) / (rowHeight + gap));
+      item.style.gridRowEnd = `span ${Math.max(1, rowSpan)}`;
+    });
 
-    // Apply the calculated row span
-    item.style.gridRowEnd = `span ${Math.max(1, rowSpan)}`;
-  });
+    // Check if heights are still changing (content still loading)
+    const heightsChanged = JSON.stringify(currentHeights) !== JSON.stringify(lastHeights);
+    lastHeights = currentHeights.slice();
+    
+    updateDebug(`Heights changed: ${heightsChanged}, Max height: ${Math.max(...currentHeights)}px`);
+    
+    // If heights are still changing and we haven't tried too many times, try again
+    if (heightsChanged && masonryAttempts < 20) {
+      setTimeout(masonryLayout, 1000);
+    }
+  }, 100);
 }
 
-// Enhanced initialization with better timing
+// More aggressive initialization for production
 function initMasonry() {
-  // Multiple attempts with different delays to handle Instagram embeds
-  const delays = [50, 200, 500, 1000, 2000, 3000];
+  updateDebug('Starting masonry initialization');
+  
+  // Run immediately
+  masonryLayout();
+  
+  // Then run at multiple intervals to catch late-loading content
+  const delays = [100, 300, 500, 1000, 2000, 3000, 5000, 8000, 12000];
 
   delays.forEach(delay => {
     setTimeout(() => {
@@ -161,29 +212,44 @@ <h3 class="archive__item-title">
   });
 }
 
-// Wait for Instagram embeds to load
-window.addEventListener('load', function () {
-  if (window.instgrm && instgrm.Embeds) { 
-    instgrm.Embeds.process();
-  }
-  
-  // Run masonry after a short delay to let embeds render
-  setTimeout(initMasonry, 100);
+// Multiple event listeners to catch different loading states
+document.addEventListener('DOMContentLoaded', () => {
+  updateDebug('DOM loaded');
+  initMasonry();
 });
 
+window.addEventListener('load', () => {
+  updateDebug('Window loaded');
+  setTimeout(initMasonry, 200);
+});
+
+// Instagram embed handling
+function handleInstagramEmbeds() {
+  if (window.instgrm && window.instgrm.Embeds) {
+    updateDebug('Processing Instagram embeds');
+    window.instgrm.Embeds.process();
+    setTimeout(masonryLayout, 1500); // Give embeds time to render
+  }
+}
+
+// Try to process Instagram embeds multiple times
+setTimeout(handleInstagramEmbeds, 1000);
+setTimeout(handleInstagramEmbeds, 3000);
+setTimeout(handleInstagramEmbeds, 6000);
+
 // Handle window resize
 window.addEventListener('resize', function() {
   clearTimeout(window.resizeTimer);
-  window.resizeTimer = setTimeout(masonryLayout, 300);
+  window.resizeTimer = setTimeout(() => {
+    updateDebug('Window resized');
+    masonryLayout();
+  }, 300);
 });
 
-// Initial load
-document.addEventListener('DOMContentLoaded', initMasonry);
-
-// Also try to run masonry when Instagram embeds finish loading
-if (window.instgrm) {
-  window.instgrm.Embeds.process().then(() => {
-    setTimeout(masonryLayout, 500);
-  });
-}
+// Keep checking for new content periodically
+setInterval(() => {
+  if (masonryAttempts < 50) { // Don't run forever
+    masonryLayout();
+  }
+}, 5000);
 </script>