Add ImageGallery shortcode with Lightbox2 support by Copilot · Pull Request #11 · AlexHedley/statiq.plugins

Copilot · 2026-04-16T21:23:06Z

Implements a Statiq IShortcode that renders an inline image gallery using Lightbox2, allowing images to be cycled through in a fullscreen overlay.

New components

ImageGalleryShortcode (SyncShortcode) — parses newline-separated image entries from shortcode content (src, src|title, or src|title|alt), HTML-encodes all attribute values, strips Markdown-injected HTML tags from content lines, and emits Lightbox2-compatible markup with full configuration option support
ImageGalleryConfigurator (IConfigurator<Bootstrapper>) — registers the shortcode as ImageGallery, following the existing ReadingTimeConfigurator pattern

Usage

<?# ImageGallery Name=my-gallery WrapAround=true AlbumLabel="Photo %1 of %2" ?>
/images/photo1.jpg|Caption for photo 1
/images/photo2.jpg|Caption for photo 2|Accessible alt text for photo 2
/images/photo3.jpg
<?#/ ImageGallery ?>

Parameters:

Parameter	Default	Description
`Name`	`gallery`	Lightbox2 gallery group name — images sharing the same name can be cycled through.
`Class`	(none)	Additional CSS class(es) on the wrapping `<div>`.
`AlbumLabel`	`"Image %1 of %2"`	Text shown below the image count (`%1` = current, `%2` = total).
`WrapAround`	`false`	Wrap around when navigating past the first/last image.
`DisableScrolling`	`false`	Prevent page scrolling while the lightbox is open.
`FadeDuration`	`300`	Duration (ms) of the fade-in/fade-out animation.
`ImageFadeDuration`	`300`	Duration (ms) of the image fade animation.
`ResizeDuration`	`700`	Duration (ms) of the resize animation.
`FitImagesInViewport`	`true`	Resize images larger than the viewport.
`ShowImageNumberLabel`	`true`	Show the `AlbumLabel` text in the lightbox.
`MaxWidth`	(none)	Maximum width (px) of the lightbox image.
`MaxHeight`	(none)	Maximum height (px) of the lightbox image.

Output:

<div class="image-gallery">
  <a href="/images/photo1.jpg" data-lightbox="my-gallery" data-title="Caption for photo 1" data-alt="Caption for photo 1">
    <img src="/images/photo1.jpg" alt="Caption for photo 1" />
  </a>
  ...
</div>
<script>
lightbox.option({
  'wrapAround': true,
  'albumLabel': "Photo %1 of %2"
});
</script>

When any Lightbox2 JS options are provided, a <script>lightbox.option({...});</script> block is emitted after the gallery markup. String values are JS-escaped to prevent injection.

Requires Lightbox2 CSS/JS in the layout — CDN links and SRI hash generation guidance included in the README.

Sample project

The sample/ site project is wired up to demonstrate the plugin end-to-end:

sample/Program.cs: registers ImageGalleryConfigurator via AddConfigurator<Bootstrapper>(new ImageGalleryConfigurator())
sample/input/posts/_partials/_head.cshtml: Lightbox2 CSS <link> tag, included via @Html.Partial("_partials/_head") in the layout <head>
sample/input/posts/_partials/_scripts.cshtml: Lightbox2 JS <script> tag using the jQuery-bundled build (lightbox-plus-jquery.min.js), included via @Html.Partial("_partials/_scripts") before </body>
sample/input/posts/_layout.cshtml: references the _head and _scripts partials instead of inline CDN tags
sample/input/posts/1.md: uses the ImageGallery shortcode with WrapAround=true to demonstrate the plugin in action

Running dotnet run in the sample directory generates correct Lightbox2 markup in output/posts/1.html.

Agent-Logs-Url: https://github.com/AlexHedley/statiq.plugins/sessions/0a97ea5e-9c2b-4e78-bd4b-7898c0595a54 Co-authored-by: AlexHedley <1573469+AlexHedley@users.noreply.github.com>

… to README CDN links Agent-Logs-Url: https://github.com/AlexHedley/statiq.plugins/sessions/0a97ea5e-9c2b-4e78-bd4b-7898c0595a54 Co-authored-by: AlexHedley <1573469+AlexHedley@users.noreply.github.com>

…ADME Agent-Logs-Url: https://github.com/AlexHedley/statiq.plugins/sessions/0a97ea5e-9c2b-4e78-bd4b-7898c0595a54 Co-authored-by: AlexHedley <1573469+AlexHedley@users.noreply.github.com>

AlexHedley · 2026-04-16T21:53:38Z

@copilot add lightbox2 options

Agent-Logs-Url: https://github.com/AlexHedley/statiq.plugins/sessions/989524cf-c5c6-4722-ba96-180f23588df0 Co-authored-by: AlexHedley <1573469+AlexHedley@users.noreply.github.com>

Copilot · 2026-04-16T21:58:36Z

@copilot add lightbox2 options

Done in commit a37c7e8 (fixed double-encoding bug in 5b39c12).

The shortcode now supports all Lightbox2 options:

New gallery-level parameters (emits a <script>lightbox.option({...})</script> block when any are set):

Parameter	Type	Lightbox2 option
`AlbumLabel`	string	`albumLabel`
`WrapAround`	bool	`wrapAround`
`DisableScrolling`	bool	`disableScrolling`
`FadeDuration`	int	`fadeDuration`
`ImageFadeDuration`	int	`imageFadeDuration`
`ResizeDuration`	int	`resizeDuration`
`FitImagesInViewport`	bool	`fitImagesInViewport`
`ShowImageNumberLabel`	bool	`showImageNumberLabel`
`MaxWidth`	int	`maxWidth`
`MaxHeight`	int	`maxHeight`

Per-image data-alt is now supported via a third pipe-separated column (src|title|alt). If omitted, alt falls back to title.

Example:

<?# ImageGallery Name=my-gallery WrapAround=true AlbumLabel="Photo %1 of %2" ?>
/images/photo1.jpg|Caption 1
/images/photo2.jpg|Caption 2|Accessible alt text for photo 2
<?#/ ImageGallery ?>

AlexHedley · 2026-04-17T18:36:37Z

@copilot update the site project in the sample folder to use the gallery plugin and confirm the plugin is working

…JS to layout Agent-Logs-Url: https://github.com/AlexHedley/statiq.plugins/sessions/4a9074ae-b427-477b-bc40-7d96900d585a Co-authored-by: AlexHedley <1573469+AlexHedley@users.noreply.github.com>

Agent-Logs-Url: https://github.com/AlexHedley/statiq.plugins/sessions/4a9074ae-b427-477b-bc40-7d96900d585a Co-authored-by: AlexHedley <1573469+AlexHedley@users.noreply.github.com>

Copilot · 2026-04-17T18:45:05Z

@copilot update the site project in the sample folder to use the gallery plugin and confirm the plugin is working

Done in commit 6214604.

Changes made to the sample project:

sample/Program.cs: registered ImageGalleryConfigurator via AddConfigurator<Bootstrapper>(new ImageGalleryConfigurator())
sample/input/posts/_layout.cshtml: added Lightbox2 CSS (in <head>) and JS (before </body>) CDN links
src/Statiq.Plugins/ImageGallery/ImageGalleryShortcode.cs: added HTML tag stripping in ParseImages — Markdown pre-processes shortcode content and wraps lines in <p> tags, which was corrupting the src/title values

Running dotnet run in the sample directory now generates correct gallery markup in output/posts/1.html:

<div class="image-gallery">
  <a href="/posts/images/background.jpg" data-lightbox="my-gallery" data-title="Background" data-alt="Background">
    <img src="/posts/images/background.jpg" alt="Background" />
  </a>
</div>
<script>
lightbox.option({
  'wrapAround': true
});
</script>

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

api.cdnjs.com
- Triggering command: /usr/bin/curl curl -s REDACTED ref/netstandard1-v ref/�� ref/netstandard1.0/ja/System.Reflection.Extensions.xml ref/netstandard1.0/de/System.Reflection.Extensions.xml de/node/bin/git (dns block)
cdnjs.cloudflare.com
- Triggering command: /usr/bin/curl curl -s --max-time 10 REDACTED -o /tmp/lightbox.min.css tnet/tools/git hub.com/.extrahegit (dns block)
cdnjs.com
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

AlexHedley · 2026-04-17T18:55:28Z

@copilot does it need to be dist/js/lightbox-plus-jquery.min.js.map instead?

Also could you use _head and _scripts files to put these items in instead?

…query bundle Agent-Logs-Url: https://github.com/AlexHedley/statiq.plugins/sessions/4afb431c-f3ba-4cd8-8382-850a286eec7f Co-authored-by: AlexHedley <1573469+AlexHedley@users.noreply.github.com>

Copilot · 2026-04-17T18:58:45Z

@copilot does it need to be dist/js/lightbox-plus-jquery.min.js.map instead?

Also could you use _head and _scripts files to put these items in instead?

Done in commit a9a09b5.

Switched to lightbox-plus-jquery.min.js (bundles jQuery, so no separate jQuery dependency needed)
Created sample/input/posts/_partials/_head.cshtml for the Lightbox2 CSS link
Created sample/input/posts/_partials/_scripts.cshtml for the Lightbox2 JS script
Updated _layout.cshtml to use @Html.Partial("_partials/_head") and @Html.Partial("_partials/_scripts") instead of inline tags

AlexHedley · 2026-04-17T19:05:56Z

@copilot share some screenshots of the gallery in action from the sample site

Copilot · 2026-04-17T19:10:26Z

@copilot share some screenshots of the gallery in action from the sample site

Here are the screenshots from the sample site running the ImageGallery shortcode:

Gallery thumbnails (three images rendered side-by-side):

Lightbox2 overlay (clicking an image opens the full-screen lightbox, with the title "Mountain Landscape" and "Photo 1 of 3" counter from the AlbumLabel="Photo %1 of %2" option, plus prev/next navigation and close button):

The wrapAround: true option means navigating past the last image cycles back to the first.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

cdnjs.cloudflare.com
- Triggering command: /usr/bin/curl curl -sL REDACTED -o /home/REDACTED/work/statiq.plugins/statiq.plugins/sample/output/lib/lightbox2/lightbox.min.css (dns block)
- Triggering command: /usr/bin/curl curl -sL REDACTED -o /home/REDACTED/work/statiq.plugins/statiq.plugins/sample/output/lib/lightbox2/lightbox-plus-jquery.min.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Initial plan

bc7266f

Copilot AI assigned Copilot and AlexHedley Apr 16, 2026

Copilot started work on behalf of AlexHedley April 16, 2026 21:23 View session

Copilot AI linked an issue Apr 16, 2026 that may be closed by this pull request

Image Gallery #10

Open

Copilot AI and others added 3 commits April 16, 2026 21:28

Add ImageGallery shortcode with Lightbox2 support

9ff78f6

Agent-Logs-Url: https://github.com/AlexHedley/statiq.plugins/sessions/0a97ea5e-9c2b-4e78-bd4b-7898c0595a54 Co-authored-by: AlexHedley <1573469+AlexHedley@users.noreply.github.com>

Fix XSS vulnerability: HTML-encode gallery attributes; add SRI hashes…

e209042

… to README CDN links Agent-Logs-Url: https://github.com/AlexHedley/statiq.plugins/sessions/0a97ea5e-9c2b-4e78-bd4b-7898c0595a54 Co-authored-by: AlexHedley <1573469+AlexHedley@users.noreply.github.com>

Fix cross-platform line endings; remove unverified SRI hashes from RE…

781ff43

…ADME Agent-Logs-Url: https://github.com/AlexHedley/statiq.plugins/sessions/0a97ea5e-9c2b-4e78-bd4b-7898c0595a54 Co-authored-by: AlexHedley <1573469+AlexHedley@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add shortcode for inline image gallery~~ Add ImageGallery shortcode with Lightbox2 support Apr 16, 2026

Copilot finished work on behalf of AlexHedley April 16, 2026 21:34

Copilot AI requested a review from AlexHedley April 16, 2026 21:34

Copilot started work on behalf of AlexHedley April 16, 2026 21:53 View session

Copilot AI and others added 2 commits April 16, 2026 21:56

Add Lightbox2 options to ImageGalleryShortcode

a37c7e8

Agent-Logs-Url: https://github.com/AlexHedley/statiq.plugins/sessions/989524cf-c5c6-4722-ba96-180f23588df0 Co-authored-by: AlexHedley <1573469+AlexHedley@users.noreply.github.com>

Fix double-encoding of alt attribute when falling back to title

5b39c12

Agent-Logs-Url: https://github.com/AlexHedley/statiq.plugins/sessions/989524cf-c5c6-4722-ba96-180f23588df0 Co-authored-by: AlexHedley <1573469+AlexHedley@users.noreply.github.com>

Copilot finished work on behalf of AlexHedley April 16, 2026 21:59

Copilot started work on behalf of AlexHedley April 17, 2026 18:36 View session

Copilot AI and others added 2 commits April 17, 2026 18:42

Wire ImageGalleryConfigurator into sample project; add Lightbox2 CSS/…

6214604

…JS to layout Agent-Logs-Url: https://github.com/AlexHedley/statiq.plugins/sessions/4a9074ae-b427-477b-bc40-7d96900d585a Co-authored-by: AlexHedley <1573469+AlexHedley@users.noreply.github.com>

Add SRI reminder comments to Lightbox2 CDN links in sample layout

0b76679

Agent-Logs-Url: https://github.com/AlexHedley/statiq.plugins/sessions/4a9074ae-b427-477b-bc40-7d96900d585a Co-authored-by: AlexHedley <1573469+AlexHedley@users.noreply.github.com>

Copilot finished work on behalf of AlexHedley April 17, 2026 18:45

Copilot started work on behalf of AlexHedley April 17, 2026 18:55 View session

Move Lightbox2 CSS/JS to _head/_scripts partials; use lightbox-plus-j…

a9a09b5

…query bundle Agent-Logs-Url: https://github.com/AlexHedley/statiq.plugins/sessions/4afb431c-f3ba-4cd8-8382-850a286eec7f Co-authored-by: AlexHedley <1573469+AlexHedley@users.noreply.github.com>

Copilot finished work on behalf of AlexHedley April 17, 2026 18:59

Copilot started work on behalf of AlexHedley April 17, 2026 19:06 View session

Copilot finished work on behalf of AlexHedley April 17, 2026 19:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add ImageGallery shortcode with Lightbox2 support#11

Add ImageGallery shortcode with Lightbox2 support#11
Copilot wants to merge 9 commits intomainfrom
copilot/create-inline-image-gallery

Copilot AI commented Apr 16, 2026 •

edited

Loading

Uh oh!

AlexHedley commented Apr 16, 2026

Uh oh!

Copilot AI commented Apr 16, 2026

Uh oh!

AlexHedley commented Apr 17, 2026

Uh oh!

Copilot AI commented Apr 17, 2026 •

edited

Loading

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

AlexHedley commented Apr 17, 2026

Uh oh!

Copilot AI commented Apr 17, 2026

Uh oh!

AlexHedley commented Apr 17, 2026

Uh oh!

Copilot AI commented Apr 17, 2026 •

edited

Loading

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Copilot AI commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

New components

Usage

Sample project

Uh oh!

AlexHedley commented Apr 16, 2026

Uh oh!

Copilot AI commented Apr 16, 2026

Uh oh!

AlexHedley commented Apr 17, 2026

Uh oh!

Copilot AI commented Apr 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

AlexHedley commented Apr 17, 2026

Uh oh!

Copilot AI commented Apr 17, 2026

Uh oh!

AlexHedley commented Apr 17, 2026

Uh oh!

Copilot AI commented Apr 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Apr 16, 2026 •

edited

Loading

Copilot AI commented Apr 17, 2026 •

edited

Loading

Copilot AI commented Apr 17, 2026 •

edited

Loading