Fix: Use `resize_image` Built-in Function to Generate Image URLs

[goingforbrooke]

Fix Broken URLs Generated by the image Shortcode

🪲 Issue

Zola doesn't seem to offer a universal way of getting an image's relative path. What works for a blog with colocated assets breaks in a blog with non-colocated assets. The root issue may have to do with dates not being stripped from permalink-generating built-in functions like get_url. See here for a deeper discussion.

🔨 Solution

Using resize_image generates a valid image URL for colocated and non-colocated blog posts. We use fit with width and height set to 5000 so no resizing actually occurs. This is admittedly hacky, but it'll fix Terminimal sites while the Zola repo either adds a new built-in function, fixes(?) get_url, or tells me that I've got it all wrong. 😉

📚 Context

Fixes issue #42, which was created by (fix) PR #37 (source comment), which was troubleshooted and redesigned in draft PR #43.

🔮 Future

This fix should probably be preemptively applied to figure shortcodes as well.

We may want to add image resizing args to the image shortcode so Terminimal blogs look nice on smaller screens.

🙌🏻 Kudos

Special thanks to @ipetkov for notifying us of the change and for spectacular help with troubleshooting the introduced issue. Thanks to @pawroman for coordinating and for filing issue #42.

[goingforbrooke]

By the way, I'm off-grid till the 17th of next month, so I won't be able to get to this till then.

[pawroman]

Hey @goingforbrooke a gentle ping here :)

This PR is a good fix to merge, I wanted to clarify if you maybe had done some work on this?

[goingforbrooke]

Hey @pawroman! Sorry for the long wait. It looks like we need to choose between Zola post structures. There might be a way to do both, but I haven't managed to figure it out.

One post structure has images in static (how I do it) while the other has images in each post's containing folder.

Would you like to commit to one of these methods or maybe pursue a solution that works for both of them?

[pawroman]

Hey @goingforbrooke

Would you like to commit to one of these methods or maybe pursue a solution that works for both of them?

I'd lean onto the solution that works for both, and in my limited testing (see prior comments), it should be possible.

[goingforbrooke]

Updated branch from master-- accepted use of src instead of image.url for image.html shortcode>

Testing...

[goingforbrooke]

Using src instead of image.url breaks still breaks images

For testing, I'm looking at the sandwich image in this post.

It's made with this:

{{ image(src="raclette_sandwich.png",
         alt="Gooey raclette cheese oozing out of a white bread sandwich",
         style="border-radius: 8px;") }}

It works with this (image.url):

  <img src="{{ image.url | safe }}"{% if alt %} alt="{{ alt }}"{% endif %} class="{% if position %}{{ position }}{% else -%} center {%- endif %}" {%- if style %} style="{{ style | safe }}" {%- endif %} decoding="async" loading="lazy"/>

But not this (src):

  <img src="{{ src | safe }}"{% if alt %} alt="{{ alt }}"{% endif %} class="{% if position %}{{ position }}{% else -%} center {%- endif %}" {%- if style %} style="{{ style | safe }}" {%- endif %} decoding="async" loading="lazy"/>

@pawroman what are you seeing in your tests?

[pawroman]

Unfortunately, I don't have the time to test this properly at the moment. How does this relate to https://github.com/pawroman/zola-theme-terminimal/pull/66 ?

@heitorPB would appreciate your help if you can spare some time to follow up here.