Asset colocation within shortcodes

Support
1

While porting my website, I wish to keep certain portions of the HTML semantically similar to my old website. One of the bigger html snippets I want to keep around is my <figure> elements and captions. Here is an example on my website right now of a figure and caption:

<figure>
<img alt="YM2151 die image." src="/assets/img/nmos/ym2151_die.png">
<figcaption>Die image of YM2151 at 20x magnification, full die. The full-size
image is 617MB (<a href="https://siliconpr0n.org/map/yamaha/ym2151/mz_mit20x/">Source</a>).</figcaption>
</figure>

To implement the same thing in Zola, I attempted to create a shortcode for this as the following under templates/shortcode/figure.html:

<figure>
<img alt="{{alt}}" src="{{ get_url(path=url) | safe}}">
<figcaption>{{body}}</figcaption>
</figure>

In fact, this almost works, but I’ve run into a few snags. I attempted to regenerate my old HTML in Zola by filling out the shortcode as follows:

{% figure(alt="YM2151 die image.", url="ym2151_die.png") %}
Die image of YM2151 at 20x magnification, full die. The full-size
image is 617MB {{ (<a href="https://siliconpr0n.org/map/yamaha/ym2151/mz_mit20x/">Source</a>) | safe }} ."))
{% end %}

The generated html, unfortunately does not find the image because asset colocation did not kick in, nor does it properly display the URL, despite me trying to escape it:

<figure>
<img alt="YM2151 die image." src="http://127.0.0.1:1111/ym2151_die.png">
<figcaption>Die image of YM2151 at 20x magnification, full die. The full-size
image is 617MB {{ (&lt;a href=&quot;https:&#x2f;&#x2f;siliconpr0n.org&#x2f;map&#x2f;yamaha&#x2f;ym2151&#x2f;mz_mit20x&#x2f;&quot;&gt;Source&lt;&#x2f;a&gt;) | safe }} .&quot;))</figcaption>
</figure>

Is there any way within Zola to make asset colocation shortcode aware? And additionally, according to Tera encoding URL from variable, safe should be able to suppress escaping URLs, but it appears I am not using it correctly?

What recourse do I have to make my figures show up properly before I bite the bullet and just use Markdown paragraphs to “fake” captions?

2

Remove the get_url call and that should work.

<figure>
<img alt="{{alt}}" src="{{ url | safe}}">
<figcaption>{{body | safe}}</figcaption>
</figure>

As for escaping, Tera only escape variables so you don’t need to escape hardcoded urls. In practice your call would be:

{% figure(alt="YM2151 die image.", url="ym2151_die.png") %}
Die image of YM2151 at 20x magnification, full die. The full-size
image is 617MB <a href="https://siliconpr0n.org/map/yamaha/ym2151/mz_mit20x/">Source</a>.
{% end %}