Resizing image in markdown content

Support
1

Can I just double check my understanding — there’s currently no way to resize images referenced in markdown without using a shortcode?

I’m currently using shortcodes like this in markdown…

{{ image(path="L1002524.jpg", alt="Description here")}}

…which map through to a shortcode and macro like this…

{% import "macros/images.html" as images %}

{% set cxt = page | default(value=section) %}

{# Check if the path passed to the shortcode is relative (1 section) or from root #}
{% if path | split(pat="/") | length == 1 %}
  {% set path = cxt.colocated_path ~ path %}
{% endif %}

{% if lazy is undefined %}
  {% set lazy = true %}
{% endif %}

<figure>
	{{ images::single(path=path, alt=alt, lazy=lazy)}}
  {% if caption %}
  <figcaption>{{ caption }}</figcaption>
  {% endif %}
</figure>

{% macro single(path, alt, lazy) %}
  <picture>
	{% set image = resize_image(path=path, width=1024, op="fit_width",
	format="webp", quality=75) %}
	<source
	  media="(max-width: 683px)"
	  srcset="{{ image.url }}"
	  type="image/webp"
	/>
	{% set image = resize_image(path=path, width=1024, op="fit_width",
	format="jpg", quality=75) %}
	<source
	  media="(max-width: 683px)"
	  srcset="{{ image.url }}"
	  type="image/jpeg"
	/>
	{% set image = resize_image(path=path, width=2048, op="fit_width",
	format="webp", quality=75) %}
	<source
	  media="(min-width: 684px)"
	  srcset="{{ image.url }}"
	  type="image/webp"
	/>
	{% set image = resize_image(path=path, width=2048, op="fit_width",
	format="jpg", quality=75) %}
	<source
	  media="(min-width: 684px)"
	  srcset="{{ image.url }}"
	  type="image/jpeg"

	/>
	{% set image = resize_image(path=path, width=1024, op="fit_width",
	format="jpg", quality=75) %}
	<img
	  src="{{ image.url }}"
	  alt="{{ alt }}"
	  width="{{ image.width}}"
	  height="{{ image.height }}"
	  {% if lazy == false %}
	  loading="eager"
	  {% else %}
	  loading="lazy"
	  {% endif %}
	/>
  </picture>

{% endmacro single %}

This is so that I can just add full size images alongside the post (marking all images as not to be copied) and only the resized, processed images are served. This has it’s advantages (I also have shortcodes to build rows and galleries of images) but there are times when it would be nice not to have lots of shortcodes scattered through the markdown, and to use the standard ![]() syntax but with similar <picture> output with resized options.

Am I right in saying that Zola doesn’t support any optimisation of standard colocated images without the shortcode workflow above?

2

Correct, all image changes are done through the template engine.

3

Excellent, thanks for confirming that so quickly. :+1: