Process (resize) and display images in page bundle

support
1

I created the following loop on a page:

        {{ $counter := 0 }}
        {{ with .Resources.ByType "image" }}
            {{ range . }}
                <div class="col">
                    <img class="img-fluid" src="{{ .Resize "200x" }}">
                </div>
                {{ $counter = add $counter 1 }}
            {{ end }}
        {{ end }}

Yet the image remains completely unmanipulated. I have tried various attempts, following the examples in the docs (Image Processing | Hugo), yet I always just end up with the original image in img src.

Can someone provide a working example please? I just do not grok the Hugo docs, I guess.

hugo v0.91.2+extended darwin/amd64 BuildDate=unknown
GOOS="darwin"
GOARCH="amd64"
GOVERSION="go1.17.6"
2

Assuming this content structure:

content
└── tests/
    └── test-1/
        ├── a.jpg
        ├── b.jpg
        ├── c.jpg
        ├── d.jpg
        └── index.md

layouts/_default/single.html

{{ $counter := 0 }}
{{ with .Resources.ByType "image" }}
  {{ $counter = len . }}
  {{ range . }}
    {{ with .Resize "200x" }}
      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
    {{ end }}
  {{ end }}
{{ end }}
{{ $counter }}

If you don’t care about knowing how many images there are:

{{ range .Resources.ByType "image" }}
  {{ with .Resize "200x" }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}
3

Magical. Thank you, I understand where my mental gap was.

4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.