hugo/docs/content/en/functions/images/Filter.md

title	description	categories	keywords	action	toc
images.Filter	Applies one or more image filters to the given image resource.			aliases related returnType signatures methods/resource/Filter images.ImageResource images.Filter FILTERS... IMAGE	true

Apply one or more image filters to the given image.

To apply a single filter:

{{ with resources.Get "images/original.jpg" }}
  {{ with images.Filter images.Grayscale . }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

To apply two or more filters, executing from left to right:

{{ $filters := slice
  images.Grayscale
  (images.GaussianBlur 8)
}}
{{ with resources.Get "images/original.jpg" }}
  {{ with images.Filter $filters . }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

You can also apply image filters using the Filter method on a Resource object.

Example

{{ with resources.Get "images/original.jpg" }}
  {{ with images.Filter images.Grayscale . }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

{{< img src="images/examples/zion-national-park.jpg" alt="Zion National Park" filter="Grayscale" filterArgs="" example=true

}}

Image filters

Use any of these filters with the images.Filter function, or with the Filter method on a Resource object.

{{< list-pages-in-section path=/functions/images filter=functions_images_no_filters filterType=exclude >}}