Working with images in the Volks-Typo theme

While using the Volks-Typo theme I noticed the new component structure, introduced in Zola v0.23.0, also affected the built-in function resize_images use of images.

Two important syntax changes:

• shortcodes use the component syntax {% component image(...) %} ... {% endcomponent image %}
• the markdown syntax changed to {{< image ... />}}

Working with Images

The Volks-Typo theme ships one image shortcode for resized images. It takes the same sizing options as Zola's built-in resize_image() (width, height, op, format).

A colocated image (a file sitting next to this post's index.md) — pass page so the theme can find it inside the post's bundle:

A static image (anything under static/) — use a leading slash and omit page:

Add a caption to wrap the image in a <figure> with a <figcaption>:

Alignment

The image shortcode takes an align parameter — left, center, or right. A plain image defaults to left (like a raw markdown image); a figure (with a caption) defaults to center.

Before / after slider

Drag the round handle to compare two images. Set the opening position with start (a percentage), and label each side with label_before / label_after (the "before" image shows on the left, the "after" image on the right).

By default the slider uses the before image's own proportions:

{{< before_after before="/img/bauhaus-sunset.webp" after="/img/bauhaus-dessau.webp" start={35} label_before="Sunset" label_after="Dessau" />}}

Dessau

Sunset

Set width to show a smaller slider (it stays sharp — images render at 2×):

{{< before_after before="/img/bauhaus-sunset.webp" after="/img/bauhaus-dessau.webp" width={400} start={35} label_before="Sunset" label_after="Dessau" />}}

Dessau

Sunset

Set ratio to crop to a fixed aspect (e.g. 16/9):

{{< before_after before="/img/bauhaus-sunset.webp" after="/img/bauhaus-dessau.webp" ratio="16/9" start={35} label_before="Sunset" label_after="Dessau" />}}

Dessau

Sunset

Before / current / after slider

For three stages, before_current_after stacks three images with two handles — before | current | after. start positions the first (before) handle and start_current the second; the before handle can never pass the current one.

{{< before_current_after before="/img/bauhaus-1919.webp" current="/img/bauhaus-dessau.webp" after="/img/bauhaus-sunset.webp" start={33} start_current={66} label_before="1919" label_current="Dessau" label_after="Sunset" />}}

Sunset

Dessau

1919

This post demonstrates the core principles of the Volks-Typo theme in action, showing how historical design languages can inform contemporary digital experiences.