Convert 'thumbnail' image to webp format

support
1

I’m trying to upload an image to convert it to webp format.

FrontMatter looks like this:

---
title: "My first post"
thumbnail: "/path/to/my_image.jpg"
---

In Hugo Template, I’m doing this

{{ if (resources.GetMatch .Params.thumbnail) }}
   <img src="{{ ((resources.GetMatch .Params.thumbnail).Fit `355x200 png q100`).RelPermalink }}" />
{{ end }}

But there are no results, <img src=... is not displayed
It’s like resources.GetMatch can’t load the thumbnail image.

Does anyone have a trick to achieve this I am overlooking?

Environment Details

$ hugo env
hugo v0.121.1-00b46fed8e47f7bb0a85d7cfc2d9f1356379b740+extended windows/amd64 BuildDate=2023-12-08T08:47:45Z VendorInfo=gohugoio
GOOS="windows"
GOARCH="amd64"
GOVERSION="go1.21.5"
github.com/sass/libsass="3.6.5"
github.com/webmproject/libwebp="v1.3.2"
2

See the requesting help guidelines

3

resources.GetMatch returns a resource, not a URL. Use the .Permalink method on the returned resource, as shown in the documentation for Fit.

And if you want a webp image, you should perhaps not use png as target format.

4

Hmm, I’m a beginner, there’s something I’m missing.

As shown in the documentation for Fit, I do

{{ with resources.Get .Params.thumbnail }}
  {{ with .Fit "200x200" }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

But unfortunately same result, <img src=... is not displayed

5

Well, that’s not what you posted first.

As @Arif said: Post a link to your repository. Without seeing all of your code, no one can help you reliably. Perhaps resources.Get doesn’t return a resource because the “/path/to/my_image.jpg” doesn’t point to where you think it points? We can’t know, we can’t check.

6

Make sure to keep the image you want Hugo to process in assets directory. The image processing will work only if the resource is present in assets directory or a directory mounted to assets directory. More information here.