From 88beecd1017829346863d5d3f1f8fabe38843a30 Mon Sep 17 00:00:00 2001 From: Jimmy Cai 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 (
) + + 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 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 tag if image was not wrapped by 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 @@ Xn + Yn = Zn Press CTRL+ALT+Delete to end the session. Most salamanders 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 -}} - \ No newline at end of file +> \ No newline at end of file