From 88beecd1017829346863d5d3f1f8fabe38843a30 Mon Sep 17 00:00:00 2001
From: Jimmy Cai <github@jimmycai.com>
Date: Sun, 6 Feb 2022 19:58:10 +0100
Subject: [PATCH] fix: hyperlinked image (#485)

* fix: hyperlinked image

closes https://github.com/CaiJimmy/hugo-theme-stack/issues/410

* feat: add support to inline images

* Remove unused code

* Remove data-alt-html
---
 assets/ts/gallery.ts                          | 52 +++++++++++++++++++
 .../content/post/markdown-syntax/index.md     |  4 ++
 layouts/_default/_markup/render-image.html    | 27 ++++------
 3 files changed, 67 insertions(+), 16 deletions(-)

diff --git a/assets/ts/gallery.ts b/assets/ts/gallery.ts
index 5de13a2..ec7c02d 100644
--- a/assets/ts/gallery.ts
+++ b/assets/ts/gallery.ts
@@ -57,6 +57,58 @@ class StackGallery {
     }
 
     public static createGallery(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
+        /// and it lead to a invalid HTML construction (<a><figure><img></figure></a>)
+
+        const images = container.querySelectorAll('img');
+        for (const img of Array.from(images)) {
+            /// Images are wrapped with figure tag if the paragraph has only images without texts
+            /// This is done to allow inline images within paragraphs
+            const paragraph = img.closest('p');
+
+            if (paragraph.textContent.trim() == '') {
+                /// Once we insert figcaption, this check no longer works
+                /// So we add a class to paragraph to mark it
+                paragraph.classList.add('no-text');
+            }
+
+            let isNewLineImage = paragraph.classList.contains('no-text');
+            if (!isNewLineImage) continue;
+
+            const hasLink = img.parentElement.tagName == 'A';
+
+            let el: HTMLElement = img;
+            /// Wrap image with figure tag, with flex-grow and flex-basis values extracted from img's data attributes
+            const figure = document.createElement('figure');
+            figure.style.setProperty('flex-grow', img.getAttribute('data-flex-grow') || '1');
+            figure.style.setProperty('flex-basis', img.getAttribute('data-flex-basis') || '0');
+            if (hasLink) {
+                /// Wrap <a> if it exists
+                el = img.parentElement;
+            }
+            el.parentElement.insertBefore(figure, el);
+            figure.appendChild(el);
+
+            /// Add figcaption if it exists
+            if (img.hasAttribute('alt')) {
+                const figcaption = document.createElement('figcaption');
+                figcaption.innerText = img.getAttribute('alt');
+                figure.appendChild(figcaption);
+            }
+
+            /// Wrap img tag with <a> tag if image was not wrapped by <a> tag
+            if (!hasLink) {
+                figure.className = 'gallery-image';
+
+                const a = document.createElement('a');
+                a.href = img.src;
+                a.setAttribute('target', '_blank');
+                img.parentNode.insertBefore(a, img);
+                a.appendChild(img);
+            }
+        }
+
         const figuresEl = container.querySelectorAll('figure.gallery-image');
 
         let currentGallery = [];
diff --git a/exampleSite/content/post/markdown-syntax/index.md b/exampleSite/content/post/markdown-syntax/index.md
index be381a0..0254cca 100644
--- a/exampleSite/content/post/markdown-syntax/index.md
+++ b/exampleSite/content/post/markdown-syntax/index.md
@@ -162,3 +162,7 @@ X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
 Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
 
 Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
+
+## Hyperlinked image
+
+[![Google](https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png)](https://google.com)
\ No newline at end of file
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 0325458..0ed5584 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -25,22 +25,17 @@
 	{{- end -}}
 {{- end -}}
 
-<figure 
+<img src="{{ $Permalink }}"
+	{{ with $Width }}width="{{ . }}"{{ end }}
+	{{ with $Height }}height="{{ . }}"{{ end }}
+	{{ with $Srcset }}srcset="{{ . }}"{{ end }}
+	loading="lazy"
+	{{ with $alt }}
+		alt="{{ . }}"
+	{{ end }}
 	{{ if $galleryImage }}
 		class="gallery-image" 
-		style="
-			flex-grow: {{ div (mul $image.Width 100) $image.Height }}; 
-			flex-basis: {{ div (mul $image.Width 240) $image.Height }}px"
-	{{ end }}>
-	<a href="{{ $Permalink }}" {{ if $galleryImage }}data-size="{{ $image.Width }}x{{ $image.Height }}"{{ end }}>
-		<img src="{{ $Permalink }}"
-			{{ with $Width }}width="{{ . }}"{{ end }}
-			{{ with $Height }}height="{{ . }}"{{ end }}
-			{{ with $Srcset }}srcset="{{ . }}"{{ end }}
-			loading="lazy"
-			{{ with $alt }}alt="{{ . }}"{{ end }}>
-	</a>
-	{{ with $alt }}
-	<figcaption>{{ . | markdownify }}</figcaption>
+		data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
+		data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
 	{{ end }}
-</figure>
\ No newline at end of file
+>
\ No newline at end of file