Must all images be in the static folder

support
1

Should all the images be in the static folder, or can they be post in any folder?

2

No and yes.
More info on that in the documentation under Page bundles

and

2 Likes
3

It depends on the theme, the baseURL, etc.

If I were starting from scratch, creating my own layouts/theme…

Images related to a single page should be placed in a page bundle:

content/
├── posts/
│   ├── post-1/
│   │   ├── c.jpg  <-- page resource
│   │   ├── d.jpg  <-- page resource
│   │   └── index.md
│   ├── post-2.md
│   └── _index.md
└── _index.md

Images that can be used anywhere on the site should be placed in the assets directory:

assets/
└── images/
    ├── a.jpg  <-- global resource
    └── b.jpg  <-- global resource

And to make this setup work when adding images to your Markdown, enable Hugo’s embedded link and image render hooks in your site configuration:

[markup.goldmark.renderHooks.image]
enableDefault = true

[markup.goldmark.renderHooks.link]
enableDefault = true

The content/posts/post-1/index.md file would look something like this:

![a kitten](images/a.jpg) 

![another kitten](c.jpg)

Note that Hugo’s embedded link and image render hooks are automatically enabled for multilingual single-host sites.

3 Likes
4

Shouldn’t another kitten refer to a.jpg or b.jpg (from the page bundle)? Or perhaps using a/b for assets and c/d for the bundle would make the approach clearer.

5

The file names are irrelevant. I have fixed the tree diagrams above.

Resolution of the Markdown destinations is performed by the render hooks. The render hook documentation describes precedence.

2 Likes