How do I reference the resized image and add it to different templates

Support
1

Hi,

It’s a simple blog site, but I have different partial templates. So what I am trying to do is, In the .md file I have a blog post, I am trying to use a shortcode to resize the image in the blog post.

Now as per the documentations, the output name is hash of the function signature. But now how do I use the same name in the different partial template.

For example:

I have image in post1.md file which is inserted using shortcode, and the code for shortcode is as follow and the filename is resize_image.html:

{% set image = resize_image(path=path, width=520, height=345, op="fit", format="webp") %}
<img
  class = "rounded-lg"
  src="{{ image.url }}"
  alt=alt
  width="{{ image.width }}"
  height="{{ image.height }}"
/>

Now we get the url in image.url, I got that from the document, now I also need conditionally add the link tag that preloads the image if we are on that page. I have got the below till now, but am having problem with the image link.

I have the following on my head.html

 {% include "injects/preload_blogs_content_images.html" ignore missing %}

I have the below in my preload_blogs_content_images.html

{% if current_path and current_path == '/post1/' %}
   <link rel="preload" as="image" href="{{ get_url(path=`?`) }}" />
{% endif %}

Now, how do I reference the same image or can we auto do this from the shortcode or any other way we can achieve this.

Really appreciate you help, thank you.

2

I don’t think there’s a way to do this. Zola doesn’t really “know” anything about the assets it processes, it’s just a “dumb” converter. And those processed assets are not available until after the page has been processed anyway. So there’s no way to get information about processed assets before they have been processed…