HUGO

  • News
  • Docs
  • Themes
  • Showcase
  • Community
  • GitHub
Star

What's on this Page

  • Image Filters
  • Other Functions
FUNCTIONS

Image Functions

The images namespace provides a list of filters and other image related functions.

Image Filters

See images.Filter for how to apply these filters to an image.

Overlay

Overlay creates a filter that overlays the source image at position x y, e.g:

{{ $logoFilter := (images.Overlay $logo 50 50 ) }}
{{ $img := $img | images.Filter $logoFilter }}

A shorter version of the above, if you only need to apply the filter once:

{{ $img := $img.Filter (images.Overlay $logo 50 50 )}}

The above will overlay $logo in the upper left corner of $img (at position x=50, y=50).

Brightness

Brightness creates a filter that changes the brightness of an image. The percentage parameter must be in range (-100, 100).

ColorBalance

ColorBalance creates a filter that changes the color balance of an image. The percentage parameters for each color channel (red, green, blue) must be in range (-100, 500).

Colorize

Colorize creates a filter that produces a colorized version of an image. The hue parameter is the angle on the color wheel, typically in range (0, 360). The saturation parameter must be in range (0, 100). The percentage parameter specifies the strength of the effect, it must be in range (0, 100).

Contrast

Contrast creates a filter that changes the contrast of an image. The percentage parameter must be in range (-100, 100).

Gamma

Gamma creates a filter that performs a gamma correction on an image. The gamma parameter must be positive. Gamma = 1 gives the original image. Gamma less than 1 darkens the image and gamma greater than 1 lightens it.

GaussianBlur

GaussianBlur creates a filter that applies a gaussian blur to an image.

Grayscale

Grayscale creates a filter that produces a grayscale version of an image.

Hue

Hue creates a filter that rotates the hue of an image. The hue angle shift is typically in range -180 to 180.

Invert

Invert creates a filter that negates the colors of an image.

Pixelate

Pixelate creates a filter that applies a pixelation effect to an image.

Saturation

Saturation creates a filter that changes the saturation of an image.

Sepia

Sepia creates a filter that produces a sepia-toned version of an image.

Sigmoid

Sigmoid creates a filter that changes the contrast of an image using a sigmoidal function and returns the adjusted image. It’s a non-linear contrast change useful for photo adjustments as it preserves highlight and shadow detail.

UnsharpMask

UnsharpMask creates a filter that sharpens an image. The sigma parameter is used in a gaussian function and affects the radius of effect. Sigma must be positive. Sharpen radius roughly equals 3 * sigma. The amount parameter controls how much darker and how much lighter the edge borders become. Typically between 0.5 and 1.5. The threshold parameter controls the minimum brightness change that will be sharpened. Typically between 0 and 0.05.

Other Functions

Filter

Can be used to apply a set of filters to an image:

{{ $img := $img | images.Filter (images.GaussianBlur 6) (images.Pixelate 8) }}

Also see the Filter Method.

ImageConfig

Parses the image and returns the height, width, and color model.

{{ with (imageConfig "favicon.ico") }}
favicon.ico: {{.Width}} x {{.Height}}
{{ end }}

See Also

  • Image Processing
  • About Hugo
    • Overview
    • Hugo's Security Model
    • Hugo and GDPR
    • What is Hugo
    • Hugo Features
    • The Benefits of Static
    • License
  • Getting Started
    • Get Started Overview
    • Quick Start
    • Install Hugo
    • Basic Usage
    • Directory Structure
    • Configuration
    • External Learning Resources
  • Hugo Modules
    • Hugo Modules Overview
    • Configure Modules
    • Use Hugo Modules
    • Theme Components
  • Content Management
    • 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 and i18n
    • Syntax Highlighting
  • Templates
    • Templates Overview
    • Introduction
    • Template Lookup Order
    • Custom Output Formats
    • Base Templates and Blocks
    • List Page Templates
    • Homepage Template
    • Section Templates
    • Taxonomy Templates
    • Single Page Templates
    • Content View Templates
    • Data Templates
    • Partial Templates
    • Shortcode Templates
    • Local File Templates
    • 404 Page
    • Menu Templates
    • Pagination
    • RSS Templates
    • Sitemap Template
    • Robots.txt
    • Internal Templates
    • Alternative Templating
    • Template Debugging
  • Functions
    • Functions Quick Reference
    • .AddDate
    • .Format
    • .Get
    • .GetPage
    • .HasMenuCurrent
    • .IsMenuCurrent
    • .Param
    • .Render
    • .RenderString
    • .Scratch
    • .Unix
    • absLangURL
    • absURL
    • after
    • anchorize
    • append
    • apply
    • base64
    • chomp
    • complement
    • cond
    • countrunes
    • countwords
    • default
    • delimit
    • dict
    • echoParam
    • emojify
    • eq
    • errorf and warnf
    • fileExists
    • findRE
    • first
    • float
    • ge
    • getenv
    • group
    • gt
    • hasPrefix
    • highlight
    • hmac
    • htmlEscape
    • htmlUnescape
    • hugo
    • humanize
    • i18n
    • Image Functions
    • in
    • index
    • int
    • intersect
    • isset
    • jsonify
    • lang
    • lang.Merge
    • last
    • le
    • len
    • lower
    • lt
    • markdownify
    • Math
    • md5
    • merge
    • ne
    • now
    • os.Stat
    • partialCached
    • path.Base
    • path.Dir
    • path.Ext
    • path.Join
    • path.Split
    • plainify
    • pluralize
    • print
    • printf
    • println
    • querify
    • range
    • readDir
    • readFile
    • ref
    • reflect.IsMap
    • reflect.IsSlice
    • relLangURL
    • relref
    • relURL
    • replace
    • replaceRE
    • safeCSS
    • safeHTML
    • safeHTMLAttr
    • safeJS
    • safeURL
    • seq
    • sha
    • shuffle
    • singularize
    • site
    • slice
    • slicestr
    • sort
    • split
    • string
    • strings.Count
    • strings.HasSuffix
    • strings.Repeat
    • strings.RuneCount
    • strings.TrimLeft
    • strings.TrimPrefix
    • strings.TrimRight
    • strings.TrimSuffix
    • substr
    • symdiff
    • templates.Exists
    • time
    • time.Format
    • title
    • transform.Unmarshal
    • trim
    • truncate
    • union
    • uniq
    • upper
    • urlize
    • urls.Parse
    • where
    • with
  • Variables
    • Variables Overview
    • Site Variables
    • Page Variables
    • Shortcode Variables
    • Pages Methods
    • Taxonomy Variables
    • File Variables
    • Menu Entry Properties
    • Hugo Variables
    • Git Variables
    • Sitemap Variables
  • Hugo Pipes
    • Hugo Pipes Overview
    • Hugo Pipes Introduction
    • SASS / SCSS
    • PostProcess
    • PostCSS
    • JavaScript Building
    • Babel
    • Asset minification
    • Asset bundling
    • Fingerprinting and SRI
    • Resource from Template
    • Resource from String
  • CLI
  • Troubleshooting
    • Troubleshoot
    • FAQ
    • Build Performance
  • Tools
    • Developer Tools Overview
    • Migrations
    • Starter Kits
    • Frontends
    • Editor Plug-ins
    • Search
    • Other Projects
  • Hosting & Deployment
    • Hosting & Deployment Overview
    • Hugo Deploy
    • Host-Agnostic Deploys with Nanobox
    • Host on AWS Amplify
    • Host on Netlify
    • Host on Render
    • Host on Firebase
    • Host on GitHub
    • Host on GitLab
    • Hosting on KeyCDN
    • Host on Bitbucket
    • Deployment with Rsync
  • Contribute
    • Contribute to Hugo
    • Development
    • Documentation
    • Themes
  • Maintenance
“Image Functions” was last updated: October 17, 2021: 211017更新 (baa0f65)
Improve this page
By the Hugo Authors
Hugo Logo
  • File an Issue
  • Get Help
  • Discuss Source Code
  • @GoHugoIO
  • @spf13
  • @bepsays

Netlify badge

 
 

Hugo Sponsors

Logo for Linode
Logo for eSolia
Logo for Brave
 

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

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

  • News
  • Docs
  • Themes
  • Showcase
  • Community
  • GitHub
  • About Hugo
  • Getting Started
  • Hugo Modules
  • Content Management
  • Templates
  • Functions
  • Variables
  • Hugo Pipes
  • CLI
  • Troubleshooting
  • Tools
  • Hosting & Deployment
  • Contribute
  • Maintenance