Even: responsive images

A while back I’ve created a feature request for responsive images in Zola. That one was (rightfully) rejected because it can implemented via a theme / shortcode. I have this implemented for my own blog. If anyone else is interested in this, there is a PR open for even.

Technical Details

The linked PR implements the following solution:

Replace ![some image](foo) with {{ image(src="foo.jpeg", alt="some image") }} and configure solutions in your config.toml:

[extra]
images_default_size = 1000
images_sizes = [500, 1000, 2000]

This results in:

<img alt="some image" src="http://127.0.0.1:1111/processed_images/37a9b7cc6ffae6c700.jpg" srcset="http://127.0.0.1:1111/processed_images/a9c5f86e7153934f00.jpg 500w, http://127.0.0.1:1111/processed_images/37a9b7cc6ffae6c700.jpg 1000w, http://127.0.0.1:1111/processed_images/c5123a96b9f24ad000.jpg 2000w" />

References:

2 Likes

Only for even or for all Zola?

I don’t have a strong opinion on this. It seems like a feature that all Zola users could benefit from. However the concrete implementation of responsive images might be to narrow or might need some extension (e.g. some users may wanna use the sizes attribute to have even more control over which image size is picked).