Same library, nothing in common with the link demo: the card is a full-bleed image with a metadata strip, the
zones are albums, and the model watches the camera, the lens and the place instead of a domain and some tags.
renderCard is where all of that lives — the deck never learns what a photograph is.
new Deck(el, {
items: photos,
zones: albums,
meta: (p) => ({ author: p.author, camera: p.exif.camera, place: p.exif.place, tag: [...] }),
renderCard: (photo, el) => {
el.innerHTML = `
<img src="${photo.src}" alt="" />
<footer>
<b>${photo.author}</b>
<span>${photo.exif.camera} · ${photo.exif.lens}</span>
</footer>`;
},
onSort: (photo, album) => api.move(photo.id, album.id),
});The photographs come from Lorem Picsum, which serves Unsplash images — the author and the dimensions are real. The EXIF is sample data, generated from the photo id so the demo stays stable. Putting invented shutter speeds on someone's photograph and calling it EXIF would be a lie, even in a demo.