Best way to include images in content

1

As far as I can tell from the documentation for Page Bundles and Page Resources, Hugo strongly advises putting images (illustrations, photos, diagrams, and so forth) in the same directory as the content that refers to them. I think that I also have to provide an index.md for the leaf bundle, which contains definitions for the images I want to provide.

Can I get around this somehow? I can see that it works well for blogs, but for static documentation it’s a limitation. If I want to use an image in multiple places in my content, I either need multiple copies ( really a maintenance nightmware) or symlinks ( close to being as much of a nightmare as multiple copies ).

2

Prior to bundling becoming live, the way was to put them in static. It still works.

3

Also note, what you put in /static gets merged by Hugo into the root of your site. For example, /static/images/cat.jpg will be at http://sample.com/images/cat.jpg.

4

Questions:

  1. Consider the built-in {{< figure > }} shortcode. If I have the file some_image.png in /static, what do I use for the src= parameter to {{< figure > }}?

  2. Is there any way to use {{< figure > }} with a subdirectory of /static, such as /static/images?

5

I’ve got my own figure and haven’t used the built in one but from the doc site, it looks like it would just be:

{{< figure src="/images/some_image.png" title="Some Cool Image" >}}

Use whatever folder structure you like, under /static. Pin the url to the root in “absolute” format. (That is, /images/something... not images/something... in this case.)