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

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.

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

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

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

[image] muashraf: And what if we want to add a bootstrap img class to the image element? And what if we want to add a bootstrap img class to the image element?

[image] muashraf: And what if we want to add a bootstrap img class to the image element? Take a look at Hugo’s shortcodes.

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.

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

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.

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

support

digitalcraftsman June 21, 2016, 2:41pm 8

Take a look at Hugo’s shortcodes.

Topic		Replies	Views
Add image url support	3	2625	October 17, 2018
How to add images support images	4	1277	June 24, 2024
Image path support	13	62286	March 8, 2019
Problem with images in my Markdown file support	4	1226	November 4, 2022
All about images - is there a better tutorial or guide? support	2	1198	October 6, 2021

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

Related topics