# Asset colocation within shortcodes

**URL:** <https://zola.discourse.group/t/asset-colocation-within-shortcodes/120>\
**Category:** Support\
**Created:** [May 30, 2019, 2:31pm UTC](https://zola.discourse.group/t/asset-colocation-within-shortcodes/120 "2019-05-30T14:31:27Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![cr1901](https://avatars.discourse-cdn.com/v4/letter/c/258eb7/32.png) [@cr1901](https://zola.discourse.group/u/cr1901)\
**Post date:** [May 30, 2019, 2:31pm UTC](https://zola.discourse.group/t/asset-colocation-within-shortcodes/120/1 "2019-05-30T14:31:27Z")

</div>

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:

```auto
<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`:

```auto
<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:

```auto
{% 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:

```auto
<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](https://zola.discourse.group/t/tera-encoding-url-from-variable/119), `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?

---

<div class="post-metadata">

**Author:** ![keats](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@keats](https://zola.discourse.group/u/keats)\
**Post date:** [May 30, 2019, 6:00pm UTC](https://zola.discourse.group/t/asset-colocation-within-shortcodes/120/2 "2019-05-30T18:00:55Z")

</div>

> [@cr1901](#):
>
> Is there any way within Zola to make asset colocation shortcode aware?

Remove the `get_url` call and that should work.

```auto
<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:

```auto
{% 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 %}

```