mirror of
https://github.com/gohugoio/hugo.git
synced 2024-07-07 09:36:03 +00:00
![Bjørn Erik Pedersen](/assets/img/avatar_default.png)
``` git subtree add --prefix=docs/ https://github.com/gohugoio/hugoDocs.git master --squash ``` Closes #11925
1.6 KiB
1.6 KiB
title | description | categories | keywords | action | toc | ||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Filter | Applicable to images, applies one or more image filters to the given image resource. |
|
true |
Apply one or more image filters to the given image.
To apply a single filter:
{{ with resources.Get "images/original.jpg" }}
{{ with .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 .Filter $filters }}
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
{{ end }}
{{ end }}
You can also apply image filters using the images.Filter
function.
{{% include "methods/resource/_common/global-page-remote-resources.md" %}}
Example
{{ with resources.Get "images/original.jpg" }}
{{ with .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 Filter
method.
{{< list-pages-in-section path=/functions/images filter=functions_images_no_filters filterType=exclude >}}