Jan-Lukas Else

Thoughts of an IT expert

πŸ‘¨β€πŸ’» Dev: 2020-02-13

Welcome to the Dev section of my blog with development related articles.

Pure CSS Lightbox in Hugo theme

Published on in πŸ‘¨β€πŸ’» Dev

Hugo themes have the option to override the default rendering of Markdown images by using β€œMarkdown Render Hooks” since version 0.62.0. By creating a file in layouts/_default/_markup named render-image.html it is possible to use a custom template for rendered images. This gives a lot of flexibility. I just used that flexibility to create a lightbox with pure CSS (without using JavaScript, like many lightbox implementations do). After clicking (or tapping) on an content image, you will see it filling the browser view. Another click brings you back to the content.


Jan-Lukas Else