A way to create dynamic image links?

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)

Weather


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.

2 Likes

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.

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.

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 :slight_smile:

(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.)

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

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

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:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.