From e73dcf14805dabc1b1182108f8a7349e8e96d89a Mon Sep 17 00:00:00 2001 From: Vladimir Haltakov Date: Thu, 25 Jun 2026 15:49:58 +0200 Subject: [PATCH 1/2] support media srcset for lightbox --- common/src/gallery/schemas.ts | 2 ++ common/src/theme/resolver.ts | 1 + common/src/theme/types.ts | 1 + docs/configuration.md | 14 ++++++++ .../gallery-section/GallerySectionItem.astro | 1 + gallery/tests/lightbox-srcset.test.ts | 35 +++++++++++++++++++ .../gallery-section/GallerySectionItem.astro | 1 + .../gallery-section/GallerySectionItem.astro | 1 + 8 files changed, 56 insertions(+) create mode 100644 gallery/tests/lightbox-srcset.test.ts diff --git a/common/src/gallery/schemas.ts b/common/src/gallery/schemas.ts index e4b13a3..c19dfe3 100644 --- a/common/src/gallery/schemas.ts +++ b/common/src/gallery/schemas.ts @@ -19,6 +19,7 @@ export const MediaFileSchema = z.looseObject({ width: z.number(), height: z.number(), thumbnail: ThumbnailSchema.optional(), + srcset: z.string().optional(), lastMediaTimestamp: z.string().optional(), }); @@ -33,6 +34,7 @@ export const MediaFileDeprecatedSchema = z.looseObject({ width: z.number(), height: z.number(), thumbnail: ThumbnailSchema.optional(), + srcset: z.string().optional(), lastMediaTimestamp: z.string().optional(), }); diff --git a/common/src/theme/resolver.ts b/common/src/theme/resolver.ts index 080bca2..f53debf 100644 --- a/common/src/theme/resolver.ts +++ b/common/src/theme/resolver.ts @@ -38,6 +38,7 @@ function resolveImage(image: MediaFile, mediaBaseUrl?: string, thumbsBaseUrl?: s imagePath, thumbnailPath, thumbnailSrcSet, + srcset: image.srcset, thumbnailWidth: image.thumbnail?.width, thumbnailHeight: image.thumbnail?.height, blurHash: image.thumbnail?.blurHash, diff --git a/common/src/theme/types.ts b/common/src/theme/types.ts index 150fad2..bc2e157 100644 --- a/common/src/theme/types.ts +++ b/common/src/theme/types.ts @@ -30,6 +30,7 @@ export interface ResolvedImage { imagePath: string; thumbnailPath: string; thumbnailSrcSet?: string; + srcset?: string; thumbnailWidth?: number; thumbnailHeight?: number; blurHash?: string; diff --git a/docs/configuration.md b/docs/configuration.md index 7381836..86d965a 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -82,6 +82,7 @@ Each item in the `images` array of a section represents a media file (image or v - `url` - A custom URL for the media file. If provided, this URL will be used directly as the source, regardless of the `mediaBaseUrl` setting or base path configuration. This is useful when you want to host specific images on different CDNs or use external URLs. - `alt` - A caption/description for the media (supports Markdown formatting) - `thumbnail` - Thumbnail metadata object with `path`, `pathRetina`, `width`, `height`, optional `blurHash`, and optional `baseUrl` +- `srcset` - Responsive full-size image candidates used by themes for the lightbox, formatted like a standard image `srcset` value - `lastMediaTimestamp` - Timestamp metadata (automatically generated) ### URL resolution @@ -115,6 +116,19 @@ If `mediaBaseUrl` is set to `"https://cdn.example.com/images"`, the final URL wi The final URL will always be `"https://special-cdn.example.com/custom-path/photo-001.jpg"`, regardless of the `mediaBaseUrl` setting. +**Example with responsive full-size candidates:** + +```json +{ + "type": "image", + "filename": "photo-001.jpg", + "url": "https://cdn.example.com/images/photo-001.jpg", + "width": 4000, + "height": 3000, + "srcset": "https://cdn.example.com/images/photo-001-1280.jpg 1280w, https://cdn.example.com/images/photo-001-1920.jpg 1920w" +} +``` + ### Thumbnail URL resolution By default, thumbnail URLs are constructed by combining the `thumbsBaseUrl` (if set at the gallery level) with the thumbnail `path` or `pathRetina`. However, you can override this for individual thumbnails by setting a `baseUrl` property directly on the thumbnail object. diff --git a/gallery/src/modules/create-theme/templates/base/src/components/gallery-section/GallerySectionItem.astro b/gallery/src/modules/create-theme/templates/base/src/components/gallery-section/GallerySectionItem.astro index b327810..1bacd0b 100644 --- a/gallery/src/modules/create-theme/templates/base/src/components/gallery-section/GallerySectionItem.astro +++ b/gallery/src/modules/create-theme/templates/base/src/components/gallery-section/GallerySectionItem.astro @@ -18,6 +18,7 @@ const captionHtml = parsedCaption ? `
{ + test('validates and resolves media srcset data', async () => { + const srcset = 'https://cdn.example/photo-1280.avif 1280w, https://cdn.example/photo-1920.avif 1920w'; + const galleryData = GalleryDataSchema.parse({ + title: 'Gallery', + description: '', + headerImage: 'hero.jpg', + metadata: {}, + subGalleries: { + title: '', + galleries: [], + }, + sections: [ + { + images: [ + { + type: 'image', + filename: 'photo.jpg', + width: 4000, + height: 3000, + srcset, + }, + ], + }, + ], + }); + + const resolved = await resolveGalleryData(galleryData); + + expect(resolved.sections[0].images[0].srcset).toBe(srcset); + }); +}); diff --git a/themes/masonry/src/components/gallery-section/GallerySectionItem.astro b/themes/masonry/src/components/gallery-section/GallerySectionItem.astro index b327810..1bacd0b 100644 --- a/themes/masonry/src/components/gallery-section/GallerySectionItem.astro +++ b/themes/masonry/src/components/gallery-section/GallerySectionItem.astro @@ -18,6 +18,7 @@ const captionHtml = parsedCaption ? `
Date: Thu, 25 Jun 2026 15:59:10 +0200 Subject: [PATCH 2/2] add changeset for media srcset --- .changeset/media-srcset-lightbox.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/media-srcset-lightbox.md diff --git a/.changeset/media-srcset-lightbox.md b/.changeset/media-srcset-lightbox.md new file mode 100644 index 0000000..96c6306 --- /dev/null +++ b/.changeset/media-srcset-lightbox.md @@ -0,0 +1,7 @@ +--- +"@simple-photo-gallery/common": minor +"@simple-photo-gallery/theme-modern": minor +"simple-photo-gallery": minor +--- + +Add media-level `srcset` support for responsive lightbox images.