Hugo - relative paths in page bundles

Question

Sorry for the basic question, but I'm just getting started with Hugo and I can't work out how to link to an image within a page bundle.

I have the following structure in my content folder:

content/
├── about
│   └── index.md
└── post
    ├── post01
    │   ├── img01.png
    │   └── index.md
    └── post02
        ├── img01.png
        └── index.md

From my reading of the documentation on page resources, it sounds like page resources within a page bundle should have relative paths. Based on that, I thought I would be able to link to img01.png from within the post01 index.md by using the following markdown:

![](img01.png)

However, I just can't get that to work. The only way I can get it to work is to place my images into the /static folder (at the same level as /content), and then the markdown will load the image without any modification. So it seems like the relative paths aren't working the way I think they should, because any path I specify is relative to the /static folder. Can someone help me understand what's going on?

Another point of confusion is that if I rename my /content/post folder to /content/posts and then restart my local hugo server, none of my posts loads onto the front page anymore, and I can't even browse to it with the URL localhost:1313/posts (although localhost:1313/about still loads fine). What causes the homepage to automatically list the contents of /content/post but not /content/posts, and is there a particular reason for why I can't browse to localhost:1313/posts?

Thanks very much!

Answer 1

There are actually three questions here.

Question 1 - page bundle images.

MarkDown is processed by the BlackFriday module which doesn't know about page bundles. You will need to use an image tag and some shortcodes to get to it. Something like:

{{ with .Resources.Match "image01.png" }}
   <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
{{end}}

See the hugo image processing page

Question 2 - post vs posts (front page)

This is actually hard to answer without a lot of information about your themes and layouts. But as a guess ...

Somewhere in the templates that generate index.hml, there will be something looks like:

{{ range .Section "post" }}

By move the contents, you changed the section name. By convention, section names are singular.

Question 3 - post vs posts (hugo server)

hugo server serves pages from memory. It is not using your file system. So, if a directory doesn't have built content, then it won't be browsable. To see exactly what hugo server will serve (with paths) then just build and look in the public/ directory.