andras/photos
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove captions

Browse source
This commit is contained in:
Andras Schmelczer 2026-06-02 08:51:39 +01:00
parent 4777985f40
commit 2ebe9ca46c
5 changed files with 57 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

3
scripts/generate-assets.mjs
View file

@ -107,7 +107,6 @@ const renderThumbnail = (photo, isCurrent) => {
const dataAttributes = [ const dataAttributes = [
`data-photo-id="${photo.id}"`, `data-photo-id="${photo.id}"`,
`data-order="${photo.order}"`, `data-order="${photo.order}"`,
`data-caption="${escapeHtml(photo.caption)}"`,
`data-frame-src="${photo.fallback.src}"`, `data-frame-src="${photo.fallback.src}"`,
`data-frame-sizes="${escapeHtml(frameSizes(photo))}"`, `data-frame-sizes="${escapeHtml(frameSizes(photo))}"`,
].join(' '); ].join(' ');
@ -123,7 +122,6 @@ const renderFrame = (photo) => `<figure class="frame-figure">
frameSizes(photo), frameSizes(photo),
'id="frame-image" decoding="async" fetchpriority="high"' 'id="frame-image" decoding="async" fetchpriority="high"'
)} )}
<figcaption id="frame-caption">${escapeHtml(photo.caption)}</figcaption>
</figure>`; </figure>`;
const validateCatalog = (catalog) => { const validateCatalog = (catalog) => {
@ -263,7 +261,6 @@ const generate = async () => {
file: entry.file, file: entry.file,
order: entry.order, order: entry.order,
alt: entry.alt, alt: entry.alt,
caption: entry.caption,
orientation: metadata.width >= metadata.height ? 'landscape' : 'portrait', orientation: metadata.width >= metadata.height ? 'landscape' : 'portrait',
width: metadata.width, width: metadata.width,
height: metadata.height, height: metadata.height,

9
src/index.scss
View file

@ -152,7 +152,6 @@ img {
margin: 0; margin: 0;
display: grid; display: grid;
justify-items: center; justify-items: center;
gap: var(--space-s);
} }
.frame-figure picture { .frame-figure picture {
@ -171,14 +170,6 @@ img {
box-shadow: 0 0 0 1px rgb(32 33 36 / 16%); box-shadow: 0 0 0 1px rgb(32 33 36 / 16%);
} }
.frame-figure figcaption {
max-inline-size: min(42rem, 100%);
color: var(--color-ink);
font-size: 0.95rem;
line-height: 1.35;
text-align: center;
}
.slideshow-toggle { .slideshow-toggle {
display: none; display: none;
position: absolute; position: absolute;

162
src/photo-catalog.json
View file

@ -1,272 +1,218 @@
[ [
{ {
"file": "_DSC1190-Edit.jpg", "file": "_DSC1190-Edit.jpg",
"alt": "Portrait of a man in a burgundy sleeveless shirt standing with folded arms above a city view.", "alt": "Portrait of a man in a burgundy sleeveless shirt standing with folded arms above a city view."
"caption": "Portrait above the city"
}, },
{ {
"file": "_DSC1484.jpg", "file": "_DSC1484.jpg",
"alt": "A man smiling while drying a plate in a kitchen.", "alt": "A man smiling while drying a plate in a kitchen."
"caption": "Kitchen portrait"
}, },
{ {
"file": "_DSC1834.jpg", "file": "_DSC1834.jpg",
"alt": "A person sitting near dark rocks while waves crash into a sea cave.", "alt": "A person sitting near dark rocks while waves crash into a sea cave."
"caption": "Watching the surf"
}, },
{ {
"file": "_DSC2313.jpg", "file": "_DSC2313.jpg",
"alt": "Portrait of a man in a teal coat standing among autumn leaves.", "alt": "Portrait of a man in a teal coat standing among autumn leaves."
"caption": "Autumn portrait"
}, },
{ {
"file": "_DSC2362.jpg", "file": "_DSC2362.jpg",
"alt": "Portrait of a man with glasses leaning on a railing in a park.", "alt": "Portrait of a man with glasses leaning on a railing in a park."
"caption": "Park portrait"
}, },
{ {
"file": "_DSC2674.jpg", "file": "_DSC2674.jpg",
"alt": "A person in a hooded jacket walking down a narrow city street.", "alt": "A person in a hooded jacket walking down a narrow city street."
"caption": "City walk"
}, },
{ {
"file": "_DSC8718-Edit.jpg", "file": "_DSC8718-Edit.jpg",
"alt": "Defocused city lights glowing across a dark night skyline.", "alt": "Defocused city lights glowing across a dark night skyline."
"caption": "Night lights"
}, },
{ {
"file": "adam.jpg", "file": "adam.jpg",
"alt": "A man standing against a dark background in a black graphic T-shirt.", "alt": "A man standing against a dark background in a black graphic T-shirt."
"caption": "Adam"
}, },
{ {
"file": "dorka-1.jpg", "file": "dorka-1.jpg",
"alt": "A woman in a white knit hat sitting outdoors on an autumn day.", "alt": "A woman in a white knit hat sitting outdoors on an autumn day."
"caption": "Dorka"
}, },
{ {
"file": "kezdetazarovonalbol.jpg", "file": "kezdetazarovonalbol.jpg",
"alt": "A small plant stem silhouetted against warm yellow and orange light.", "alt": "A small plant stem silhouetted against warm yellow and orange light."
"caption": "Small stem in warm light"
}, },
{ {
"file": "nap-2.jpg", "file": "nap-2.jpg",
"alt": "The sun setting behind a mountain ridge over a field.", "alt": "The sun setting behind a mountain ridge over a field."
"caption": "Sunset field"
}, },
{ {
"file": "nyomtatas-8.jpg", "file": "nyomtatas-8.jpg",
"alt": "Close-up of ice crystals and frozen texture in blue light.", "alt": "Close-up of ice crystals and frozen texture in blue light."
"caption": "Ice crystals"
}, },
{ {
"file": "nyomtatas-10.jpg", "file": "nyomtatas-10.jpg",
"alt": "Warm abstract light passing through dried plants.", "alt": "Warm abstract light passing through dried plants."
"caption": "Dried plants in light"
}, },
{ {
"file": "web-1-2.jpg", "file": "web-1-2.jpg",
"alt": "A city panorama seen through a coin-operated viewing telescope.", "alt": "A city panorama seen through a coin-operated viewing telescope."
"caption": "City lookout"
}, },
{ {
"file": "web-1.jpg", "file": "web-1.jpg",
"alt": "Black and white stage scene with dancers performing before an audience.", "alt": "Black and white stage scene with dancers performing before an audience."
"caption": "Stage performance"
}, },
{ {
"file": "web-2-2.jpg", "file": "web-2-2.jpg",
"alt": "Two zebras walking across a black and white landscape.", "alt": "Two zebras walking across a black and white landscape."
"caption": "Zebras"
}, },
{ {
"file": "web-2.jpg", "file": "web-2.jpg",
"alt": "Coastal town and hillside beside a blue sea under a bright sky.", "alt": "Coastal town and hillside beside a blue sea under a bright sky."
"caption": "Coastal town"
}, },
{ {
"file": "web-3-2.jpg", "file": "web-3-2.jpg",
"alt": "A woman walking away on a beach while carrying a bag.", "alt": "A woman walking away on a beach while carrying a bag."
"caption": "Beach walk"
}, },
{ {
"file": "web-3.jpg", "file": "web-3.jpg",
"alt": "Black and white lake scene with a small boat under a bright sun.", "alt": "Black and white lake scene with a small boat under a bright sun."
"caption": "Boat on the lake"
}, },
{ {
"file": "web-4-2.jpg", "file": "web-4-2.jpg",
"alt": "Black and white seascape with waves rolling toward weathered posts.", "alt": "Black and white seascape with waves rolling toward weathered posts."
"caption": "Sea posts"
}, },
{ {
"file": "web-5.jpg", "file": "web-5.jpg",
"alt": "Candles glowing in the foreground with soft golden lights behind them.", "alt": "Candles glowing in the foreground with soft golden lights behind them."
"caption": "Candles"
}, },
{ {
"file": "web-6.jpg", "file": "web-6.jpg",
"alt": "Aerial view over a city and river beneath broken clouds.", "alt": "Aerial view over a city and river beneath broken clouds."
"caption": "City and river"
}, },
{ {
"file": "web-7.jpg", "file": "web-7.jpg",
"alt": "The Eiffel Tower lit at night against a dark sky.", "alt": "The Eiffel Tower lit at night against a dark sky."
"caption": "Eiffel Tower at night"
}, },
{ {
"file": "web-8.jpg", "file": "web-8.jpg",
"alt": "Bare winter trees fading into a pale snowy background.", "alt": "Bare winter trees fading into a pale snowy background."
"caption": "Winter trees"
}, },
{ {
"file": "web-10.jpg", "file": "web-10.jpg",
"alt": "A person in a dark jacket sitting on a bench and looking over water.", "alt": "A person in a dark jacket sitting on a bench and looking over water."
"caption": "Looking across the water"
}, },
{ {
"file": "web-11.jpg", "file": "web-11.jpg",
"alt": "Black and white close-up portrait of a dog looking into the camera.", "alt": "Black and white close-up portrait of a dog looking into the camera."
"caption": "Dog portrait"
}, },
{ {
"file": "web-12.jpg", "file": "web-12.jpg",
"alt": "Two people sitting by water under a vivid orange sunset.", "alt": "Two people sitting by water under a vivid orange sunset."
"caption": "Sunset by the water"
}, },
{ {
"file": "web-13.jpg", "file": "web-13.jpg",
"alt": "Portrait of a woman standing beside a tree in green summer light.", "alt": "Portrait of a woman standing beside a tree in green summer light."
"caption": "Tree portrait"
}, },
{ {
"file": "web-14.jpg", "file": "web-14.jpg",
"alt": "Golden sunlight reflecting on rippled water.", "alt": "Golden sunlight reflecting on rippled water."
"caption": "Sunlit ripples"
}, },
{ {
"file": "web-17.jpg", "file": "web-17.jpg",
"alt": "A small green plant shoot backlit by bright sunlight.", "alt": "A small green plant shoot backlit by bright sunlight."
"caption": "Backlit sprout"
}, },
{ {
"file": "web-18.jpg", "file": "web-18.jpg",
"alt": "Birds flying around pale stone sculpture details.", "alt": "Birds flying around pale stone sculpture details."
"caption": "Birds and stone"
}, },
{ {
"file": "web-19.jpg", "file": "web-19.jpg",
"alt": "A bridge at night with blue lights and long yellow light trails.", "alt": "A bridge at night with blue lights and long yellow light trails."
"caption": "Bridge light trails"
}, },
{ {
"file": "web-20.jpg", "file": "web-20.jpg",
"alt": "A seated man in a dark coat photographed at night with city lights behind him.", "alt": "A seated man in a dark coat photographed at night with city lights behind him."
"caption": "Night portrait"
}, },
{ {
"file": "web-22.jpg", "file": "web-22.jpg",
"alt": "Silhouettes seen through large windows during a pink and blue sunset.", "alt": "Silhouettes seen through large windows during a pink and blue sunset."
"caption": "Window silhouettes"
}, },
{ {
"file": "web-23.jpg", "file": "web-23.jpg",
"alt": "Tall clock tower and stone architecture with a bird flying nearby.", "alt": "Tall clock tower and stone architecture with a bird flying nearby."
"caption": "Clock tower"
}, },
{ {
"file": "web-24.jpg", "file": "web-24.jpg",
"alt": "Portrait of a woman at night with bridge lights behind her.", "alt": "Portrait of a woman at night with bridge lights behind her."
"caption": "Bridge portrait"
}, },
{ {
"file": "web-25.jpg", "file": "web-25.jpg",
"alt": "Portrait of a smiling man at night with blurred city lights behind him.", "alt": "Portrait of a smiling man at night with blurred city lights behind him."
"caption": "Smiling night portrait"
}, },
{ {
"file": "web-26.jpg", "file": "web-26.jpg",
"alt": "Tall bridge lamps receding into a pale sky.", "alt": "Tall bridge lamps receding into a pale sky."
"caption": "Bridge lamps"
}, },
{ {
"file": "web-42.jpg", "file": "web-42.jpg",
"alt": "Warm sunset over a grassy field with low hills in the distance.", "alt": "Warm sunset over a grassy field with low hills in the distance."
"caption": "Sunset hills"
}, },
{ {
"file": "_DSC2636-sterling.jpg", "file": "_DSC2636-sterling.jpg",
"alt": "A leaf-strewn forest path winding between autumn trees into misty green woodland under soft grey light.", "alt": "A leaf-strewn forest path winding between autumn trees into misty green woodland under soft grey light."
"caption": "Autumn forest path"
}, },
{ {
"file": "_DSC2675-sterling.jpg", "file": "_DSC2675-sterling.jpg",
"alt": "Tall conifer trees rising into pale morning mist beneath a soft grey sky.", "alt": "Tall conifer trees rising into pale morning mist beneath a soft grey sky."
"caption": "Misty conifers"
}, },
{ {
"file": "_DSC2701-sterling.jpg", "file": "_DSC2701-sterling.jpg",
"alt": "A winding earthen path through a misty evergreen forest with bare branches holding a few orange autumn leaves.", "alt": "A winding earthen path through a misty evergreen forest with bare branches holding a few orange autumn leaves."
"caption": "Misty forest path"
}, },
{ {
"file": "20230703_211416_F9DA2848.jpg", "file": "20230703_211416_F9DA2848.jpg",
"alt": "Black-and-white view of a bicycle's handlebars before a city skyline of tall office towers.", "alt": "Black-and-white view of a bicycle's handlebars before a city skyline of tall office towers."
"caption": "Bicycle and skyline"
}, },
{ {
"file": "20230703_211419_C25C2367.jpg", "file": "20230703_211419_C25C2367.jpg",
"alt": "Sunlit dirt path winding through silhouetted pine trees in soft black-and-white woodland light.", "alt": "Sunlit dirt path winding through silhouetted pine trees in soft black-and-white woodland light."
"caption": "Woodland path"
}, },
{ {
"file": "20230703_211420_C19E401F.jpg", "file": "20230703_211420_C19E401F.jpg",
"alt": "Silhouetted pine trees in a misty forest with soft light filtering through their leaning trunks.", "alt": "Silhouetted pine trees in a misty forest with soft light filtering through their leaning trunks."
"caption": "Pine silhouettes"
}, },
{ {
"file": "IMG_3907.JPG", "file": "IMG_3907.JPG",
"alt": "White chalk cliffs topped with green grass descend to a pebble beach beside a pale grey sea.", "alt": "White chalk cliffs topped with green grass descend to a pebble beach beside a pale grey sea."
"caption": "White chalk cliffs"
}, },
{ {
"file": "IMG_5297.JPG", "file": "IMG_5297.JPG",
"alt": "The Berlin TV Tower seen from below, its sphere catching a sunburst against blue sky and clouds.", "alt": "The Berlin TV Tower seen from below, its sphere catching a sunburst against blue sky and clouds."
"caption": "Tower sunburst"
}, },
{ {
"file": "IMG_5299.JPG", "file": "IMG_5299.JPG",
"alt": "A bouquet of pink and cream roses in paper, with a dark cat ornament glowing behind in warm light.", "alt": "A bouquet of pink and cream roses in paper, with a dark cat ornament glowing behind in warm light."
"caption": "Roses and cat"
}, },
{ {
"file": "colour-20.jpg", "file": "colour-20.jpg",
"alt": "Empty chain swings in a fenced playground, lit by warm low sun with bright lens flare.", "alt": "Empty chain swings in a fenced playground, lit by warm low sun with bright lens flare."
"caption": "Empty swings"
}, },
{ {
"file": "colour-7.jpg", "file": "colour-7.jpg",
"alt": "Metal fire-escape stairs zigzag across a brick building beneath bare branches and a pale dusk sky.", "alt": "Metal fire-escape stairs zigzag across a brick building beneath bare branches and a pale dusk sky."
"caption": "Fire escape"
}, },
{ {
"file": "colour-8.jpg", "file": "colour-8.jpg",
"alt": "The BT Tower fades into mist above a pale building, framed by bare branches under grey sky.", "alt": "The BT Tower fades into mist above a pale building, framed by bare branches under grey sky."
"caption": "Tower in mist"
}, },
{ {
"file": "colour-25.jpg", "file": "colour-25.jpg",
"alt": "A red road-closed sign and yellow barriers before a bright orange perforated building facade under grey sky.", "alt": "A red road-closed sign and yellow barriers before a bright orange perforated building facade under grey sky."
"caption": "Road closed"
}, },
{ {
"file": "colour-40.jpg", "file": "colour-40.jpg",
"alt": "Aerial view over a hazy city with railway lines stretching toward the horizon beside a river.", "alt": "Aerial view over a hazy city with railway lines stretching toward the horizon beside a river."
"caption": "Railways from above"
}, },
{ {
"file": "colour-41.jpg", "file": "colour-41.jpg",
"alt": "Aerial view of a hazy city skyline at sunset, with golden light rays piercing through dark clouds.", "alt": "Aerial view of a hazy city skyline at sunset, with golden light rays piercing through dark clouds."
"caption": "Sunset rays"
} }
] ]

2
src/photos.test.ts
View file

@ -7,7 +7,6 @@ const thumbnail = (id: string, order: number, alt: string): string => `
href="static/photos/${id}-2400.jpg" href="static/photos/${id}-2400.jpg"
data-photo-id="${id}" data-photo-id="${id}"
data-order="${order}" data-order="${order}"
data-caption="${alt}"
data-frame-src="static/photos/${id}-2400.jpg" data-frame-src="static/photos/${id}-2400.jpg"
data-frame-sizes="100vw" data-frame-sizes="100vw"
> >
@ -89,7 +88,6 @@ describe('PhotoGallery', () => {
expect(image?.alt).toBe('Second photo'); expect(image?.alt).toBe('Second photo');
expect(image?.id).toBe('frame-image'); expect(image?.id).toBe('frame-image');
expect(image?.getAttribute('src')).toBe('static/photos/two-2400.jpg'); expect(image?.getAttribute('src')).toBe('static/photos/two-2400.jpg');
expect(frame.querySelector('figcaption')?.textContent).toBe('Second photo');
expect( expect(
gallery gallery
.querySelector('[data-photo-id="two"]') .querySelector('[data-photo-id="two"]')

10
src/photos.ts
View file

@ -37,8 +37,8 @@ export const wrapIndex = (value: number, count: number): number => {
// Build the frame figure by cloning the thumbnail's own <picture>. The variant // Build the frame figure by cloning the thumbnail's own <picture>. The variant
// files are identical to the frame's, so the only differences are the larger // files are identical to the frame's, so the only differences are the larger
// fallback src, the frame-appropriate `sizes`, and the caption — all carried on // fallback src and the frame-appropriate `sizes` — both carried on the
// the thumbnail's data-* attributes by the asset generator. // thumbnail's data-* attributes by the asset generator.
const createFrameFigure = (thumbnail: HTMLAnchorElement): HTMLElement => { const createFrameFigure = (thumbnail: HTMLAnchorElement): HTMLElement => {
const figure = document.createElement('figure'); const figure = document.createElement('figure');
figure.className = 'frame-figure'; figure.className = 'frame-figure';
@ -70,11 +70,7 @@ const createFrameFigure = (thumbnail: HTMLAnchorElement): HTMLElement => {
image.removeAttribute('loading'); image.removeAttribute('loading');
image.decoding = 'async'; image.decoding = 'async';
const caption = document.createElement('figcaption'); figure.append(picture);
caption.id = 'frame-caption';
caption.textContent = thumbnail.dataset.caption ?? '';
figure.append(picture, caption);
return figure; return figure;
}; };