# Embedding page resources into posts

**URL:** <https://discourse.gohugo.io/t/embedding-page-resources-into-posts/11120>\
**Category:** Uncategorized\
**Created:** [March 21, 2018, 3:45am UTC](https://discourse.gohugo.io/t/embedding-page-resources-into-posts/11120 "2018-03-21T03:45:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mhils](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mhils/32/5511_2.png) [@mhils](https://discourse.gohugo.io/u/mhils)\
**Post date:** [March 21, 2018, 3:45am UTC](https://discourse.gohugo.io/t/embedding-page-resources-into-posts/11120/1 "2018-03-21T03:45:24Z")

</div>

Hi all,

I’m trying to embed an image/page resource into a blog post. I placed both the image and `index.md` in `content/posts/my-first-post/`. My `index.md` looks as follows:

```
---
title: "My First Post"
---

# Page Resources

![](hugo-logo.png)
{{% figure src="hugo-logo.png" %}}

# Static Resources

![](/static-logo.png)
{{% figure src="/static-logo.png" %}}

<!--more-->

More text.

```

When running `hugo server -D`, `http://localhost:1313/posts/my-first-post/` looks as expected:

[[link to image, new users can only add one image to a post…](https://uploads.hi.ls/2018-03/2018-03-21_04-43-19.png)]

However, the index page (`http://localhost:1313/`) doesn’t render the page resources as the paths aren’t adjusted:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/7/715648b400770c041dcd1eadb50773fc2c49adee.jpg)

I came up with the following shortcode as a workaround:

```
{{ $img := .Page.Resources.GetMatch (.Get "src") }}
<figure>
    <img src="{{ $img.RelPermalink }}"/>
</figure>

```

That does work, but it looks wrong to me that I have to either write my own shortcode or put everything into ./static for this rather basic task. Am I missing anything?

To make this easy to reproduce, there’s a minimal example project at [https://github.com/mhils/hugo/tree/img-src](https://github.com/mhils/hugo/tree/img-src).

Thanks! 🙂

---

<div class="post-metadata">

**Author:** ![mhils](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mhils/32/5511_2.png) [@mhils](https://discourse.gohugo.io/u/mhils)\
**Post date:** [March 29, 2018, 7:23am UTC](https://discourse.gohugo.io/t/embedding-page-resources-into-posts/11120/2 "2018-03-29T07:23:51Z")

</div>

Any thoughts on this? 🙂

---

<div class="post-metadata">

**Author:** ![kaushalmodi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kaushalmodi/32/2567_2.png) [@kaushalmodi](https://discourse.gohugo.io/u/kaushalmodi)\
**Post date:** [March 29, 2018, 11:44am UTC](https://discourse.gohugo.io/t/embedding-page-resources-into-posts/11120/3 "2018-03-29T11:44:27Z")

</div>

You will see that issue if the `src` does not begin with `/`, even for a non-resource image.

I believe I faced a problem like this, so I ended up customizing the `figure` shortcode to [this](https://gitlab.com/kaushalmodi/hugo-theme-refined/blob/master/layouts/shortcodes/figure.html).

The same should work for your case too (you don’t even need that `.GetMatch` step as you are directly using the image file name).

---

<div class="post-metadata">

**Author:** ![mhils](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mhils/32/5511_2.png) [@mhils](https://discourse.gohugo.io/u/mhils)\
**Post date:** [March 29, 2018, 12:14pm UTC](https://discourse.gohugo.io/t/embedding-page-resources-into-posts/11120/4 "2018-03-29T12:14:02Z")

</div>

Thanks @kaushalmodi! It looks like relative src attributes are generally broken when serving content from multiple paths. Are there any disadvantages to applying rewrite behavior as it is already done for URLs starting with `/`?

---

<div class="post-metadata">

**Author:** ![kaushalmodi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kaushalmodi/32/2567_2.png) [@kaushalmodi](https://discourse.gohugo.io/u/kaushalmodi)\
**Post date:** [March 29, 2018, 12:19pm UTC](https://discourse.gohugo.io/t/embedding-page-resources-into-posts/11120/5 "2018-03-29T12:19:02Z")

</div>

> [@mhils](#):
>
> Are there any disadvantages to applying rewrite behavior as it is already done for URLs starting with /?

By rewrite behavior, you mean the use of absURL for src starting with `/`? If so, I haven’t seen any issue so far.