rstillwell/deckhearth
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

🔍 Add Debug Logging to CollectionThumbnail

Browse source 
Added comprehensive debug logging to understand why card images aren't displaying:
- Log collection name, thumbnails data, and custom image
- Log mainCard and gridCards data
- Add onError and onLoad handlers for images
- Log when showing crying emoji placeholder

This will help identify if the issue is with data flow or image loading.
This commit is contained in:
Randall Stillwell 2025-07-27 15:00:51 -05:00
parent 2e172815b9
commit 3f7c8dd239
1 changed files with 12 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
pages/collections.js
View file

@ -253,6 +253,10 @@ export default function Collections() {
const CollectionThumbnail = ({ collection }) => {
const { thumbnails = [], image } = collection;
console.log('🔍 CollectionThumbnail - collection:', collection.name);
console.log('🔍 CollectionThumbnail - thumbnails:', thumbnails);
console.log('🔍 CollectionThumbnail - image:', image);
// If there's a custom image, show it
if (image) {
return (
@ -268,6 +272,7 @@ export default function Collections() {
// If no cards, show crying emoji
if (!thumbnails || thumbnails.length === 0) {
console.log('🔍 CollectionThumbnail - showing crying emoji (no thumbnails)');
return (
<div className="w-full h-48 rounded-xl mb-4 flex items-center justify-center" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
<div className="text-center">
@ -281,6 +286,9 @@ export default function Collections() {
const mainCard = thumbnails[0];
const gridCards = thumbnails.slice(1, 5); // Get up to 4 cards for the 2x2 grid
console.log('🔍 CollectionThumbnail - mainCard:', mainCard);
console.log('🔍 CollectionThumbnail - gridCards:', gridCards);
return (
<div className="w-full h-48 rounded-xl overflow-hidden mb-4 p-3 flex gap-2" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
{/* Main card (larger, left side) */}
@ -291,6 +299,8 @@ export default function Collections() {
src={mainCard.image_url || mainCard.stock_image_url}
alt={mainCard.name}
className="w-full h-full object-cover"
onError={(e) => console.log('🔍 Image load error:', e.target.src)}
onLoad={() => console.log('🔍 Image loaded successfully:', mainCard.image_url || mainCard.stock_image_url)}
/>
</div>
) : (
@ -311,6 +321,8 @@ export default function Collections() {
src={card.image_url || card.stock_image_url}
alt={card.name}
className="w-full h-full object-cover"
onError={(e) => console.log('🔍 Grid image load error:', e.target.src)}
onLoad={() => console.log('🔍 Grid image loaded successfully:', card.image_url || card.stock_image_url)}
/>
</div>
) : (