# Figure shortcode should use page resources

**URL:** <https://discourse.gohugo.io/t/figure-shortcode-should-use-page-resources/12989>\
**Category:** feature\
**Created:** [July 18, 2018, 4:02am UTC](https://discourse.gohugo.io/t/figure-shortcode-should-use-page-resources/12989 "2018-07-18T04:02:31Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![rgov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rgov/32/6445_2.png) [@rgov](https://discourse.gohugo.io/u/rgov)\
**Post date:** [July 18, 2018, 4:02am UTC](https://discourse.gohugo.io/t/figure-shortcode-should-use-page-resources/12989/1 "2018-07-18T04:02:31Z")

</div>

The `figure` shortcode requires specifying the image’s `src` attribute explicitly, but it would be better if it used `Page.Resources` to populate the URL (and perhaps other attributes).

I am using ugly URLs and page bundles. Because of this, my images end up in a subdirectory one level deeper than my post’s HTML file:

```auto
- content/
    - foobar/
        - index.md --> becomes /foobar.html
        - image.png --> becomes /foobar/image.png

```

In my Markdown, I therefore need to use `![Alt](foobar/image.png)` instead of the more natural `![Alt](image.png)`. And these relative URLs get messed up if the post folder gets renamed, or if an excerpt of the post gets embedded somewhere else.

Instead, I had luck with modifying the `figure` shortcode like so:

```auto
<img src="{{ with .Get "src" | $.Page.Resources.GetMatch }}{{ .RelPermalink }}{{ end }}" ...

```

Now I can just write `{{< figure src="image.png" >}}` and it uses `Page.Resource`'s ability to figure out the right path for the image.

---

<div class="post-metadata">

**Author:** ![Karelv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/karelv/32/9375_2.png) [@Karelv](https://discourse.gohugo.io/u/Karelv)\
**Post date:** [August 19, 2019, 5:36am UTC](https://discourse.gohugo.io/t/figure-shortcode-should-use-page-resources/12989/2 "2019-08-19T05:36:35Z")

</div>

> [@rgov](#):
>
> \<img src=“{{ with .Get “src” | $.Page.Resources.GetMatch }}{{ .RelPermalink }}{{ end }}” …

Probably with this:

```
 <img src="{{ with .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}{{ .RelPermalink }}{{ end }}"

```

you get even more relaxed writings (no need for extension)

```
{{< figure src="image" >}}

```