Processing images in Hugo

Question

I am building a website in Hugo for a designer. It includes a portfolio with images in each post.

I figure the easiest way to manage this is by using page bundles. That is, including images in the folder of each post, and have Hugo automatically place all the images in that page bundle, into a gallery.

I was able to do this with the following code taken from Hugo docs. In single.html:

{{ with .Resources.ByType "image" }}
{{ range . }}
<img src="{{ .RelPermalink }}"> 
{{ end }}
{{ end }}

What this does is takes all the image files in the page bundle, and renders all of them.

I've noticed the images don't get processed in any way though. How would I go about adding something like this:

{{ $image.Resize "600x q50" }}

Thank you.

Answer 1

Try this.

{{ $img := .Resources.GetMatch "name-of-image.png" }}
{{ $img := $img.Resize "600x400" }}

Answer 2

{{ with .Resources.ByType "image" }}
    {{ range . }}
        {{ $img := (.Resize "600x q50") }}
        <img src="{{ $img.RelPermalink }}"/>
    {{ end }}
{{ end }}