jlelse’s Blog

Thoughts, stories and ideas

2020-02-13


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.

View

Published on in 💬 Micro

I just added a page that lists all the photos from this blog. It’s my alternative to using Instagram. Everyone can view my photos without the need to create an account, seeing advertisements and getting tracked. It was also a little challenge getting Hugo to filter and list all posts.

View

Jan-Lukas Else