A little confused about resize_image in markdown with colocated assets

I’m a bit confused how to use resize image with colocated assets, and could use a helping hand. So far I can only seem to access static images

My directory structure is:


In my markdown variables of index.md, I’ve added assets = ["images"]

In my markdown, I have tried:

{{ resize_image(path="/images/file.jpg", width=200, op="fit_width") }} /* this produces <img src=[object1]> and a broken image */
{{ resize_image(path=page.assets + "/images/file.jpg", width=200, op="fit_width") }}
{{ resize_image(path=page.assets["images"] + "file.jpg", width=200, op="fit_width") }}

In the latter 2 cases, the only thing that shows up on my actual rendered HTML is the literal shortcode text ike below:

The only way I can load an image currently is <img src="/images/file.jpg"> from the static directory.

The resize_image shortcode markup that I’m using (which comes from the theme I selected) is:

{% if not width %}
  {% set width = 240 %}
{% endif %}
{% if not height %}
  {% if width %}
    {% set height = width %}
  {% else %}
    {% set height = 180 %}
  {% endif %}
{% endif %}
{% if not op %}
  {% set op = 'fill' %}
{% endif %}

{% if caption %}
  <a href="{{ get_url(path=path) }}"><img src="{{ resize_image(path=path, width=width, height=height, op=op) }}"/></a>
  <figcaption>{{ caption }}</figcaption>
{% elif figure %}
  <img src="{{ resize_image(path=path, width=width, height=height, op=op) }}"/>
{% else %}
<img src="{{ resize_image(path=path, width=width, height=height, op=op) }}"/>
{% endif %}

The documentation gives an example for using page.assets for image galleries, but I’m having trouble getting page.assets working with the existing shortcode which takes a path.

I could rewrite the shortcode to access the files from page assets, but I’d like to try to get this working with the existing shortcode.

I could use a bit of help. Thanks!

You can’t access variables or do any kind of operation (such as +) in the shortcode call , that’s why Zola is not recognizing the latter 2 as shortcodes.

The resize_image Tera function returns an object (Image processing | Zola), not just the path to the processed image.
You want to do something like {% set data = resize_image(...) %} and then img src={{data.url}}

Thanks. That was actually the very first thing I tried, but I couldn’t use {% ... %} in my markdown, it wasn’t recognizing it and just renders the raw text in my html

I did see an example of this usage inside markdown HERE, but I don’t see an explanation on that page how to use it. Is there something I have to enable to make that work?

Nothing special to use them, it just needs to look like a shortcode. If you are doing things like {% resize_image(path=page.assets["images"] )%}, the parser is not going to recognise that as a shortcode as it’s not valid.