# Page Bundle, relative image path in RSS feed wrong

**URL:** <https://discourse.gohugo.io/t/page-bundle-relative-image-path-in-rss-feed-wrong/27050>\
**Category:** support\
**Created:** [July 18, 2020, 9:36am UTC](https://discourse.gohugo.io/t/page-bundle-relative-image-path-in-rss-feed-wrong/27050 "2020-07-18T09:36:17Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![cinaplenrek](https://avatars.discourse-cdn.com/v4/letter/c/3ec8ea/32.png) [@cinaplenrek](https://discourse.gohugo.io/u/cinaplenrek)\
**Post date:** [July 18, 2020, 9:36am UTC](https://discourse.gohugo.io/t/page-bundle-relative-image-path-in-rss-feed-wrong/27050/1 "2020-07-18T09:36:17Z")

</div>

Hey there,

I’m using Hugo with page bundles, so all my posts are located in paths like the following:

`content/posts/2014-01-10-my-first-blog-post/index.md`

In my `index.md` I reference images the following way: `![Some alt text](image.png)`, the images are just located in the same directory as the index.md. This has the nice side effect that I can see them in my markdown editor and this works fine for the website itself.

Unfortunately now I have the problem that these images don’t show up correctly in the RSS feed as there they are missing a part of the path:

`<img src="image.png" alt="Some alt text">`

For it to work it has to look like:

[https://blog.example.com/posts/my-first-blog-post/image.png](https://blog.example.com/posts/my-first-blog-post/image.png)

My index.rss.xml template:

```
  <description>
    {{ .Content | html }}
  </description>

```

What’s the way to teach the index.rss.xml template to include the path of the post when linking to images?

For some reason I didn’t find many people with the same issue, maybe because page bundles are still new? If anyone could point me in the right direction I’d be very grateful!

Thanks!

---

<div class="post-metadata">

**Author:** ![Farzy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/farzy/32/11959_2.png) [@Farzy](https://discourse.gohugo.io/u/Farzy)\
**Post date:** [July 19, 2020, 5:09pm UTC](https://discourse.gohugo.io/t/page-bundle-relative-image-path-in-rss-feed-wrong/27050/2 "2020-07-19T17:09:58Z")

</div>

Hi, it looks like the issue I have when I look at my page headers. I haven’t solved it yet…

When you look at the source code of your generated pages, are all the image URLs wrong in the **meta** headers?

---

<div class="post-metadata">

**Author:** ![cinaplenrek](https://avatars.discourse-cdn.com/v4/letter/c/3ec8ea/32.png) [@cinaplenrek](https://discourse.gohugo.io/u/cinaplenrek)\
**Post date:** [July 19, 2020, 5:21pm UTC](https://discourse.gohugo.io/t/page-bundle-relative-image-path-in-rss-feed-wrong/27050/3 "2020-07-19T17:21:15Z")

</div>

Hey,

when I look into the generated feed (feed.xml) I see the images are linked like:

`<img src="image.png">`

In the generated page of the post itself they are also linked like:

`<p><img src="image.png"></p>`

But as it’s a relative path it works for the post as the image is in the directory of the post itself which is not the case for the feed which is one “level” higher in the directory structure of course.

Basically what I’m looking for is a way to inject the path of a post when the feeds gets generated. I’m not sure if that’s possible. I’d like to not use `figure` constructs in the post as then I can’t preview the picture in my markdown editor (iA Writer).

---

<div class="post-metadata">

**Author:** ![pamubay](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pamubay/32/17838_2.png) [@pamubay](https://discourse.gohugo.io/u/pamubay)\
**Post date:** [July 19, 2020, 5:23pm UTC](https://discourse.gohugo.io/t/page-bundle-relative-image-path-in-rss-feed-wrong/27050/4 "2020-07-19T17:23:01Z")

</div>

You can try this solution:

> [@Absolute URLs in RSS Feeds](https://discourse.gohugo.io/t/absolute-urls-in-rss-feeds/25971/2):
>
> To solve this I ended up using a hyper complex partial to replace all URLs by absolute ones in the .Content variable on feeds: {{ $html := htmlUnescape .Content | safeHTML }} {{ $hrefs := findRE "href=\"([^\"]\*)\"" $html }} {{ range $href := $hrefs}} {{ $absHref := strings.TrimPrefix "href=\"" $href }} {{ $absHref = strings.TrimSuffix "\"" $absHref }} {{ $absHref = printf "href=\"%s\"" ($absHref | absURL) }} {{ $html = replace $html $href $absHref }} {{ end }} {{ $srcs := findRE "sr…

---

<div class="post-metadata">

**Author:** ![cinaplenrek](https://avatars.discourse-cdn.com/v4/letter/c/3ec8ea/32.png) [@cinaplenrek](https://discourse.gohugo.io/u/cinaplenrek)\
**Post date:** [July 19, 2020, 5:40pm UTC](https://discourse.gohugo.io/t/page-bundle-relative-image-path-in-rss-feed-wrong/27050/5 "2020-07-19T17:40:21Z")

</div>

Interesting, thanks.

Unfortunately I couldn’t get it to work. Line `72:11` is the last one with `return $html`

```
hugo server -D
Built in 853 ms
Error: Error building site: failed to render pages: render of "home" failed: "/Users/blog.example.com/layouts/index.rss.xml:72:11": execute of template failed: template: index.rss.xml:72:11: executing "index.rss.xml" at <return>: wrong number of args for return: want 0 got 1

<description>
{{ $html := htmlUnescape .Content | safeHTML }}

{{ $hrefs := findRE "href=\"([^\"]*)\"" $html }}
{{ range $href := $hrefs}}
  {{ $absHref := strings.TrimPrefix "href=\"" $href }}
  {{ $absHref = strings.TrimSuffix "\"" $absHref }}
  {{ $absHref = printf "href=\"%s\"" ($absHref | absURL) }}
  {{ $html = replace $html $href $absHref }}
{{ end }}

{{ $srcs := findRE "src=\"([^\"]*)\"" $html }}
{{ range $src := $srcs}}
  {{ $absSrc := strings.TrimPrefix "src=\"" $src }}
  {{ $absSrc = strings.TrimSuffix "\"" $absSrc }}
  {{ $absSrc = printf "src=\"%s\"" ($absSrc | absURL) }}
  {{ $html = replace $html $src $absSrc }}
{{ end }}

{{ $srcset := findRE "srcset=\"([^\"]*)\"" $html }}
{{ range $set := $srcset}}
  {{ $parts := strings.TrimPrefix "srcset=\"" $set }}
  {{ $parts = strings.TrimSuffix "\"" $parts }}
  {{ $parts = split $parts "," }}
  {{ $newSrcset := slice }}
  {{ range $part := $parts }}
    {{ $part = $part | replaceRE "^\\s*(.*)\\s*$" "$1" }}
    {{ $lg := split $part " " }}
    {{ $href := index $lg 0 | absURL }}
    {{ $size := index $lg 1 }}
    {{ $newSrcset = $newSrcset | append (printf "%s %s" $href $size) }}
  {{ end }}
  {{ $newSrcset = delimit $newSrcset ", " }}
  {{ $newSrcset = printf "srcset=\"%s\"" $newSrcset }}
  {{ $html = replace $html $set $newSrcset }}
{{ end }}

{{ return $html }}

```

---

<div class="post-metadata">

**Author:** ![pamubay](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pamubay/32/17838_2.png) [@pamubay](https://discourse.gohugo.io/u/pamubay)\
**Post date:** [July 19, 2020, 5:46pm UTC](https://discourse.gohugo.io/t/page-bundle-relative-image-path-in-rss-feed-wrong/27050/6 "2020-07-19T17:46:18Z")

</div>

ahh, the OP actually use it inside partial.

replace:

```auto
{{ return $html }}

```

with:

```auto
{{ $html }}

```

---

<div class="post-metadata">

**Author:** ![cinaplenrek](https://avatars.discourse-cdn.com/v4/letter/c/3ec8ea/32.png) [@cinaplenrek](https://discourse.gohugo.io/u/cinaplenrek)\
**Post date:** [July 19, 2020, 6:02pm UTC](https://discourse.gohugo.io/t/page-bundle-relative-image-path-in-rss-feed-wrong/27050/7 "2020-07-19T18:02:20Z")

</div>

Ah, well spotted! Thanks! I got it to work but then I have absolute links based on the baseURL and not the URL of the page bundles. The resulting URL is then:

[blog.example.com/image.png](http://blog.example.com/image.png) instead of [blog.example.com/my-blog-post-slug/image.png](http://blog.example.com/my-blog-post-slug/image.png)

It seems like this whole page bundle concept is not that well supported yet or am I misunderstanding something bigger there? Seems like a pretty basic feature to have images working across the whole Hugo site?

If I use the following it seems that it works across the feeds too, is that the suggested solution? I’d lose previewing in my markdown client but if that’s what’s necessary I guess that’s how it’s going to be.

`{{< figure src="image.png" alt="some text">}}`

---

<div class="post-metadata">

**Author:** ![pamubay](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pamubay/32/17838_2.png) [@pamubay](https://discourse.gohugo.io/u/pamubay)\
**Post date:** [July 19, 2020, 6:27pm UTC](https://discourse.gohugo.io/t/page-bundle-relative-image-path-in-rss-feed-wrong/27050/8 "2020-07-19T18:27:00Z")

</div>

AFAIK, yes using `{{<figure>}}` does the job.

If you really want to keep using markdown syntax to include your images. You can use Markdown Render Hooks. (Need to create your own render hook template).

> **[Configure markup](https://gohugo.io/getting-started/configuration-markup/#markdown-render-hooks)**
>
> Configure rendering of markup to HTML.

Some related threads about image render hooks:

> [@Simple image render hook template for responsive images](https://discourse.gohugo.io/t/simple-image-render-hook-template-for-responsive-images/22464):
>
> Thank you very much for the great Hugo 0.62.0 christmas present! This simple image render hook template uses the image title as an optional caption. Feel free to adjust and use, if this template fits your use case. {{ $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) }} {{ $small := $image.Resize "480x" }} {{ $medium := $image.Resize "768x" }} {{ $big := $image.Resize "1024x" }} {{ $alt := .PlainText | safeHTML }} {{ $caption := "" }} {{ with .Title }} {{ $caption = …

> [@Relative image links with page bundles broken on main page](https://discourse.gohugo.io/t/relative-image-links-with-page-bundles-broken-on-main-page/18785/8):
>
> I hear what @alexandros suggests about using a theme with that calls the Pages range. That said, I like the way the Hugo Flex theme otherwise structures content, and I’d invested too much time in customizing its appearance with my own CSS to readily abandon it for another theme. So… I’d had the same problem as @agargara. I could not figure out how to get relative links to generate differently for the main page. Here is my solution, for anyone who runs into this problem in the future. First, …

---

<div class="post-metadata">

**Author:** ![cinaplenrek](https://avatars.discourse-cdn.com/v4/letter/c/3ec8ea/32.png) [@cinaplenrek](https://discourse.gohugo.io/u/cinaplenrek)\
**Post date:** [July 19, 2020, 6:34pm UTC](https://discourse.gohugo.io/t/page-bundle-relative-image-path-in-rss-feed-wrong/27050/9 "2020-07-19T18:34:42Z")

</div>

Ah, that seems like a good solution I haven’t tried. I’ll give that a try in the next days. Thanks!

---

<div class="post-metadata">

**Author:** ![thomastc](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/thomastc/32/20304_2.png) [@thomastc](https://discourse.gohugo.io/u/thomastc)\
**Post date:** [November 14, 2023, 12:42pm UTC](https://discourse.gohugo.io/t/page-bundle-relative-image-path-in-rss-feed-wrong/27050/10 "2023-11-14T12:42:21Z")

</div>

Came here through a search engine. An RSS-specific image render hook is working well for me, thanks @pamubay!

I put the following contents in `layouts/_default/_markup/render-image.rss.xml`:

```auto
{{/* Make sure to always use absolute image URLs in RSS feeds. */}}
{{- $srcUrl := "" -}}
{{- if or (hasPrefix .Destination "http://") (hasPrefix .Destination "https://") -}}
  {{ $srcUrl = .Destination }}
{{- else if hasPrefix .Destination "/" -}}
  {{ $srcUrl = absURL .Destination }}
{{- else -}}
  {{ $imageResource := .Page.Resources.Get .Destination }}
  {{- if $imageResource -}}
    {{ $srcUrl = $imageResource.Permalink }}
  {{- else -}}
    {{ $srcUrl = ref .Page .Destination }}
  {{- end -}}
{{- end -}}
<img src="{{ $srcUrl | safeURL }}" alt="{{ .Text }}" {{ with .Title }}title="{{ . }}"{{ end }}>

```

This passes absolute URLs with a protocol through as-is, resolves URLs starting with a / relative to the site base URL, and resolves relative URLs as resources in the page bundle before trying them relative to the page URL.

Parts of this are untested and I’m sure there is room for improvement, but this works for me, for now.