Monorepo for Aesthetic.Computer aesthetic.computer
4
fork

Configure Feed

Select the types of activity you want to include in your feed.

buy.kidlisp.com: show thumbnail images in Albums section

Replace text pill chips with animated WebP thumbnails per collector,
with piece name labels and click-to-open on aesthetic.computer.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

+37 -21
+37 -21
system/public/kidlisp.com/buy.html
··· 499 499 .album-tokens { 500 500 display: none; 501 501 flex-wrap: wrap; 502 - gap: 6px; 503 - padding: 8px 20px 16px 64px; 502 + gap: 10px; 503 + padding: 12px 20px 20px 64px; 504 504 } 505 505 .album-tokens.open { 506 506 display: flex; 507 507 } 508 - .album-token-chip { 509 - font-family: var(--font-mono); 510 - font-size: 13px; 511 - padding: 4px 10px; 512 - background: var(--bg3); 513 - border: 1px solid var(--border); 514 - border-radius: 20px; 515 - color: var(--text); 508 + .album-thumb { 509 + width: 80px; 516 510 cursor: pointer; 517 - transition: all 0.15s; 511 + transition: transform 0.15s; 518 512 } 519 - .album-token-chip:hover { 520 - background: var(--accent-bg); 521 - border-color: var(--accent); 522 - color: var(--accent); 513 + .album-thumb:hover { 514 + transform: scale(1.08); 515 + } 516 + .album-thumb img { 517 + width: 80px; 518 + height: 80px; 519 + object-fit: cover; 520 + border-radius: 8px; 521 + border: 1px solid var(--border); 522 + display: block; 523 + } 524 + .album-thumb-label { 525 + font-family: var(--font-mono); 526 + font-size: 11px; 527 + color: var(--text2); 528 + text-align: center; 529 + margin-top: 4px; 530 + overflow: hidden; 531 + text-overflow: ellipsis; 532 + white-space: nowrap; 523 533 } 524 534 525 535 .card-buy-btn { ··· 811 821 } 812 822 813 823 async function fetchAlbums() { 814 - const res = await fetch(`https://api.tzkt.io/v1/tokens/balances?token.contract=${CONTRACT}&balance.gt=0&limit=200&select=account.address,account.alias,token.metadata.name,token.tokenId`); 824 + const res = await fetch(`https://api.tzkt.io/v1/tokens/balances?token.contract=${CONTRACT}&balance.gt=0&limit=200&select=account.address,account.alias,token.metadata.name,token.tokenId,token.metadata.thumbnailUri`); 815 825 const data = await res.json(); 816 826 // Group by holder 817 827 const grouped = {}; 818 828 for (const b of data) { 819 829 const addr = b['account.address']; 820 830 if (!grouped[addr]) grouped[addr] = { address: addr, alias: b['account.alias'], tokens: [] }; 821 - grouped[addr].tokens.push({ name: b['token.metadata.name'], tokenId: b['token.tokenId'] }); 831 + grouped[addr].tokens.push({ name: b['token.metadata.name'], tokenId: b['token.tokenId'], thumbnailUri: b['token.metadata.thumbnailUri'] }); 822 832 } 823 833 // Sort by count desc 824 834 return Object.values(grouped).sort((a, b) => b.tokens.length - a.tokens.length); ··· 931 941 <div class="album-count">${album.tokens.length}</div> 932 942 </div> 933 943 <div class="album-tokens" data-idx="${i}"> 934 - ${tokens.map(t => `<span class="album-token-chip" data-code="${t.name}">${t.name}</span>`).join('')} 944 + ${tokens.map(t => { 945 + const thumb = animatedWebpUrl(t.thumbnailUri); 946 + return `<div class="album-thumb" data-code="${t.name}"> 947 + ${thumb ? `<img src="${thumb}" alt="${t.name}" loading="lazy" />` : `<div style="width:80px;height:80px;background:var(--bg3);border-radius:8px;border:1px solid var(--border)"></div>`} 948 + <div class="album-thumb-label">${t.name}</div> 949 + </div>`; 950 + }).join('')} 935 951 </div> 936 952 </div>`; 937 953 }).join(''); ··· 943 959 }); 944 960 }); 945 961 946 - grid.querySelectorAll('.album-token-chip').forEach(chip => { 947 - chip.addEventListener('click', (e) => { 962 + grid.querySelectorAll('.album-thumb').forEach(thumb => { 963 + thumb.addEventListener('click', (e) => { 948 964 e.stopPropagation(); 949 - const code = chip.dataset.code; 965 + const code = thumb.dataset.code; 950 966 window.open(`https://aesthetic.computer/${code}`, '_blank'); 951 967 }); 952 968 });