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 | |
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
-rw-r--r-- | assets/ts/gallery.ts | 52 | ||||
-rw-r--r-- | exampleSite/content/post/markdown-syntax/index.md | 4 | ||||
-rw-r--r-- | 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 |