Skip to Content

Hugo — Lightbox Shortcode

Pure CSS, No JavaScript

Posted on 2 mins read
Hugo
Hugo

What

A pure CSS lightbox — no JavaScript, turned into a Hugo {{< figure-lightbox >}} shortcode suitable to be used anywhere the built-in {{< figure >}} shortcode would be used.

Hugo
biographical name
1 Victor (-Marie) 1802-1885 French poet, novelist, and dramatist
2 open-source static website generator written in Golang
lightbox
noun
1 JavaScript library by Lokesh Dhakar to display images and videos by filling the screen, and dimming the rest of the page
2 any technique to display images and videos by filling the screen, and dimming the rest of the page, named in homage to the original JavaScript library
shortcode
noun
1 mini-templates (snippets) of code and markup that can be called within Hugo content files, commonly to augment the limitations of native Markdown

Seeing is Believing

<profound Yoda quote — violate subject-verb-object order, it will>

{{< figure src="yoda.jpg" caption="*Figure: Hugo standard `figure` shortcode*" width=600 >}}
Figure: Hugo standard figure shortcode

Figure: Hugo standard figure shortcode

{{< figure-lightbox src="yoda.jpg" caption="*Figure: Hugo custom `figure-lightbox` shortcode. Click for pure CSS lightbox*" width=600 >}}
Figure: Hugo custom figure-lightbox shortcode. Click for pure CSS lightbox

Figure: Hugo custom figure-lightbox shortcode. Click for pure CSS lightbox

Figure: Hugo custom figure-lightbox shortcode. Click for pure CSS lightbox

How

  1. Review the GitHub gist below containing two files: custom.css and figure-lightbox.html.
  2. Load the minimal custom CSS as required by your site/theme. Most themes have support for a custom.css file or similar.
  3. Drop the figure-lightbox.html shortcode file as <site-root>/layouts/shortcodes/figure-lightbox.html — do not change the extension.
    • The file name can be changed which changes the name of the shortcode.
  4. Use {{< figure-lightbox >}} the same way {{< figure >}} would be used.
    • The link parameter is not supported since the image click links to the lightbox.

Credit — Thank You

Creative credit and original work goes to Jan-Lukas Else. Using Hugo’s MD5 function to hash the source image path to create a unique anchor and stitching the visible and hidden elements together with HTML and CSS is quite elegant — without JavaScript. Tip of the hat, sir.

I weaved the original work and Hugo’s native {{< figure >}} shortcode into a compatible shortcode alternative with lightbox support.