HUGO

  • News
  • Docs
  • Themes
  • Showcase
  • Community
  • GitHub
gohugoio Star
  • About Hugo
    • Overview
    • What is Hugo
    • Hugo features
    • Static site generators
    • Hugo's security model
    • Hugo and the GDPR
    • License
  • Installation
    • Overview
    • macOS
    • Linux
    • Windows
    • BSD
  • Getting started
    • Overview
    • Quick start
    • Basic usage
    • Directory structure
    • Configuration
    • Configure markup
    • Glossary of terms
    • External learning resources
  • Quick reference
    • Overview
    • Emojis
    • Functions
    • Methods
    • Page collections
  • Content management
    • Overview
    • Organization
    • Page bundles
    • Content formats
    • Front matter
    • Build options
    • Page resources
    • Image processing
    • Shortcodes
    • Related content
    • Sections
    • Content types
    • Archetypes
    • Taxonomies
    • Summaries
    • Links and cross references
    • URL management
    • Menus
    • Static files
    • Table of contents
    • Comments
    • Multilingual
    • Markdown attributes
    • Syntax highlighting
    • Diagrams
    • Mathematics
  • Templates
    • Overview
    • Templating
    • Template lookup order
    • Base templates and blocks
    • Single page templates
    • List templates
    • Homepage template
    • Section templates
    • Taxonomy templates
    • Pagination
    • Content view templates
    • Partial templates
    • Shortcode templates
    • Menu templates
    • Data templates
    • RSS templates
    • Sitemap templates
    • Internal templates
    • Custom output formats
    • 404 page
    • Robots.txt
  • Functions
    • Overview
    • cast
    • collections
    • compare
    • crypto
    • data
    • debug
    • diagrams
    • encoding
    • fmt
    • global
    • go template
    • hugo
    • images
    • inflect
    • js
    • lang
    • math
    • openapi3
    • os
    • partials
    • path
    • reflect
    • resources
    • safe
    • strings
    • templates
    • time
    • transform
    • urls
  • Methods
    • Overview
    • Duration
    • Menu
    • Menu entry
    • Page
    • Pages
    • Resource
    • Shortcode
    • Site
    • Taxonomy
    • Time
  • Render hooks
    • Overview
    • Introduction
    • Code blocks
    • Headings
    • Images
    • Links
  • Hugo Modules
    • Overview
    • Configure Hugo modules
    • Use Hugo Modules
    • Theme components
  • Hugo Pipes
    • Overview
    • Introduction
    • Transpile Sass to CSS
    • PostCSS
    • PostProcess
    • JavaScript building
    • Babel
    • Asset minification
    • Concatenating assets
    • Fingerprinting and SRI hashing
    • Resource from string
    • Resource from template
  • CLI
  • Troubleshooting
    • Overview
    • Audit
    • Logging
    • Inspection
    • Deprecation
    • Performance
    • FAQs
  • Developer tools
    • Overview
    • Editor plugins
    • Front-ends
    • Search
    • Migrations
    • Other projects
  • Hosting and deployment
    • Overview
    • Hugo Deploy
    • Deploy with Rclone
    • Deploy with Rsync
    • Host on 21YunBox
    • Host on AWS Amplify
    • Host on Azure Static Web Apps
    • Host on Cloudflare Pages
    • Host on Firebase
    • Host on GitHub Pages
    • Host on GitLab Pages
    • Host on KeyCDN
    • Host on Netlify
    • Host on Render
  • Contribute
    • Overview
    • Development
    • Documentation
    • Themes
  • Maintenance
FUNCTIONS IMAGE FUNCTIONS

images.Filter

Applies one or more image filters to the given image resource.

Syntax

images.Filter FILTERS... IMAGE

Returns

images.ImageResource

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

Original

Zion National Park

Processed

Zion National Park

Image filters

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

images.AutoOrient
Returns an image filter that rotates and flips an image as needed per its EXIF orientation tag.
images.Brightness
Returns an image filter that changes the brightness of an image.
images.ColorBalance
Returns an image filter that changes the color balance of an image.
images.Colorize
Returns an image filter that produces a colorized version of an image.
images.Contrast
Returns an image filter that changes the contrast of an image.
images.Gamma
Returns an image filter that performs gamma correction on an image.
images.GaussianBlur
Returns an image filter that applies a gaussian blur to an image.
images.Grayscale
Returns an image filter that produces a grayscale version of an image.
images.Hue
Returns an image filter that rotates the hue of an image.
images.Invert
Returns an image filter that negates the colors of an image.
images.Opacity
Returns an image filter that changes the opacity of an image.
images.Overlay
Returns an image filter that overlays the source image at the given coordinates, relative to the upper left corner.
images.Padding
Returns an image filter that resizes the image canvas without resizing the image.
images.Pixelate
Returns an image filter that applies a pixelation effect to an image.
images.Process
Returns an image filter that processes the given image using the given specification.
images.Saturation
Returns an image filter that changes the saturation of an image.
images.Sepia
Returns an image filter that produces a sepia-toned version of an image.
images.Sigmoid
Returns an image filter that changes the contrast of an image using a sigmoidal function.
images.Text
Returns an image filter that adds text to an image.
images.UnsharpMask
Returns an image filter that sharpens an image.

See also

  • Filter

On this page

  • Example
  • Image filters

In this section

  • images.AutoOrient
  • images.Brightness
  • images.ColorBalance
  • images.Colorize
  • images.Config
  • images.Contrast
  • images.Filter
  • images.Gamma
  • images.GaussianBlur
  • images.Grayscale
  • images.Hue
  • images.Invert
  • images.Opacity
  • images.Overlay
  • images.Padding
  • images.Pixelate
  • images.Process
  • images.Saturation
  • images.Sepia
  • images.Sigmoid
  • images.Text
  • images.UnsharpMask
Last updated: February 3, 2024: Replace links to variable pages with links to method pages (126c323d)
Improve this page
By the Hugo Authors
Hugo Logo
  • File an Issue
  • Get Help
  • @GoHugoIO
  • @spf13
  • @bepsays

Netlify badge

 

Hugo Sponsors

 

The Hugo logos are copyright © Steve Francia 2013–2024.

The Hugo Gopher is based on an original work by Renée French.

  • News
  • Docs
  • Themes
  • Showcase
  • Community
  • GitHub
  • About Hugo
  • Installation
  • Getting started
  • Quick reference
  • Content management
  • Templates
  • Functions
  • Methods
  • Render hooks
  • Hugo Modules
  • Hugo Pipes
  • CLI
  • Troubleshooting
  • Developer tools
  • Hosting and deployment
  • Contribute
  • Maintenance