image related shortcodes don't work when page folders are prefixed with dates

[ZzMzaw]

System information

Zola version: 0.19.2
tabi version: 3.1.0

Expected behaviour

Zola allows to prefix pages with dates which will be used as the creation date of the page (https://www.getzola.org/documentation/content/page/).

This makes the relative path to the file in the source different from the path in the public folder.

I would expect image shortcodes to use the output image URL (i.e. with date stripped) instead of the source file path.

As an example, if we take the following page having a collocated image:

• blog
  • 2024-11-23_a-page
    • index.md
    • my-image.webp

Assuming we are testing locally, I would expect images shortcode to point to: http://127.0.0.1:1111/blog/a-page/my-image.webp

Actual behaviour

Images colocated in a page folder prefixed with creation date have an incorrect link and cannot be rendered.

Taking the previoulsy described structure, images shortcode to point to: http://127.0.0.1:1111/blog/2024-11-23_a-page/my-image.webp which doesn't exist.

Steps to reproduce

image-shortcode-issue.zip

Unzip this small website, add tabi as theme and just run zola serve on it.
Browse the two pages (one prefixed and the other not).

Additional context

Issue comes from using page.colocated_path for relative path which is related to source files and is not aware of the output path.
Only page.path is valid but it cannot be used with get_image_metadata.
Last but not least, it would work if the provided path (e.g. my-image.webp in our case) was used raw (i.e. without get_url) as the browser is only aware of the output path.

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.

[ZzMzaw]

I am not sure if this issue should be fixed in tabi or if it should be fixed in zola get_url instead.

Maybe adding a raw flag (or any better value) in the shortcode to use the src as if it is done when starting with http would do the job.
Nevertheless, I think a better solution would be to use path instead of colocated_path when building the URL so that the shortcode would work the same for both pages prefixed with date and pages without prefix.

I can look into it if you think we should fix this issue in tabi.

[ZzMzaw]

I just found the issue discussed in Zola: getzola/zola#2598.
Not sure if it will be easier to fix it there or to find a workaround in tabi.

Feel free to close this issue if you would prefer having it fixed in Zola (even if I expect a few impacts on tabi anyway).

[welpo]

Thanks for the thorough report and the .zip with a reproducible example! Top tier bug reporting here.

I ran into this issue when trying to fix #392 (in #432): setting a path breaks the social media cards functionality.

Looking into this, I do not think it can be fixed without adding an argument (as you proposed) to the shortcodes.

To me, it makes more sense to fix get_url in Zola, but I'm not opposed to adding a raw_path flag to the shortcodes and/or a warning to the docs. raw_path would be easy to implement:

- {%- if src is starting_with("http") -%}
+ {%- if src is starting_with("http") or raw_path -%}

What do you think makes most sense?

[ZzMzaw]

Meanwhile, I tried to propose a fix for get_url but as I am new in Zola, I am not sure if it makes sense.
If it is accepted, this could be fixed by resolving link internally (i.e. using '@/' at the beginning).
This would requiere a small modification of the shortcodes.

Anyway, introducing raw_path could makes sense, even once get_url is fixed, in order to give more control to the end user when needed.
We can definitely add a warning in the doc to use raw_path for collocated assets on a page whose slug is different from path until get_url is fixed.

I can look into it if you want.

[welpo]

I've implemented it in #439. Could you test it? :)

[ZzMzaw]

I confirm it works well.
Thanks for the quick implementation.

Before merging, don't forget you have enabled csp in config.toml and the full width image in content/blog/shortcodes/index.md points to welpo instead of being local.

Hopefully, we'll be able to get rid of raw_path in this case at some point.

I consider this issue resolved so feel free to close it whenever you want.

[welpo]

Before merging, don't forget you have enabled csp in config.toml and the full width image in content/blog/shortcodes/index.md points to welpo instead of being local.

Thanks for catching that!

Fixing it and merging :)