responsive images

README.md

@@ -94,3 +94,22 @@ block-style automatic rendering is also supported, if enabled in the config:
 katex_enable = true
 katex_auto_render = true
 ```
+
+### Responsive Images
+To create images in multiple resolutions you can use replace `![some image](foo)`
+with `{{ image(src="foo.jpeg", alt="some image") }}`. You can configure image
+sizes in "width in pixels":
+
+```toml
+[extra]
+images_default_size = 1000
+images_sizes = [500, 1000, 2000]
+```
+
+The browser will automatically choose an appropriate image size based on the screen
+size and other factors like connectivity. For browser that do not support responsive
+images, `images_default_size` will be used.
+
+Please note that specifying many entries in `images_sizes` will slow down `zola serve`
+and `zola build` considerably. Since one file per size is created, this also potentially
+increases the hosting costs of your website.

config.toml

@@ -22,5 +22,7 @@ even_menu = [
     {url = "$BASE_URL/tags", name = "Tags"},
     {url = "$BASE_URL/about", name = "About"},
 ]
+images_default_size = 1000
+images_sizes = [500, 1000, 2000]
 
 even_title = "Even"

templates/shortcodes/image.html

@@ -0,0 +1,13 @@
+{% set abspath = "./" ~ page.path ~ src  %}
+{% set meta = get_image_metadata(path=abspath) %}
+{% set width = meta.width %}
+{% set srcset_list = [] %}
+{% for s in config.extra.images_sizes %}
+{% if width >= s %}
+{% set resized = resize_image(path=abspath, width=s, op="fit_width") %}
+{% set element = resized.url ~ " " ~ s ~ "w" %}
+{% set_global srcset_list = srcset_list | concat(with=[element]) %}
+{% endif %}
+{% endfor %}
+{% set default_resized = resize_image(path=abspath, width=config.extra.images_default_size, op="fit_width") %}
+<img alt="{{ alt }}" src="{{ default_resized.url | safe }}" srcset="{{ srcset_list | join(sep=", ") | safe }}" />