Figure - Yellow extension customization part II

· 2 min ·

Recently, I’ve become increasingly attentive to image captions, a feature that, unfortunately, isn’t very elegantly supported by the Image extension. Additionally, I desired a lightbox functionality for my images. My initial thought was to utilize the gallery-extension[1] since it provided both features. However, it turned out to be implemented in a rather complex manner: captions needed to be added to the languages.ini file and were only visible within the lightbox. In search of an alternative to the Images extension, I eventually found what I was looking for.

The extension

A highly recommended substitute for Yellow’s image-extension is Giovanni Salmeri’s figure-extension[2]. This extension encapsulates the <img> tag within a <figure> tag and includes a <figcaption> for it.

<figure style="max-width:876px" aria-labelledby="caption-64e9c561ea3f1" class="figure">
    <img src="/media/images/nova/settings-sass.png" width="876" height="700" alt="" aria-hidden="true">
    <figcaption id="caption-64e9c561ea3f1" class="figure-caption">Nova.app – SASS setting</figcaption>
</figure>

The customization

In my article on Nova, I aimed to incorporate a lightbox feature and integrate it using JavaScript. To accomplish this, I initially searched for a Vanilla JS lightbox script and found the solution I needed in fslightbox[3], which I seamlessly integrated into the header section of my layout. To wrap the <img> within an <a> tag, I implemented the following code in my theme.js file:

document.querySelectorAll('figure img').forEach($imgSource => {
  //get source from img
  var src = $imgSource.getAttribute('src')

  //create an anchor
  var $lbAnchor = document.createElement('a')
  $lbAnchor.setAttribute('data-fslightbox', '')
  $lbAnchor.className = 'lightbox'
  $lbAnchor.href = src

  //wrap img with link
  $imgSource.parentNode.replaceChild($lbAnchor, $imgSource);
  $lbAnchor.appendChild($imgSource);
})

It subsequently generates the <img> tag enclosed within an <a> tag:

<figure style="max-width:876px" aria-labelledby="caption-64eb1966134fa" class="figure">
    <a data-fslightbox class="lightbox" href="/media/images/nova/settings-sass.png">
        <img src="/media/images/nova/settings-sass.png" width="876" height="700" alt="" aria-hidden="true">
    </a>
    <figcaption id="caption-64eb1966134fa" class="figure-caption">Nova.app – SASS setting</figcaption>
</figure>

Reply via e-mail

Back to top