Keep images & content together

I know this is a real old topic. But after 2 days searching as a Hugo-Rookie I wasn’t able to show images from the same folder as the md-file.

Could you recommend a shortcode or another way to accomplish this?

Check out Page Bundles feature in Hugo 0.32 and newer. Here are notes from the release announcement, but official documentation for that is in works right now.


Thank you for the input. The HUGO community gives newbies a warm fuzzy feeling, that everything will become alright…

Maybe I need to learn more about the mechanism, but by now I’m stuck on how to implement the Page Resources in a single page (see ref 4 in the picture).

Ref 1: Content folder with mix of .md and .jpg files
Ref 2: Front matter copied from
Ref 3: Result on server
Ref 4: (How to show .jpg image from ref 1?)

Another push in the right direction would be appreciated…

I have a test/sandbox site for Hugo where I experimented with the resources parameters…

The example bundle name is resources-order-a.

Hope this helps.


Actually, also look at the source layout single.html for that resources meta-data example.


The layout for the right link is here:

Note that output on that test site is Hugo 0.35 (is coming to the interweb Monday), which is slightly different in the params metadata merging (see the byline).

1 Like

Ah yes, missed the layout set in the front-matter. Thanks!

1 Like

Thank you for all those references.

The resource bundles are a huge benefit, but the examples give “list of resources” whereas I need only one specific image here and there in the md file.

For an inexperienced HUGO user it is hard to extract the relevant code from the examples to just insert one single image.

Is my setup ok? -> Hugo v34, theme:docdock, content folder see green frame, md file front matter see purple area, layout see yellow area.

If it is ok, then what would be the code to insert the image “overview_i001.jpg” between the yadda-lines?

Thanks again for your efforts…

Using the Resources list is needed if you want to use the Image Processing feature. But if you want to simply insert the image, you can do it the old style:

{{<figure src="images/overview_i001.jpg">}}

Note the lack of “/” before images/...

1 Like

Thank you!
Since src=“images/…jpg” didn’t work I fiddled some relativity and found that src="…/images/…jpg" did it.

Now I have to check if it works online too…

1 Like

Ah of course… I misread your folder organization… basically you need to get the correct relative path.

1 Like

I just noticed that your image/ folder is not inside any bundle. A bundle is simply a style of organization where you folder contains a or In your case, the images are not in any folder. So the Resources based image fetching and manipulation wouldn’t even work… so using figure would be the only way to go.

If you ever want to use Resources for images, make sure it lives in the same directory as the or

1 Like

Yes. I will try with the bundle concept again…

If you don’t want to move the images into the bundle directory, you can even simply symlink it (this would work or not, depending on your OS… I have tested only on a GNU/Linux system) from inside the bundle directory.

I’ve been trying to build a section listing that can render the images from a set of pages, and coming up short since whenever I use .Content the image URLs are wrong (I get image.jpg instead of section/YY/MM/DD/image.jpg).

Any way to work around that?

Hi guys,
how to make this work with both Hugo and Github?
I have my documentation in markdown with images in the same folder. I would like to render it both with Hugo and Github…
I use Hugo V0.38 with bundles.
If I understood, I need to add some code in the markdown, such as:

{{ $logo := .Resources.GetByPrefix “logo” }}

But this won’t work with Github.

This has been deprecated. Use .GetMatch. See the Docs for more info.

Also please don’t cross post here and on Github. The Github repo issues serve as the bug tracker. This forum is for support.

@alexandros OK thanks and understood for the issue on Github.

But my question is, how do you keep compatibility with github when using code like GetMatch?
I was hoping to be able to reference my images with relative paths in markdown:

![alt text](myimage.jpg)

Page Bundles is not the same as plain Markdown syntax images.

There are 2 ways of going about it.

The shortcode way and the template way to call .Resources images.

The template way is not ideal for many images as it’s not very flexible.

The shortcode way is the most flexible and the one that is used more often and documented.

However both of these ways don’t work with markdown editors for image previews. And I suppose that this is what you mean by GitHub compatibility.

If you use plain markdown image syntax in your content Hugo will not find them if they’re not called with the above methods.

There are a couple of things you could do here but they might cost you in the long term if you have a large site.

  1. See my hack over here: Add a class to images

You can modify it to include a .Resources shortcode within the alt attribute of a markdown image.

Like this: ![{{% class %}}](1.jpg)

  1. And then perform a replaceRE to remove everything between the parentheses from .Content so that it’s not rendered when your Hugo site is generated.

It’s a bit of a sneaky and convoluted way of going about it but it would give you what you want. Markdown image previews and access to Hugo’s .Resources and image processing.

Now that was a long post…

Thanks a lot.
What I don’t understand is that the HTML code generated by Hugo seems to be compatible.
For example with these files:



![alt text](images/myimage.jpg)

This generates:

<img src="images/myimage.jpg" alt="alt text" />

The image is correctly served from

But the webpage doesn’t render the picture. Why?

It’s difficult to tell without looking at your site source.