Images in posts

I am super new to Hugo and trying it out. One thing I would really like to do is, for each post, to have a sub-directory that contains images. Then when the post is rendered (let’s say single page), show all images from the sub-directory in the post.

I know I can create a post directory name then within there have an file and an images directory.

Also, I know I can use ![Example image](/static/image.png) to include an image, but I would like to just include all images.

Again, sorry, new at this…

New functionality released over the holiday should help you out:

Yes, I did find that! I read through it a few times and tried some things out but am not clear how it to put the functionality in the single page template.

So, I did try it. The files/dirs are:

$ ls -R


I see the post “” in my posts (both in the list and can click on it to get the single page view). But I don’t see the image on the page.

So, this makes me think the template’s single page doesn’t have the right codes on it and I tried adding:

{{ with .Resources.ByType "image" }}
{{ end }}

into the template but nothing happened, and I assume there must be more I need to put in there.

So, I guess the question is, what codes do I need to add in the template in order to include all images in the image directory (??).

[edit… I am currently trying the mainroad theme, forgot to mention. If there is another similar that is more 0.32’ish I am game for that.]

Not sure where those images are in your project or whether this new functionality works for it (meaning, a general index folder rather than one under the post’s folder). As for me, I used a shortcode in a post’s to call those template codes but, you can do it in your single.html too I think.

├── post
│   ├──
│   ├──
│   ├── 2017-09-02-Japan-PSA-Fall-is-Hornet-Season
│   │   ├──
│   │   └── kenpei-vespa_mandarinia_japonica-1.jpg

What short code did you use in your file to get the images to show up in the post? I tried putting in the short code I posted above but that didn’t work.

So, what does your file contain?

See this post. I put some links there to my repo.

I was reading through your post and I think it is to include a single image. What I want is the ability display all images in the directory.

So, based on my understanding of things, I added the following to my single.html in the theme I have:

                {{ $image := .Resources.ByType "image" }}
                {{ with $image }}
                        {{ $image.Resize "200x" }}
                {{ end }}

Then I have a jpg image in the directory but I see an error

ERROR 2018/01/04 11:19:31 Error while rendering "page" in "posts/2017/another-2017/": template: theme/_default/single.html:37:12: executing "theme/_default/single.html" at <$image.Resize>: can't evaluate field Resize in type []resource.Resource
ERROR 2018/01/04 11:19:31 Error while rendering "page" in "post/2017/another-2017/": template: theme/_default/single.html:37:12: executing "theme/_default/single.html" at <$image.Resize>: can't evaluate field Resize in type []resource.Resource
Total in 45 ms

Based on my reading I think the Resize is new for image resources, and given the .Resources.ByType in the template I was thinking all $image would then have the .Resize functionality.

So, how would I change the code in the template in order to load all images and auto resize to 200x?

You might have the functionality in the post you noted, and so I might be not understanding something… :-/

Mine’s for a single image yes, and I’m sorry I have not experimented with that yet.

Bep made a test site and repo when he released this. You might get an understanding looking at these:

Well, after a lot of tweaking and reading I came up with the following which basically does what I want:

                <div style="text-align: center;">
                {{ with .Resources.ByType "image" }}
                    {{ range . }}
                        {{ $scaled := .Resize "x300 q90" }}
                        <img style="margin: 1px 0 1px 0 ;" src="{{ $scaled.Permalink }}">
                    {{ end }}
                {{ end }}

The only thing I would probably want beyond this is to have the Resources.ByType only look in a sub-directory of the local directory (e.g., only look in “images/”) but this will work for now.

Thanks for your patience!