Image processing within range in Hugo

Question

I'm trying to apply some image processing to an image I get from page's metadata. I have a range of posts and this works:

{{ range sort (where .Site.Pages ".Params.layout" "playlist") ".Params.sort" }}
    <div class="w-full max-w-sm bg-gray-900 hover:bg-brand border border-gray-900 rounded-lg shadow">
        <a href="{{ .Params.permalink }}">
            <img class="rounded-t-lg" src='{{ .Params.cover }}' alt="{{ .Title }}" />
        </a>
        <div class="px-5 mt-4 pb-5 text-center">
             <span class="text-lg mt-8 text-gray-200">{{ .Params.description }}</span>  
        </div>
    </div>
{{ end }}

So, my image is available as {{ .Params.cover }}, but I can't quite nail the syntax to apply some processing to it. I can access the image URL like so:

{{ $image := resources.Get .Params.cover }}
<p>{{ $image }}</p>

I've tried resizing it in a couple of ways:

<img class="rounded-t-lg" src='{{  $image.Resize "500x" }}' alt="{{ .Title }}" />

<img class="rounded-t-lg" src='{{ with $image.Resize "500x" }}{{ . }}{{ end }}' alt="{{ .Title }}" />

I've also tried outside the <img/> element like so:

{{ $image := resources.Get .Params.cover }}
{{ $image := $image.Resize "500x" }}
<p>{{ $image }}</p>
<a href="{{ .Params.permalink }}">
    <img class="rounded-t-lg" src='{{ $image }}' alt="{{ .Title }}" />
</a>

In all of these cases, image does get rendered and I get no errors from hugo, but at its original size (1080x1080), not 500x500. So, what am I doing wrong?

score 0 · Answer 1 · answered Mar 02 '23 at 13:46

You should use GetMatch instead of Get.

{{ $image := resources.GetMatch .Params.cover }}

Additionally, you should make sure that the assetDir is set correctly (you can do so in your config):

assetDir: static

Source/more info: https://hugocodex.org/blog/resize-all-images/

Image processing within range in Hugo

1 Answers1