From d0aeff8488f638813f8868f702900d66ea28358e Mon Sep 17 00:00:00 2001
From: sakrecoer <setto@dyne.org>
Date: Mon, 3 Aug 2026 16:03:58 +0200
Subject: [PATCH] have aaaaall the images

---
 themes/one-pager/assets/js/scripts.js | 87 +++++++++++++++++++++------
 1 file changed, 69 insertions(+), 18 deletions(-)

diff --git a/themes/one-pager/assets/js/scripts.js b/themes/one-pager/assets/js/scripts.js
index cb84aa1..c4f6c7c 100644
--- a/themes/one-pager/assets/js/scripts.js
+++ b/themes/one-pager/assets/js/scripts.js
@@ -265,23 +265,51 @@ function renderRandomPictures(picturesData, containerId, randomize = false) {
   const container = document.getElementById(containerId);
   if (!container) return;
 
-  let selected;
-  if (randomize) {
-    const shuffled = shuffleArray(picturesData);
-    selected = shuffled.slice(0, 6);
-  } else {
-    const sorted = [...picturesData].sort((a, b) => b.created_at - a.created_at);
-    selected = sorted.slice(0, 6);
-  }
+  // First, flatten all pictures from all events
+  let allPictures = [];
 
-  container.innerHTML = '';
+  picturesData.forEach(event => {
+    // Check if this event has multiple imeta tags
+    const imetaTags = [];
+    event.tags.forEach(tag => {
+      if (tag[0] === 'imeta') {
+        imetaTags.push(tag);
+      }
+    });
 
-  selected.forEach(picture => {
-    let imageUrl = '';
-    let alt = picture.content || '';
+    if (imetaTags.length > 0) {
+      // Parse each imeta tag
+      imetaTags.forEach(imetaTag => {
+        let imageUrl = '';
+        let alt = event.content || '';
 
-    if (picture.tags) {
-      picture.tags.forEach(tag => {
+        // The imeta tag is an array of strings
+        imetaTag.forEach(item => {
+          if (typeof item === 'string') {
+            if (item.startsWith('url ')) {
+              imageUrl = item.replace('url ', '').trim();
+            }
+            if (item.startsWith('alt ')) {
+              alt = item.replace('alt ', '').trim();
+            }
+          }
+        });
+
+        if (imageUrl) {
+          allPictures.push({
+            url: imageUrl,
+            alt: alt,
+            created_at: event.created_at,
+            pubkey: event.pubkey
+          });
+        }
+      });
+    } else {
+      // Fallback: single image event (kind 20 with one imeta)
+      let imageUrl = '';
+      let alt = event.content || '';
+
+      event.tags.forEach(tag => {
         if (tag[0] === 'imeta') {
           const imetaStr = tag[1];
           const urlMatch = imetaStr.match(/url ([^\s]+)/);
@@ -290,12 +318,35 @@ function renderRandomPictures(picturesData, containerId, randomize = false) {
           if (altMatch) alt = altMatch[1];
         }
       });
-    }
 
+      if (imageUrl) {
+        allPictures.push({
+          url: imageUrl,
+          alt: alt,
+          created_at: event.created_at,
+          pubkey: event.pubkey
+        });
+      }
+    }
+  });
+
+  // Now select from all pictures
+  let selected;
+  if (randomize) {
+    const shuffled = shuffleArray(allPictures);
+    selected = shuffled.slice(0, 6);
+  } else {
+    const sorted = [...allPictures].sort((a, b) => b.created_at - a.created_at);
+    selected = sorted.slice(0, 6);
+  }
+
+  container.innerHTML = '';
+
+  selected.forEach(picture => {
     const item = document.createElement('div');
     item.className = 'photo-item';
-    item.dataset.image = imageUrl;
-    item.dataset.alt = alt;
+    item.dataset.image = picture.url;
+    item.dataset.alt = picture.alt;
 
     const date = new Date(picture.created_at * 1000);
     const dateStr = date.toLocaleDateString('en-US', {
@@ -305,7 +356,7 @@ function renderRandomPictures(picturesData, containerId, randomize = false) {
     item.dataset.pubkey = picture.pubkey || '';
 
     item.innerHTML = `
-    ${imageUrl ? `<img src="${imageUrl}" alt="${alt}" loading="lazy">` : ''}
+    ${picture.url ? `<img src="${picture.url}" alt="${picture.alt}" loading="lazy">` : ''}
     <div class="photo-date"><span>📅 ${dateStr}</span></div>
     `;