[SOlved] How to... insert image in my post?

support
1

Hi, I have a big question… how can I insert image in the post? where i need to put them? in witch directory?

thanks…

1 Like
2

how can I insert image in the post? where i need to put them? in witch directory?

With MarkDown formatting, like this:

![Example image](/static/image.png)

The images should be put in the static folder, which will be copied to the root of the website (so www.example.com/image.png) by Hugo. I don’t like that, and so I put them in the static/static folder, so their url is www.example.com/static/image.png.

6 Likes
3

You can organize /static if you like, as well. Say, /static/img or whatever.

3 Likes
4

Ok thanks you

5

Note also you can use html directly in your markdown files. If the simple Markdown format is not enough, that is.

6

And what if we want to add a bootstrap img class to the image element?

7

And what if we want to add a bootstrap img class to the image element?

8

Take a look at Hugo’s shortcodes.

9

I want to add that with hugo 0.16 the path to refer to the image is

[/img/image.png]

hugo will copy this image to

public/img/image.png

which makes sense although the actual path is static/img/image.png.

The markdown preview won’t be able to show the image.

1 Like
10

I am new to Hugo. I understand the preferred way is to put ALL images of ALL content into a common “static” folder (while possibly creating subdirectories for images below that static folder) and use absolute paths (starting with a ‘/’) in my markdown. I don’t like this because it disables subdirectories of my content to be self-contained. Why isn’t it possible to add an image subdirectory to each content subdirectory or put the images directly into the content directory? The benefit would for example be that md editors with preview functionality such as Visual Studio Code could directly show the images in their previews as you can use relative paths.
I observed that this seems to work when calling hugo serve with the “–renderToDisk” option. Why does this NOT work with hugo serving from memory? Is there any other drawback besides longer rendering times I will encounter when putting images directly below the content folder?

Thank you,
Christoph

11

Sorry, I just noticed that in general my attempt seems to work - even with hugo serving from memory. My fault was to name the directory “_image”. Subdirectories below “content” starting with an underscore seem to be ignored by hugo serving from memory while being copied to the outputdirectory when hugo renders to disk.