fix: caption

Author: d-oit

assets/js/modules/image-lightbox-gallery/lightbox.js

@@ -204,7 +204,9 @@
     const titleDiv = createElementWithClass('div', LIGHTBOX_CLASSES.title);
 
     // Split the title by newline and filter out any empty lines
-    const titleLines = title.split('"').map(line => line.trim()).filter(line => line.length > 0);
+    // Replace literal "\n" with actual newlines, then split by real newlines
+    const normalizedTitle = title.replace(/\\n/g, '\n');
+    const titleLines = normalizedTitle.split('\n').map(line => line.trim()).filter(line => line.length > 0);
 
     titleLines.forEach((line, index) => {
       const titleSpan = document.createElement('span');
@@ -216,7 +218,7 @@
       } else {
         titleSpan.classList.add('additional-lines');
       }
-      line = line.replace(/\\n/g, '');
+      //line = line.replace('\\n', '<br>');
       titleSpan.textContent = line;
       titleDiv.appendChild(titleSpan);
     });

assets/scss/image-lightbox-gallery.scss

@@ -105,9 +105,7 @@
 .slide-lightbox-container {
   display: flex;
   align-items: center;
-  padding: 12px 12px 12px 6px;
   position: absolute;
-  top: 50%;
   cursor: pointer;
   z-index: 3;
   transform: translateY(-50%);

exampleSite/content/gallery/gallery-stack-resources-images-sample.md

@@ -4,14 +4,14 @@ title: "Gallery Stack Resources Sample"
 thumbnail:
     url: /img/bird.jpg
 
-slug: "gallery-stack-res-img-sample1"
 resources:
   - src: "img/bird.jpg"
     title: "Example caption 1"
     params:
-      description: >
+      description: |
         Description for bird image
         new line test
+
         end of line
       cssClass: "size-large"
   - src: "img/city.jpg"

layouts/shortcodes/gallery.html

@@ -108,19 +108,20 @@
         {{- end -}}
 
         {{ if ne $description "" }}
-            {{- $title = printf "%s"%q" $title $description -}}
+            {{- $title = printf "%s \\n %s" $title $description  -}}
+            {{ $title = $title }}
         {{ end }}
 
         {{ if eq $isError false }}
             <!-- Single Image Item -->
-            <div id="{{ $imageUrl }}" class="gallery-item {{ $randomClass }}" {{ $dataAttributes | safeHTMLAttr }}>
+            <div id="{{ $imageUrl }}" class="gallery-item {{ $randomClass }}" {{ $dataAttributes | safeHTMLAttr }} aria-describedby="{{ $title }}">
                 {{ partial "assets/image.html" (dict
                     "url" $imageUrl
                     "ratio" $ratio
                     "page" $.Page
                     "class" $imageCssClass
                     "loading" $loading
-                    "title" $title
+                    "title" $title 
                     "caption" $caption
                 ) }}
             </div>