fix: enhance image caption handling by using title attribute if available (#1265)

* fix: enhance image caption handling by using title attribute if available

* feat: support markdown syntax inside image caption

assets/ts/gallery.ts

@@ -12,6 +12,15 @@ const wrap = (figures: HTMLElement[]) => {
     }
 }
 
+const unescapeHtml = (html: string) => {
+    /// Replace special HTML entities with their corresponding characters
+    return html.replace(/&/g, '&')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&quot;/g, '"')
+        .replace(/&#39;/g, "'");
+}
+
 export default (container: HTMLElement) => {
     /// The process of wrapping image with figure tag is done using JavaScript instead of only Hugo markdown render hook
     /// because it can not detect whether image is being wrapped by a link or not
@@ -64,9 +73,13 @@ export default (container: HTMLElement) => {
         figure.appendChild(el);
 
         /// Add figcaption if it exists
-        if (img.hasAttribute('alt')) {
+        let caption = img.getAttribute('alt');
+        if (img.getAttribute('data-title-escaped')) {
+            caption = unescapeHtml(img.getAttribute('data-title-escaped')!);
+        }
+        if (caption) {
             const figcaption = document.createElement('figcaption');
-            figcaption.innerText = img.getAttribute('alt')!;
+            figcaption.innerHTML = caption;
             figure.appendChild(figcaption);
         }
     }

layouts/_markup/render-image.html

@@ -1,5 +1,6 @@
 {{- $image := partial "helper/image" (dict "Resources" .Page.Resources "Image" .Destination) -}}
 {{- $alt := .PlainText | safeHTML -}}
+{{- $title := .Title | markdownify -}}
 
 {{/* SVG and external images won't work with gallery layout, because their width and height attributes are unknown */}}
 {{- $galleryImage := and $image.Height $image.Width -}}
@@ -11,6 +12,10 @@
 	{{ with $alt }}
 		alt="{{ . }}"
 	{{ end }}
+    {{ with $title }}
+        title="{{ . }}"
+        data-title-escaped="{{ . | htmlEscape }}"
+    {{ end }}
 	{{ if $galleryImage }}
 		class="gallery-image" 
 		data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"