Relative image URLs are broken

[pawroman]

As reported by @ipetkov

Came across this while updating my site, turns out this change actually breaks relative image URLs :grimacing:

Basically I am using {{ image(src="blah.jpg") }} since sometimes I organize posts in their own directory (where index.md and the photo are siblings under the same directory). Browsers will interpret the URL as being relative to the current URL, except now the URL is rewritten to http://127.0.0.1:1111/flower.png even though the actual image is located at http://127.0.0.1:1111/the_post/flower.png

Originally posted by @ipetkov in https://github.com/pawroman/zola-theme-terminimal/issues/37#issuecomment-1575703464

[goingforbrooke]

Initial findings

Using page.colocated_path in the image.html shortcode fixes the issue for (@ipetkov's) post-directory style, but breaks images for the post-markdown style (where images are stored in static/).

Fix Attempt

terminimal/templates/shortcodes/image.html

...
{# ... then convert the page's colocated_path ident to a string so it can be concatenated. #}
{% set page_path = page.colocated_path | as_str %}
{# ... and prepend the site's base URL to the image's URL. #}
{% set src = config.base_url ~ page_path ~ src %}
...

Fix Notes

I had to use as_str on page.colocated_path to prevent a concatenation error.

Error: Reason: Tried to concat a value that is not a string or a number from ident page.colocated_path

The page.colocated_path shortcode variable only has the name of the post's parent directory, so we still have to use config.base_url to get the full path to the image. I'm probably missing something about asset search paths and shortcodes, but Zola's issues show that I'm in good company-- the docs for shortcodes were updated just seven hours ago.

Next Steps

Zola promises the same asset-finding logic between markdown-post and directory-post styles. Maybe the shortcode needs some conditional logic for post-directory and post-markdown styles?

[goingforbrooke]

Actually, this fix only breaks post-markdown style images if a mix of the two styles are used. As long as I stick to post-markdown or post-directory for the content of a post, everything's fine. It's almost as if Zola takes the first image shortcode as its cue for where it should look for images in the rest of the blog post.

It's not pretty but is that a satisfactory fix for now, @pawroman?

[goingforbrooke]

Created a draft PR with the fix.

[pawroman]

Thanks @goingforbrooke -- much appreciated!