From 19c32f346fc833c9724e4a2f5ce1f67220ff2fb9 Mon Sep 17 00:00:00 2001
From: rafapolo <rafael@extrapolo.com>
Date: Wed, 30 Sep 2026 19:28:33 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20cart=C3=A3o=20troca=20o=20tile=20borrad?=
 =?UTF-8?q?o=20pela=20imagem=20mediana?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/wall.html | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/web/wall.html b/web/wall.html
index d0212ab..053077a 100644
--- a/web/wall.html
+++ b/web/wall.html
@@ -1291,6 +1291,7 @@ cardEl.addEventListener('touchend', e => {
 // Every item's page is the same address with its handle in it, so the map used
 // to spend 1,2 MB repeating that prefix 12.552 times — and meta.handle another
 // 0,4 MB repeating the key it was already filed under. Both are derived here.
+const mediumUrl = h => `https://hel1.your-objectstorage.com/brasiliana/derivados/medio/${h.replace(/\//g, '_')}.webp`;
 const sourceUrl = h => `https://brasilianafotografica.bn.gov.br/brasiliana/handle/${h}?show=full`;
 
 function showCard(data) {
@@ -1322,6 +1323,15 @@ function showCard(data) {
     ctx.drawImage(page.source, entry.col * S, entry.row * S, S, S, 0, 0, out, out);
     img.src = c.toDataURL('image/jpeg', 0.92);
   }
+  // the atlas tile is only 128 px: show it at once, then swap in the medium image
+  // (~1000 px) once it has loaded — unless the card has moved on to another piece
+  const want = data.handle;
+  img.dataset.handle = want;
+  if (want) {
+    const big = new Image();
+    big.onload = () => { if (img.dataset.handle === want) img.src = big.src; };
+    big.src = mediumUrl(want);
+  }
   document.getElementById('card-wrap').classList.add('open');
 }