Unable to use image filters

support
#1

{{ $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.

#2

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.

#3

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>
#4

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?

#5

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

#6

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) }}
#7

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.

#8

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.

#9

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.

#10

Can you post a code sample of it working?

#11

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

#12

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) }}

#13

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
#14

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.