jlelse's Blog

Thoughts, stories and ideas

Images

Pure CSS Lightbox in Hugo theme

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.

Read more

Jan-Lukas Else