Image overlay filter can be used to make collages

tips & tricks
1

TL; DR: the image overlay filter is not just for watermarks, it can be used to collage images together.

My site has a very conventional listing page with thumbnail and title, I wondered if I might spice it up a little.

Screenshot 2022-12-18 211410
Screenshot 2022-12-18 211410480×680 78.1 KB

Rather than having all those http requests for 16 images per post (there are more than the 3 shown) I used hugo image overlay filter to make the preview image into a single image:
Image Filters | Hugo (gohugo.io)

My programming skills peaked with commodore vic20 BASIC but I managed to

  1. start with a suitably sized blank base image
  2. use .Fill to make the small squares
  3. make some x, y coordinates
  4. loop over each image and use the overlay filter with different x y coordinates.

{{ $baseimage = $baseimage.Filter (images.Overlay $smallsrc $x $y ) }}

I thought this was cool, hope it fits in the tips and tricks section.

5 Likes
2

Thanks! I am going to try that.

You should really see if you can up your game to a Commodore 64… the speed increase will be amazing : ) (I too started there)