Unable to use image filters

{{ $filters := slice (images.GaussianBlur 6) (images.Pixelate 8) }}

I have this line in my code right now. Seems benign enough right?


ERROR 2020/01/26 22:09:46 Failed to render pages: render of "home" failed: "F:\WEB\hugo\artwebsite\site\layouts\index.html:17:25": execute of template failed: template: index.html:17:25: executing "main" at <images>: can't evaluate field GaussianBlur in type interface {}
github.com/gohugoio/hugo/hugolib.(*Site).renderPages
       /root/project/hugo/hugolib/site_render.go:103
github.com/gohugoio/hugo/hugolib.(*Site).render
       /root/project/hugo/hugolib/site.go:1161
github.com/gohugoio/hugo/hugolib.(*HugoSites).render
       /root/project/hugo/hugolib/hugo_sites_build.go:308
github.com/gohugoio/hugo/hugolib.(*HugoSites).Build.func4
       /root/project/hugo/hugolib/hugo_sites_build.go:127
runtime/trace.WithRegion
       /usr/local/go/src/runtime/trace/annotation.go:137
github.com/gohugoio/hugo/hugolib.(*HugoSites).Build
       /root/project/hugo/hugolib/hugo_sites_build.go:129
github.com/gohugoio/hugo/commands.(*commandeer).rebuildSites
       /root/project/hugo/commands/hugo.go:794
github.com/gohugoio/hugo/commands.(*commandeer).handleEvents
       /root/project/hugo/commands/hugo.go:1086
github.com/gohugoio/hugo/commands.(*commandeer).newWatcher.func1
       /root/project/hugo/commands/hugo.go:864
runtime.goexit
       /usr/local/go/src/runtime/asm_amd64.s:1337
INFO 2020/01/26 22:09:51 Received System Events: ["F:\\WEB\\hugo\\artwebsite\\site\\layouts\\index.html": WRITE "F:\\WEB\\hugo\\artwebsite\\site\\layouts\\index.html": WRITE]

I am unfortunately getting this error. I cant find a single reference to this issue online. I just updated my hugo version to the newest one too.

Hi there,

I am unable to reproduce your error. Do you have your code somewhere we can have a look at? Have a read about Requesting Help to see how to make it easier to get help.

Sure, the full working snippet is here. I’m trying to add a filter to one of these images. I keep getting the same error about the image interface no matter which way I include the sample snippets from the docs.

<section class="archived-artwork">
    <h2 class="archived-artwork_intro-title">From the Archives</h2>
    
    <div class="archived-artwork_banner">
        {{$r := shuffle (union nil (.Pages)) }}
        {{ range first 1 (shuffle (where $r ".Params.archive_bg" "!=" nil )) }}
                
                {{ with .Params.archive_bg }}
                
                    {{ $imageResource := ($.Site.GetPage "section" "uploads").Resources.GetMatch (strings.TrimPrefix "/uploads/" . ) }}
                    
                    {{ $xl := $imageResource.Fill "1440x980"}}
                    {{ $lg := $imageResource.Fill "720x540" }}
                    {{ $md := $imageResource.Fill "1440x980" }}
                    {{ $sm := $imageResource.Fill "767x575" }}

                    <picture>
                        <source srcset="{{$lg.RelPermalink}} 1x, {{$xl.RelPermalink}} 2x" media="(min-width: 992px)">
                        <source srcset="{{$md.RelPermalink}} 1x, {{$lg.RelPermalink}} 2x" media="(min-width: 400px)">
                        <source srcset="{{$sm.RelPermalink}} 1x, {{$md.RelPermalink}} 2x" media="(min-width: 320px)">
                        <img class="archived-artwork_background" src="{{ $lg.RelPermalink }}" />
                    </picture>
                {{ end }}
                <a class="archived-thumbnail_block" href="{{.Permalink}}" title="View {{.Title}}">
                    <div class="archived-thumbnail_content">
                        {{ with .Params.thumbnail }}
                        {{ $imageResource := ($.Site.GetPage "section" "uploads").Resources.GetMatch (strings.TrimPrefix "/uploads/" . ) }}
                        
                            {{ $xl := $imageResource.Resize "1440x" }}
                            {{ $lg := $imageResource.Resize "720x" }}
                            {{ $md := $imageResource.Resize "1440x" }}
                            {{ $sm := $imageResource.Resize "767x" }}

                            <picture>
                                <source srcset="{{$lg.RelPermalink}} 1x, {{$xl.RelPermalink}} 2x" media="(min-width: 992px)">
                                <source srcset="{{$md.RelPermalink}} 1x, {{$lg.RelPermalink}} 2x" media="(min-width: 400px)">
                                <source srcset="{{$sm.RelPermalink}} 1x, {{$md.RelPermalink}} 2x" media="(min-width: 320px)">
                                <img class="archived-thumbnail_image" src="{{ $lg.RelPermalink }}" />
                            </picture>
                        {{ end }}

                        <span class="archived-thumbnail_title">
                            {{.Title}}
                        </span>

                        {{with .Params.release_date}}
                            <span class="archived-thumbnail_releasedate">ORIGINALLY RELEASED: {{dateFormat "January 2006" .}}</span>
                        {{end}}
                    </div>
                </a>
        {{ end }}
    </div>
</section>

I can’t really test your snippet as I don’t know what’s going on in the rest of your site.

Where are you putting the $filters line? How are you applying the filters to the image? Is an $imageResource always available, ie are you sure that .GetMatch always returns a match?

So do you want access to my entire git repo?

This line should work regardless of where it’s located in the code.

{{ $filters := slice (images.GaussianBlur 6) (images.Pixelate 8) }}

It is my understanding from the limited resources that we do have in the docs that the filters have a couple of different ways to be applied, and the above snippet isn’t reliant on any other resources.

I did make sure that the image exists beforehand, but it does not seem to be needed to simply access images

Just tried running this code on a different machine, different OS, Hugo v0.62.2 and still got the same error.

From the docs, I tried this:

{{ $imageResource := ($.Site.GetPage "section" "uploads").Resources.GetMatch (strings.TrimPrefix "/uploads/" . ) }}
{{ $imageResource := $imageResource | images.Filter (images.GaussianBlur 6) (images.Pixelate 8) }}

I suspect you need a newer Hugo version. the filter funcs was added recently.And if you think you have a recent Hugo versio, I would double check it by running hugo version.

Hey Bep,

Thanks for the reply. I was thinking that was possible too… My current version is: Hugo Static Site Generator v0.62.2/extended darwin/amd64 BuildDate: unknown. I will try updating it to see if that helps.

Edit: Upgrading didn’t fix the issue.

And it does work. For my site. I tested that one line on all versions from 0.58.0, when it was first introduced, up to yesterday’s 0.63.2. They all work. Which means there’s probably something wrong on your end.

Can you post a code sample of it working?

How about, you post your site sample so we can reproduce your error? That’s how Requesting Help works.

Okay, if that helps then here is the full repo: https://github.com/lostPixels/artwebsite

I did not commit the code causing the error, to reproduce I would simply add this line anywhere in the code base. {{ $filters := slice (images.GaussianBlur 6) (images.Pixelate 8) }}

It still doesn’t give me any errors.

Your entire site is quite large (I stopped the download at 600MB), so here’s what I did instead:

Generate a new Hugo site.

Grab the following files:

layouts
├── _default
│   └── baseof.html
├── index.html
├── partials
│   └── archive-block.html
└── shortcodes
    └── img.html

content
├── Digital Art
│   ├── _index.md
│   └── summer-drive.md
├── _index.md
└── uploads
    ├── _index.md
    ├── sd-1.jpg
    └── summer-drive.png

config.toml

Remove calls to missing partials.

In archive-block.html

<section class="archived-artwork">
    <h2 class="archived-artwork__intro-title">From the Archives</h2>
    
    <div class="archived-artwork__banner">
        {{$r := site.RegularPages }} 
        <!-- see https://gohugo.io/variables/page/#pages-compared-to-sitepages -->
        
        {{ range first 1 (shuffle (where $r ".Params.archive_bg" "!=" nil )) }}

            {{ with .Params.archive_bg }}
                {{ $imageResource := ($.Site.GetPage "section" "uploads").Resources.GetMatch (strings.TrimPrefix "/uploads/" . ) }}
                <img class="archived-artwork__background" src="{{ $imageResource.RelPermalink }}" />

                {{ $filters := slice (images.GaussianBlur 6) (images.Pixelate 8) }}                    
                {{ $img2 := $imageResource | images.Filter $filters }}
                <img class="archived-artwork__background" src="{{ $img2.RelPermalink }}" />
            {{ end }}
        {{ end }}
    </div>
</section>

tested on the following versions:

hugo version

Hugo Static Site Generator v0.63.2-934EE21F/extended linux/amd64 BuildDate: 2020-01-27T12:20:42Z
Hugo Static Site Generator v0.63.2-934EE21F linux/amd64 BuildDate: 2020-01-27T12:13:19Z

Hugo Static Site Generator v0.62.0-6608F155/extended linux/amd64 BuildDate: 2019-12-23T10:30:51Z
Hugo Static Site Generator v0.61.0-9B445B9D/extended linux/amd64 BuildDate: 2019-12-11T08:33:29Z

The result, when navigating to http://localhost:1313/ is as expected: two images, the second one with filters applied to it.

1 Like

With the help of @pointyfar I was able to track this down. I did have the newest version of Hugo installed, but I started my site with the Victor Hugo starter and that has a separate version of Hugo that’s included through npm. That other version was not up to date. Not an easy thing to track down and I appreciate the support.