From d2efb9a160ee5d3eda915ac9c8b9b2b5c65dc8cb Mon Sep 17 00:00:00 2001
From: Kuba Orlik <kontakt@kuba-orlik.name>
Date: Thu, 1 Jan 2026 21:28:25 +0100
Subject: [PATCH] Glightbox: use big version of the image if available

---
 .../horizontal-gallery.jdd.tsx                 | 18 +++++++++---------
 src/front/controllers/glightbox.stimulus.ts    | 10 ++++++----
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/back/jdd-components/horizontal-gallery/horizontal-gallery.jdd.tsx b/src/back/jdd-components/horizontal-gallery/horizontal-gallery.jdd.tsx
index 20e8259..ed33f2c 100644
--- a/src/back/jdd-components/horizontal-gallery/horizontal-gallery.jdd.tsx
+++ b/src/back/jdd-components/horizontal-gallery/horizontal-gallery.jdd.tsx
@@ -8,6 +8,7 @@ import type {
 import { Component, ComponentArguments, insert_nbsp } from "@sealcode/jdd";
 import { horizontalScroller } from "../../routes/common/horizontal-scroller/horizontal-scroller.js";
 import { htmlEscape } from "escape-goat";
+import { PathFilePointer } from "@sealcode/file-manager";
 
 const component_arguments = {
 	title: new ComponentArguments.ShortText(),
@@ -45,28 +46,27 @@ export class HorizontalGallery extends Component<typeof component_arguments> {
 				data-controller="glightbox"
 			>
 				{horizontalScroller({
-					elements: (images || []).map((image) => (
+					elements: (images || []).map(({ image, caption, alt }) => (
 						<>
 							<div
 								class="image-wrapper"
 								data-glightbox-target="pictureWrapper"
-								data-glightbox-caption={htmlEscape(image.caption || "")}
+								data-glightbox-caption={htmlEscape(caption || "")}
+								data-glightbox-big-image={
+									image instanceof PathFilePointer ? image.getURL() : ""
+								}
 							>
-								{render_image(image.image, {
+								{render_image(image, {
 									sizesAttr: "100vw",
 									container: {
 										width: 800,
 										height: 500,
 										objectFit: "contain",
 									},
-									alt: image.alt,
+									alt: alt,
 								})}
 							</div>
-							{image.caption?.trim() ? (
-								<div class="caption">{image.caption}</div>
-							) : (
-								""
-							)}
+							{caption?.trim() ? <div class="caption">{caption}</div> : ""}
 						</>
 					)),
 					render: async ({ scroller, markers }) => (
diff --git a/src/front/controllers/glightbox.stimulus.ts b/src/front/controllers/glightbox.stimulus.ts
index 82a5c5a..9c8eedc 100644
--- a/src/front/controllers/glightbox.stimulus.ts
+++ b/src/front/controllers/glightbox.stimulus.ts
@@ -30,12 +30,14 @@ export default class GlightboxController extends Controller {
 		]);
 		this.gallery?.destroy();
 		this.gallery = window.GLightbox({
-			elements: this.pictureWrapperTargets.map((e) => {
-				const img = e.querySelector("img");
+			elements: this.pictureWrapperTargets.map((wrapper) => {
+				const img = wrapper.querySelector("img");
 				return {
 					type: "image",
-					href: img.getAttribute("src"),
-					description: e.getAttribute("data-glightbox-caption"),
+					href:
+						wrapper.getAttribute("data-glightbox-big-image") ||
+						img.getAttribute("src"),
+					description: wrapper.getAttribute("data-glightbox-caption"),
 					alt: img.getAttribute("alt") || "",
 				};
 			}) as any,