NEW Image processing module/partial

I have spent a lot of time creating a complex image processing module.

Its inspired by next/image (from next.js). The difference is it does not use excessive code and by default works with lazysizes.js but this can be turned off.

You can use all hugos image processing options.

Its a large partial but most of it doesn’t run out of the box (conditional if statement block most code from running)

Its configurable by copying the text out of config file in the module and pasting into your own params.yaml.

Most options can be set in-line when calling the partials.

Its nearly at BETA stage. Any feedback would be appreciated.

PR’s are welcome.

7 Likes

I have since created a newer version of this module which has much more streamlined configuration and is easier to update.

2 Likes

I stumbled upon this just now and will look into your repository. I’ve done something similar but shorter and constrained to my use case.

I am very pleased with lazysizes. It took a whole stack of problems away when we handle responsive images. We don’t have to worry about the calculation of the correct sizes anymore!

Hi @Georg I have made a new version of this module here Image processing module its much better and easy to modify if need be.

I was a bit cautious about lazysizes in the beginning, but now I use it primarily for the automatic sizes property, and also for “lazyloading” if I need to swap out a placeholder image when the main image has loaded.

Both these functionalities (sizes and lazyload) can be switched independently in the new module. It also has 3 types of placeholder.

e.g. you can use automated sizes, but use native lazyload without lazysizes if you aren’t using placeholders

1 Like