diff options
author | Jimmy Cai <github@jimmycai.com> | 2022-02-06 21:58:10 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-02-06 21:58:10 +0300 |
commit | 88beecd1017829346863d5d3f1f8fabe38843a30 (patch) | |
tree | 72e8d1e5f3ad0ae29b4abf7bbaae4a51f34547dc /assets | |
parent | 67d5156507acdf66cc132d3a1d59f2bb92486c8f (diff) |
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
Diffstat (limited to 'assets')
-rw-r--r-- | assets/ts/gallery.ts | 52 |
1 files changed, 52 insertions, 0 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 = []; |