Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add $image.Filter (with Grayscale , Gaussian Blur etc.) #6255

Closed
thelightstain opened this issue Aug 22, 2019 · 8 comments · Fixed by #6270

Comments

@thelightstain
Copy link

commented Aug 22, 2019

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

This comment has been minimized.

Copy link
Member

commented Aug 22, 2019

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

This comment has been minimized.

Copy link
Author

commented Aug 22, 2019

Awesome, thank you!

@bep

This comment has been minimized.

Copy link
Member

commented Aug 22, 2019

@bep bep changed the title Add Gaussian Blur to Image Processing Methods Add $image.Filter (with Gaussian Blur etc.) Aug 22, 2019

@bep bep added the Enhancement label Aug 22, 2019

@bep bep added this to the v0.57.2 milestone Aug 22, 2019

@bep bep changed the title Add $image.Filter (with Gaussian Blur etc.) Add $image.Filter (with Grayscale , Gaussian Blur etc.) Aug 22, 2019

@bep bep modified the milestones: v0.57.2, v0.58 Aug 22, 2019

@bep

This comment has been minimized.

Copy link
Member

commented Aug 25, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Aug 25, 2019

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

@regisphilibert

This comment has been minimized.

Copy link

commented Aug 25, 2019

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

@bep

This comment has been minimized.

Copy link
Member

commented Aug 25, 2019

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 comment has been minimized.

Copy link
Author

commented Aug 25, 2019

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

bep added a commit to bep/hugo that referenced this issue Aug 26, 2019
bep added a commit to bep/hugo that referenced this issue Aug 26, 2019
Add $image.Filter
With this you can do variants of this:

```
{{ $img := resources.Get "images/misc/3-jenny.jpg" }}
{{ $img := $img.Resize "300x" }}
{{ $g1 := $img.Filter images.Grayscale }}
{{ $g2 := $img | images.Filter (images.Saturate 30) (images.GaussianBlur 3) }}
```

Fixes gohugoio#6255
@bep bep referenced this issue Aug 26, 2019
bep added a commit to bep/hugo that referenced this issue Aug 26, 2019
Add $image.Filter
With this you can do variants of this:

```
{{ $img := resources.Get "images/misc/3-jenny.jpg" }}
{{ $img := $img.Resize "300x" }}
{{ $g1 := $img.Filter images.Grayscale }}
{{ $g2 := $img | images.Filter (images.Saturate 30) (images.GaussianBlur 3) }}
```

Fixes gohugoio#6255
bep added a commit to bep/hugo that referenced this issue Aug 27, 2019
Add $image.Filter
With this you can do variants of this:

```
{{ $img := resources.Get "images/misc/3-jenny.jpg" }}
{{ $img := $img.Resize "300x" }}
{{ $g1 := $img.Filter images.Grayscale }}
{{ $g2 := $img | images.Filter (images.Saturate 30) (images.GaussianBlur 3) }}
```

Fixes gohugoio#6255
bep added a commit to bep/hugo that referenced this issue Aug 28, 2019
Add $image.Filter
With this you can do variants of this:

```
{{ $img := resources.Get "images/misc/3-jenny.jpg" }}
{{ $img := $img.Resize "300x" }}
{{ $g1 := $img.Filter images.Grayscale }}
{{ $g2 := $img | images.Filter (images.Saturate 30) (images.GaussianBlur 3) }}
```

Fixes gohugoio#6255
bep added a commit to bep/hugo that referenced this issue Aug 28, 2019
Add $image.Filter
With this you can do variants of this:

```
{{ $img := resources.Get "images/misc/3-jenny.jpg" }}
{{ $img := $img.Resize "300x" }}
{{ $g1 := $img.Filter images.Grayscale }}
{{ $g2 := $img | images.Filter (images.Saturate 30) (images.GaussianBlur 3) }}
```

Fixes gohugoio#6255
bep added a commit to bep/hugo that referenced this issue Aug 28, 2019
Add $image.Filter
With this you can do variants of this:

```
{{ $img := resources.Get "images/misc/3-jenny.jpg" }}
{{ $img := $img.Resize "300x" }}
{{ $g1 := $img.Filter images.Grayscale }}
{{ $g2 := $img | images.Filter (images.Saturate 30) (images.GaussianBlur 3) }}
```

Fixes gohugoio#6255
bep added a commit to bep/hugo that referenced this issue Aug 28, 2019
Add $image.Filter
With this you can do variants of this:

```
{{ $img := resources.Get "images/misc/3-jenny.jpg" }}
{{ $img := $img.Resize "300x" }}
{{ $g1 := $img.Filter images.Grayscale }}
{{ $g2 := $img | images.Filter (images.Saturate 30) (images.GaussianBlur 3) }}
```

Fixes gohugoio#6255
bep added a commit to bep/hugo that referenced this issue Aug 28, 2019
Add a set of image filters
With this you can do variants of this:

```
{{ $img := resources.Get "images/misc/3-jenny.jpg" }}
{{ $img := $img.Resize "300x" }}
{{ $g1 := $img.Filter images.Grayscale }}
{{ $g2 := $img | images.Filter (images.Saturate 30) (images.GaussianBlur 3) }}
```

Fixes gohugoio#6255
bep added a commit to bep/hugo that referenced this issue Aug 28, 2019
Add a set of image filters
With this you can do variants of this:

```
{{ $img := resources.Get "images/misc/3-jenny.jpg" }}
{{ $img := $img.Resize "300x" }}
{{ $g1 := $img.Filter images.Grayscale }}
{{ $g2 := $img | images.Filter (images.Saturate 30) (images.GaussianBlur 3) }}
```

Fixes gohugoio#6255
bep added a commit to bep/hugo that referenced this issue Aug 28, 2019
Add a set of image filters
With this you can do variants of this:

```
{{ $img := resources.Get "images/misc/3-jenny.jpg" }}
{{ $img := $img.Resize "300x" }}
{{ $g1 := $img.Filter images.Grayscale }}
{{ $g2 := $img | images.Filter (images.Saturate 30) (images.GaussianBlur 3) }}
```

Fixes gohugoio#6255
bep added a commit to bep/hugo that referenced this issue Aug 28, 2019
Add a set of image filters
With this you can do variants of this:

```
{{ $img := resources.Get "images/misc/3-jenny.jpg" }}
{{ $img := $img.Resize "300x" }}
{{ $g1 := $img.Filter images.Grayscale }}
{{ $g2 := $img | images.Filter (images.Saturate 30) (images.GaussianBlur 3) }}
```

Fixes gohugoio#6255
bep added a commit to bep/hugo that referenced this issue Aug 28, 2019
Add a set of image filters
With this you can do variants of this:

```
{{ $img := resources.Get "images/misc/3-jenny.jpg" }}
{{ $img := $img.Resize "300x" }}
{{ $g1 := $img.Filter images.Grayscale }}
{{ $g2 := $img | images.Filter (images.Saturate 30) (images.GaussianBlur 3) }}
```

Fixes gohugoio#6255

@bep bep closed this in 823f53c Aug 28, 2019

bep added a commit that referenced this issue Sep 4, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.