This content originally appeared on DEV Community and was authored by Joost van der Schee
I was converting a website from WordPress to Hugo and needed an equivalent to the Tiled Image Gallery from Wordpress. I wanted the Tiled Mosaic style, but that was a little to complex, as it also contains colspans. I came up with this as an alternative. You can find it here:
https://codepen.io/joosts/pen/LEpgLwN
It has a WTFPL license and is almost fully ‘vibe coded’. It is Javascript-heavy and requires no CSS. It uses a simple HTML structure, as illustrated below:
<div class="tiled-gallery">
<a href="full_img_src">
<img ratio="0.666" src="thumb_img_src" />
</a>
...
</div>
The hardest part of using this code is determining the image ratio before rendering. Any server side language (like PHP) can generate these image ratios though, as can Hugo (which I have built this for). Knowing the image ratio before loading the images prevents layout shifts and ensures a smooth loading experience.
This whole javascript is only a few kilobytes large, so it loads relatively quickly. It is fully responsive and has a debounce function that limits the redraws to 50ms, preventing it from being CPU-heavy.
Aestheticly, it aims for 3 images per row while having AT LEAST three images at the last row. The images always fill out nicely and the code prevents subpixel issues. Images have a minimum size, which turns the gallery into a list of images on mobile. The margin between the images is 4px.
I did not take the time to fully understand the code, but it works pretty nice. If you want to change this code, I suggest you vibe code those changes as well.
Enjoy!
This content originally appeared on DEV Community and was authored by Joost van der Schee