Embedding page resources into posts

1

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…]

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

image
image.jpg579×924 94.9 KB

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.

Thanks! :slight_smile:

2

Any thoughts on this? :slight_smile:

3

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.

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

4

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 /?

5

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