Hugo: Add $image.Filter (with Grayscale , Gaussian Blur etc.)

[thelightstain]

Is is possible to have more processing methods from disintegration/imaging available to hugo?

First one that comes to mind is Gaussian Blur:

dstImage := imaging.Blur(srcImage, 0.5) --> {{ $image := $resource.Blur "0.5" }}

The use case is generating smooth looking placeholders for lazy loading and avoiding an extra call by inlining the src.

{{ $resource := .Resources.GetMatch "images/image.jpg" }}
{{ $lazyLoadImage := $resource.Blur "2.5" }}
{{ $lazyLoadImage = $lazyLoadImage.Content | base64Encode }}
<img class="lazy" data-src="{{ $lazyLoadImage.RelPermalink }}" alt=""
  src='{{ print "data:image/jpeg;base64," $lazyLoadImage | safeURL }}' />

Thank you!

[bep]

We will possibly add a $image.Filter filter1, filter2, but I don't think we're going to add Blur as a separate method.

[thelightstain]

Awesome, thank you!

[bep]

See: https://github.com/disintegration/gift

[bep]

For reference, I think we could add most/all of these:

"brightness_increase":  gift.Brightness(30),
        "brightness_decrease":  gift.Brightness(-30),
        "contrast_increase":    gift.Contrast(30),
        "contrast_decrease":    gift.Contrast(-30),
        "saturation_increase":  gift.Saturation(50),
        "saturation_decrease":  gift.Saturation(-50),
        "gamma_1.5":            gift.Gamma(1.5),
        "gamma_0.5":            gift.Gamma(0.5),
        "gaussian_blur":        gift.GaussianBlur(1),
        "unsharp_mask":         gift.UnsharpMask(1, 1, 0),
        "sigmoid":              gift.Sigmoid(0.5, 7),
        "pixelate":             gift.Pixelate(5),
        "colorize":             gift.Colorize(240, 50, 100),
        "grayscale":            gift.Grayscale(),
        "sepia":                gift.Sepia(100),
        "invert":               gift.Invert(),
        "mean":                 gift.Mean(5, true),
        "median":               gift.Median(5, true),
        "minimum":              gift.Minimum(5, true),
        "maximum":              gift.Maximum(5, true),
        "hue_rotate":           gift.Hue(45),
        "color_balance":        gift.ColorBalance(10, -10, -10),

Which in, my head, would translate to this in Hugo templates:

{{ $filters := slice ( images.GaussianBlur 1 )(images.Saturate 50)  }}
{{ $blurredAndSaturated := $image.Filter $filters }}

Or

{{ $grayscale := $image.Filter (images.Grayscale) }}

Does the above make sense? I have put the filter functions in the existing images namespace, which I guess makes sense.

And for people who want to ask why we're not just adding these as methods on image (e.g. $image.Grayscale), the main answer to that is obviously better/faster to combine these filters in one go.

/cc @regisphilibert @onedrawingperday @moorereason @kaushalmodi and gang.

[onedrawingperday]

@bep Looks good. Never thought that Hugo would provide image filters. 👍

[regisphilibert]

Looks great! Want to to rely solely on Hugo for most image processing...

[bep]

Never thought that Hugo would provide image filters.

They come at a fairly low implementation cost and fits nicely into what we have. Many of these are a little "special use", but I think many will find the grayscale useful to create BW blogs... and the blur filters for preview placeholders etc.

[thelightstain]

This is great, and the template code looks clean and readable, thank you @bep!