image shortcodes erroneously modify image source URLs

[axelkar]

System information

zola 0.20.0
tabi 1bb3343

Expected behaviour

The image shortcodes should pass the src argument as-is to the img element, while also keeping support for the image width and height.

Actual behaviour

Tabi gives the colocated path without the language prepended to image elements. When there is no default-language page in the same directory as an image, the image is inaccessible.

Steps to reproduce

zola init
echo "[languages.fi]" >> config.toml
mkdir -p content/foo
echo -e "+++\n+++\n" > content/foo/index.fi.md
echo test > content/foo/asset.txt
zola build
ls public/foo/asset.txt # as imported when raw_path=false, does not exist
ls public/fi/foo/asset.txt # as imported when raw_path=true, exists

echo -e "+++\n+++\n" > content/foo/index.md
zola build
ls public/foo/asset.txt # as imported when raw_path=false, exists
ls public/fi/foo/asset.txt # as imported when raw_path=true, exists

Additional context

When Zola can handle the path given to image elements, it can change its logic independent of Tabi's. In the future, it may be better to use public/foo/asset.txt in all language versions of the foo page.

Final checklist

• I've checked that the issue isn't already reported.
• I've tested with the latest version of tabi to check if the issue has already been fixed.

[welpo]

Thanks for reporting this!

I believe I managed to reproduce the issue.

Can you try with this code for the full width shortcode?

{#- Set paths based on whether the src is remote or local -#}
{%- if src is starting_with("http") or raw_path -%}
    {%- set image_url = src -%}
{%- else -%}
    {%- set colocated_path = page.colocated_path | default(value="") -%}
    {%- set relative_path = colocated_path ~ src -%}
    {%- set meta = get_image_metadata(path=relative_path, allow_missing=true) -%}

    {#- Fallback to absolute path if relative path doesn't work -#}
    {%- if not meta -%}
        {%- set meta = get_image_metadata(path=src, allow_missing=true) -%}
        {%- set image_url = get_url(path=src) -%}
    {%- else %}
        {#- For non-default language pages, ensure the language prefix is included in the URL -#}
        {%- set lang = page.lang | default(value=config.default_language) -%}
        {%- if lang != config.default_language -%}
            {#- Prepend language to URL for non-default languages -#}
            {%- set image_url = get_url(path=lang ~ "/" ~ relative_path) -%}
        {%- else -%}
            {%- set image_url = get_url(path=relative_path) -%}
        {%- endif -%}
    {%- endif -%}
{%- endif -%}

{%- set lazy_loading = lazy_loading | default(value=true) -%}

<div class="full-width">
    <img src="{{ image_url }}"{% if alt %} alt="{{ alt }}"{% endif %}{% if meta.width %} width="{{ meta.width }}"{% endif %}{% if meta.height %} height="{{ meta.height }}"{% endif %}{% if lazy_loading %} loading="lazy"{% endif %}/>
</div>

It should fix the issue. If so, we'd need to add the fix to all image shortcodes.

Thanks!

[axelkar]

Yep, that has the /en/ prefix compared to full_width_image. The width and height attributes are applied as previously.

I just figured out why you don't give the src as-is. It's because the browser receives it as-is, in contrast to Markdown images.

![Network configuration](netconfig1.svg)
<img src="netconfig1.svg" alt="Network configuration" />

<img alt="Network configuration" src="http://127.0.0.1:1111/en/2025/subnet-vlan-explanation/netconfig1.svg">
<img alt="Network configuration" src="netconfig1.svg">

Is that really an issue?

Btw, could you add cache busting support to images?

[welpo]

Is that really an issue?

What do you mean?

Btw, could you add cache busting support to images?

Sure. I think that's possible. I'd also take a PR for it (:

I'm quite busy lately and I'm not sure when I'll have time to implement the fix discussed here for the path (or the cache busting). If you want to help, please feel free to open an incomplete PR

[axelkar]

What do you mean?

Passing paths to the HTML as-is works with colocated assets:

content/foo
├ index.md
╰ img.png
public/foo
├ index.html
╰ img.png

<!-- content/foo/index.md -->
![](img.png)
<img src="img.png" />

<!-- w.r.t. base_url, usually read from https://example.com/foo/ -->
<img src="https://example.com/foo/img.png" />
<img src="img.png" />

@Keats What do you think about this? Relative URLs have been requested previously on Zola

Sure. I think that's possible. I'd also take a PR for it (:

I'll try to make a PR