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 index.md file and an images directory.
Also, I know I can use  to include an image, but I would like to just include all images.
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
.:
images/ _index.md next-to-last.md
./images:
im.png
I see the post “next-to-last.md” 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 index.md to call those template codes but, you can do it in your single.html too I think.
What short code did you use in your index.md 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.
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… :-/
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 }}
</div>
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.