Is there way to use frontmatter variable as image path?

[imShara]

Like this:

---
title: Hello World
picture: /news/1.jpg
---

# {{ title }}

![image](picture)

[yankeeinlondon]

did you try this? it's pretty much already done you just didn't put in the curly brackes for the image source:

---
title: Hello World
picture: /news/1.jpg
---

# {{ title }}

![alt]({{picture}})

[yankeeinlondon]

sorry, i closed based on my initial test passing but on restart of test runner it does appear it is failing based on my example.

[imShara]

It works with links, but not with pictures

[yankeeinlondon]

Ok, i'll add some tests for this in my latest PR (hopefully to be released in next few days) and see if we can't roll this fix into it.

[yankeeinlondon]

So it would appear that for both links and and image sources are treated the same. In this example MD file:

---
title: Get the Picture
description: used for testing images in this plugin
cat1: images/cat1.jpg
cat2: https://cats-are-us.com/cat-o-rama.jpg
catLink: https://all-about-cats.com/
---

## A Local Cat

![local cat]({{cat1}})

## A Remote Cat

![remote cat]({{cat2}})

for more on cats, check out this link: [link]({{catLink}})

{{catLink}}

both link and image tags URLencode the curly brackets prior to handoff to VueJS in build pipeline which blocks it from working. Here's the output I'm seeing:

<div class="markdown-body"><h2>A Local Cat</h2>
<p><img src="%7B%7Bcat1%7D%7D" alt="local cat"></p>
<h2>A Remote Cat</h2>
<p><img src="%7B%7Bcat2%7D%7D" alt="remote cat"></p>
<p>for more on cats, check out this link: <a href="%7B%7BcatLink%7D%7D">link</a></p>
<p>{{catLink}}</p>
</div>

I'm surprised it's working for you in links. Can you validate that?

[yankeeinlondon]

I have added this into a PR i'm working on and all tests are now passing for links, images, and others:

  payload.html = select(payload.html)
    .updateAll('img')(update('src'))
    .updateAll('iframe')(update('src'))
    .updateAll('srcset')(update('src'))
    .updateAll('a')(update('href'))
    .updateAll('link')(update('href'))
    .updateAll('prefetch')(update('href'))
    .toContainer()

  return payload

Give me a few days to push this PR out ... it's a pretty big one but it's other features are largely just exposed as a "builder API" should have no impact on normal usage.

[kleinpetr]

any news here? :)

[yankeeinlondon]

i'm still working on finishing off the PR with this in it ... very close to pushing it ... possibly today more likely in a day or two

[yankeeinlondon]

To be honest I'd expected this to be done already but have had a number health issues which have gotten in the way. I'll definitely update here once ready.

[yankeeinlondon]

dropped a PR today that enables this feature ... not on npm yet but should be soon