CODEWITHSUNDEEP
hugo
Sorush
Sorush

Reputation: 4129

Hugo Error template: _default/single.html:20:16: executing "main" at <$img.Fill>: error calling Fill: *resources.genericResource is not an image

Prbolem

I put some of my images in /assets/images folder. Then in layouts/_default/single.html, I created a hero image section for different screen sizes, shown in the code below. The problem is that Hugo says "*resources.genericResource is not an image" while the type checking confirms it's an image. More interesting, it works if I add the below changes while Hugo is running in on my machine. But I stop and restart, it shows the error and doesn't come up.

Some notes

.Params.image: each post has the name of an image in the front matter like image: /images/bird.jpg

Some posts don't have a hero image because of that I skip this code if $img is invalid.

Hugo installed via Choco:

Hugo Static Site Generator v0.78.2-959724F0 windows/amd64 BuildDate: 2020-11-13T10:08:15Z

Code

<!-- layouts/_default/single.html-->
{{ $img := resources.GetMatch .Params.image }}
{{ if $img }}
{{ if eq $img.ResourceType "image" }}
    {{$hero := $img.Fill "568x400"}}
    {{$hero_sm := $img.Fill "768x400"}}
    {{$hero_md := $img.Fill "1024x400 q50"}}
    {{$hero_lg := $img.Resize "x400 q50"}}
    
    <style>
        .post__hero{
            background-image: url('{{ $hero.Permalink }}');
        }
        @media (min-width: 568px) {
            .post__hero{
            background-image: url('{{ $hero_sm.Permalink }}');
        }
        }
        @media (min-width: 768px) {
            .post__hero{
            background-image: url('{{ $hero_md.Permalink }}');
        }
        }
        @media (min-width: 1024px) {
            .post__hero{
            background-image: url('{{ $hero_lg.Permalink }}');
        }
        } 
    </style>
    <div class="single-image post__hero"></div>
{{end}}
{{end}}

Upvotes: 3

Views: 955

Answers (1)

Sorush
Sorush

Reputation: 4129

Finally found it. The problem was that Hugo doesn't support image processing for WebP format. Some of my images were WebP. Probably because of that the two conditions:

{{ if $img }}
{{ if eq $img.ResourceType "image" }}

were passed for WebP images, but the functions Fill and Resize created the error. So, I had to replace them with JPEG format.

Upvotes: 2

Related Questions