WebP: resources.genericResource is not an image

support
1

I have the following code in layouts/_default/single.html:

{{ with .Resources.GetMatch "header-image.jpg" }}
	<img src="header-image.jpg" class="post-header-image" width="{{ .Width }}" height="{{ .Height }}">
{{- end }}
{{ with .Resources.GetMatch "header-image.png" }}
	<img src="header-image.png" class="post-header-image" width="{{ .Width }}" height="{{ .Height }}">
{{- end }}

It displays jpg image, and if it does not exist, it loads a png file (there’s always one or the other).

When I attempt to extend this to include webp:

{{ with .Resources.GetMatch "header-image.webp" }}
	<img src="header-image.webp" class="post-header-image" width="{{ .Width }}" height="{{ .Height }}">
{{- end }}
{{ with .Resources.GetMatch "header-image.jpg" }}
	<img src="header-image.jpg" class="post-header-image" width="{{ .Width }}" height="{{ .Height }}">
{{- end }}
{{ with .Resources.GetMatch "header-image.png" }}
	<img src="header-image.png" class="post-header-image" width="{{ .Width }}" height="{{ .Height }}">
{{- end }}

I get an error that (WebP) resource is not an image:

Failed to render pages: render of "page" failed: "(...)/layouts/_default/single.html:23:69": execute of template failed: template: _default/single.html:23:69: executing "main" at <.Width>: error calling Width: *resources.genericResource is not an image

The error is caused by .Width and .Height. Without them Hugo does not error out and the webp image is displayed correctly.

What do I need to do, in order to take advantage of .Width and .Height when working with webp images?

2

resources.genericResource is not an image

Share the image.

3

There you go.

header-image
header-image1280×400 10.1 KB 

$ file header-image.webp
header-image.webp: RIFF (little-endian) data, Web/P image
$ mimetype header-image.webp
header-image.webp: image/webp
$ webpinfo header-image.webp
File: header-image.webp
RIFF HEADER:
  File size:  10362
Chunk VP8X at offset     12, length     18
  ICCP: 1
  Alpha: 0
  EXIF: 0
  XMP: 0
  Animation: 0
  Canvas size 1280 x 400
Chunk ICCP at offset     30, length    680
Chunk VP8  at offset    710, length   9652
  Width: 1280
  Height: 400
  Alpha: 0
  Animation: 0
  Format: Lossy (1)
No error detected.

For what’s it worth, Hugo version that I have currently installed might be somewhat older than the most recent one. Maybe here lies the culprit?

$ hugo version  
hugo v0.82.1+extended linux/amd64 BuildDate=2021-09-02T16:07:05Z VendorInfo=debian:0.82.1-1
4

WebP support was introduced in v0.83.0.

https://gohugo.io/news/0.83.0-relnotes/

Also, you are losing one of the benefits of page resources: portable links. Use .RelPermalink instead of hardcoding the image path:

{{ with .Resources.GetMatch "header-image.webp" }}
  <img src="{{ .RelPermalink }}" class="post-header-image" width="{{ .Width }}" height="{{ .Height }}">
{{- end }}
3 Likes
5

Okay, I manually installed the latest release, and it works like a charm now.
Thank you for your help @jmooring, and for the tip about relative permalinks. :beers:

6

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