New: Add captions to PhotoSwipe

Resources/Private/Assets/Main.js

@@ -1,4 +1,5 @@
 import PhotoSwipeLightbox from "photoswipe/lightbox";
+import PhotoSwipeDynamicCaption from "photoswipe-dynamic-caption-plugin";
 import { dispatchEvent, getDataOptions, setPswpContainerAttributes, addEventListener } from "./Helper";
 
 const optionsFromNeos = { ...getDataOptions("photoswipeI18n"), ...getDataOptions("photoswipeOptions") };
@@ -10,6 +11,12 @@ function init(options = {}) {
         pswpModule: () => import("photoswipe"),
         ...options,
     });
+    new PhotoSwipeDynamicCaption(lightbox, {
+        type: "auto",
+        captionContent: (slide) =>
+            slide.data.element.closest("figure").querySelector(".pswp-caption-content")?.innerHTML || "",
+    });
+
     lightbox.on("firstUpdate", setPswpContainerAttributes);
     lightbox.on("contentLoadImage", ({ content, isLazy }) => {
         dispatchEvent({ type: "image", action: "open", content, isLazy });

Resources/Private/Assets/Main.pcss

@@ -1,10 +1,11 @@
 @import url("photoswipe/src/photoswipe.css");
+@import url("photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css");
 
 :is(.pswp--fetch, .pswp--template) .pswp__zoom-wrap {
   position: relative;
+  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
   width: 100vw;
   height: 100vh;
-  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
   width: 100dvw;
   height: 100dvh;
 }
@@ -40,3 +41,7 @@
 .pswp--fetch-loading .jonnitto-photoswipe-content {
   pointer-events: none;
 }
+
+.pswp-caption-content {
+  display: none;
+}