[codex] support media srcset for lightbox

.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.

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(),
 });
 

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,

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;

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.

gallery/src/modules/create-theme/templates/base/src/components/gallery-section/GallerySectionItem.astro

@@ -18,6 +18,7 @@ const captionHtml = parsedCaption ? `<div class="image-caption markdown-content"
   class="gallery-section__item"
   href={image.imagePath}
   data-pswp-src={image.imagePath}
+  data-pswp-srcset={image.srcset}
   data-pswp-width={image.width}
   data-pswp-height={image.height}
   data-pswp-type={image.type}

gallery/tests/lightbox-srcset.test.ts

@@ -0,0 +1,35 @@
+import { GalleryDataSchema } from '../../common/src/gallery';
+import { resolveGalleryData } from '../../common/src/theme';
+
+describe('lightbox responsive images', () => {
+  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);
+  });
+});

themes/masonry/src/components/gallery-section/GallerySectionItem.astro

@@ -18,6 +18,7 @@ const captionHtml = parsedCaption ? `<div class="image-caption markdown-content"
   class="gallery-section__item"
   href={image.imagePath}
   data-pswp-src={image.imagePath}
+  data-pswp-srcset={image.srcset}
   data-pswp-width={image.width}
   data-pswp-height={image.height}
   data-pswp-type={image.type}

themes/modern/src/features/themes/base-theme/components/gallery-section/GallerySectionItem.astro

@@ -18,6 +18,7 @@ const captionHtml = parsedCaption ? `<div class="image-caption markdown-content"
   class="gallery-section__item"
   href={image.imagePath}
   data-pswp-src={image.imagePath}
+  data-pswp-srcset={image.srcset}
   data-pswp-width={image.width}
   data-pswp-height={image.height}
   data-pswp-type={image.type}