A way to create dynamic image links?

[Moonbase59]

I wonder if there is a way to create “dynamic” image links from the location: front matter data. Did anyone find a way to do this?

I have, in the front matter:

---
location: [51.133333,10.416667]
---

and would like to create an embedded image like

![Weather](upload://meiYD6EWfnwT5ZkFWAdYe4uTkeS.png)

---

Using the Templater plugin, I tried

![Wetter](https://wttr.in/<%+ tp.frontmatter.location[0] %>,<%+ tp.frontmatter.location[1] %>_0tqp_lang=en.png)

but this only shows the text in preview, not an image:

![Weather](upload://meiYD6EWfnwT5ZkFWAdYe4uTkeS.png)

---

Using the Dataview plugin, I tried:

![Wetter](`=elink("https://wttr.in/" + this.location[0] + "," + this.location[1] + "_0tqp_lang=en.png")`)

but this also only shows the text plus a clickable link:

![Weather](upload://meiYD6EWfnwT5ZkFWAdYe4uTkeS.png)

---

Any ideas or suggestions?

(I know I can create a static link using Templater, but I wish the link to be dynamic, depending on the front matter, so I don’t have to change the code in the notes when the location changes. Using wttr.in is just an example.)

---

Related: Not only elink() but also dynamic image links? · Issue #137 · blacksmithgu/obsidian-dataview · GitHub

---

EDIT: Sorry, it seems the forum system keeps changing my example links to upload://something… so you can’t see the results anymore. Just imagine a link with two parts filled in dynamically from the location data. Or try the examples yourself.

[psidnell]

I can see uses for this - like linking to todays/yesterdays daily note without editing the enclosing document.

It’s as if the enclosing document was a template where the template text ONLY and TEMPORARILY gets expanded/interpolated when in preview mode.

Hmmm.

[valentine.195]

I was curious about this so I played around with it, and your example works for me:

I also tried an <img> tag at the same time, just to see if there was a difference.

[Moonbase59]

Thanks for testing, unsure what you are showing: “Link Test” on the left, “Columbus” on the right?

EDIT: Guess I got it. You use the whole thing as a template. But since Templaters “dynamic” commands are supposed to render on preview, I wanted to use this in the same note, so I only need to change the frontmatter and not every link.

Tried again, here’s what I get:

Looks like the values are rendered correctly but the generated Markdown isn’t re-evaluated. Or something

(I wonder if somehow Obsidian could be “told” to re-render the finished link. Maybe using JS, since Templater can use that? It’s possibly just a matter of sequence: I guess Obsidian renders the page first, then comes the plugin. If it could interpret the plugin first, then render the page, it might just work.)

[valentine.195]

Ah, ok, didn’t realize you could do dynamic in-note replacement. Guess I should read the docs

It doesn’t look like you can do JS execution with dynamic tags, unfortunately.

[Moonbase59]

Here are my tests so far:

The Note:

---
location: [51.133333,10.416667]
---

# Test Weather

**Here is the link, hardcoded:**

![Wetter](https://wttr.in/51.133333,10.416667_0tqp_lang=en.png)

_This works but is not dynamic._

**Here I try to use Templater instead:**

![Wetter](https://wttr.in/<%+ tp.frontmatter.location[0] %>,<%+ tp.frontmatter.location[1] %>_0tqp_lang=en.png)

_This just creates some text but not an image._

**Here I try `<img>`:**

<img alt="Wetter" src="https://wttr.in/<%+ tp.frontmatter.location[0] %>,<%+ tp.frontmatter.location[1] %>_0tqp_lang=en.png" referrerpolicy="no-referrer">

_This results in a broken image._

**Here I try to construct the whole `<img>` link _within_ Templater:**

<%+*  tR+="<img alt='Wetter' src='https://wttr.in/" + tp.frontmatter.location[0] + "," + tp.frontmatter.location[1] + "_0tqp_lang=en.png' referrerpolicy='no-referrer'>" %>

_This doesn’t work because apparently Obsidian hits in and interprets the `<img …` **before** Templater gets its chance._

**Here I try to construct the whole `<img>` within Templater again, using a trick so Obsidian doesn’t see the `<img …`:**

<%+* tR += '<' + 'img src="https://wttr.in/{0},{1}_0tqp_lang=en.png"'.format(tp.frontmatter.location[0], tp.frontmatter.location[1]) + '>' %>

_This again only returns text._

The Results: