HUGO

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

What's on this Page

    • The Image Page Resource
    • Image Processing Methods
    • Image Processing Options
    • Image Processing Examples
    • Image Processing Config
    • Smart Cropping of Images
    • Image Processing Performance Consideration
CONTENT MANAGEMENT

Image Processing

Image Page resources can be resized and cropped.

The Image Page Resource

The image is a Page Resource, and the processing methods listed below does not work on images inside your /static folder.

To get all images in a Page Bundle:

{{ with .Resources.ByType "image" }}
{{ end }}

Image Processing Methods

The image resource implements the methods Resize, Fit and Fill, each returning the transformed image using the specified dimensions and processing options.

Resize
Resizes the image to the specified width and height.
// Resize to a width of 600px and preserve ratio
{{ $image := $resource.Resize "600x" }} 

// Resize to a height of 400px and preserve ratio
{{ $image := $resource.Resize "x400" }} 

// Resize to a width 600px and a height of 400px
{{ $image := $resource.Resize "600x400" }}
Fit
Scale down the image to fit the given dimensions while maintaining aspect ratio. Both height and width are required.
{{ $image := $resource.Fit "600x400" }} 
Fill
Resize and crop the image to match the given dimensions. Both height and width are required.
{{ $image := $resource.Fill "600x400" }} 

Image operations in Hugo currently do not preserve EXIF data as this is not supported by Go’s image package. This will be improved on in the future.

Image Processing Options

In addition to the dimensions (e.g. 600x400), Hugo supports a set of additional image options.

JPEG Quality
Only relevant for JPEG images, values 1 to 100 inclusive, higher is better. Default is 75.
{{ $image.Resize "600x q50" }}
Rotate
Rotates an image by the given angle counter-clockwise. The rotation will be performed first to get the dimensions correct. The main use of this is to be able to manually correct for EXIF orientation of JPEG images.
{{ $image.Resize "600x r90" }}
Anchor
Only relevant for the Fill method. This is useful for thumbnail generation where the main motive is located in, say, the left corner. Valid are Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight.
{{ $image.Fill "300x200 BottomLeft" }}
Resample Filter
Filter used in resizing. Default is Box, a simple and fast resampling filter appropriate for downscaling.

Examples are: Box, NearestNeighbor, Linear, Gaussian.

See https://github.com/disintegration/imaging for more. If you want to trade quality for faster processing, this may be a option to test.

{{ $image.Resize "600x400 Gaussian" }}

Image Processing Examples

The photo of the sunset used in the examples below is Copyright Bjørn Erik Pedersen (Creative Commons Attribution-Share Alike 4.0 International license)

.Resize "300x"
.Fill "90x120 left"
.Fill "90x120 right"
.Fit "90x90"
.Resize "300x q10"

This is the shortcode used in the examples above:

layouts/shortcodes/imgproc.html

{{ $original := .Page.Resources.GetMatch (printf "%s*" (.Get 0)) }}
{{ $command := .Get 1 }}
{{ $options := .Get 2 }}
{{ if eq $command "Fit"}}
{{ .Scratch.Set "image" ($original.Fit $options) }}
{{ else if eq $command "Resize"}}
{{ .Scratch.Set "image" ($original.Resize $options) }}
{{ else if eq $command "Fill"}}
{{ .Scratch.Set "image" ($original.Fill $options) }}
{{ else }}
{{ errorf "Invalid image processing command: Must be one of Fit, Fill or Resize."}}
{{ end }}
{{ $image := .Scratch.Get "image" }}
<figure style="width: {{ add $image.Width 3 }}px; padding: 3px; background-color: #cccc">
	<img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
	<figcaption>
	<small>
	{{ with .Inner }}
	{{ . }}
	{{ else }}
	.{{ $command }} "{{ $options }}"
	{{ end }}
	</small>
	</figcaption>
</figure>   

And it is used like this:

{{< imgproc sunset Resize "300x" />}}

Tip: Note the self-closing shortcode syntax above. The imgproc shortcode can be called both with and without inner content.

Image Processing Config

You can configure an imaging section in config.toml with default image processing options:

[imaging]
# Default resample filter used for resizing. Default is Box,
# a simple and fast averaging filter appropriate for downscaling.
# See https://github.com/disintegration/imaging
resampleFilter = "box"

# Defatult JPEG quality setting. Default is 75.
quality = 75

# Anchor used when cropping pictures.
# Default is "smart" which does Smart Cropping, using https://github.com/muesli/smartcrop
# Smart Cropping is content aware and tries to find the best crop for each image.
# Valid values are Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight
anchor = "smart"

All of the above settings can also be set per image procecssing.

Smart Cropping of Images

By default, Hugo will use the Smartcrop, a library created by muesli, when cropping images with .Fill. You can set the anchor point manually, but in most cases the smart option will make a good choice. And we will work with the libray author to improve this in the future.

An example using the sunset image from above:

.Fill "200x200 smart"

Image Processing Performance Consideration

Processed images are stored below <project-dir>/resources (can be set with resourceDir config setting). This folder is deliberately placed in the project, as it is recommended to check these into source control as part of the project. These images are not “Hugo fast” to generate, but once generated they can be reused.

If you change your image settings (e.g. size), remove or rename images etc., you will end up with unused images taking up space and cluttering your project.

To clean up, run:

hugo --gc

GC is short for Garbage Collection.

See Also

  • Page Resources
  • Content Organization
  • Page Bundles
  • Related Content
  • Comments
  • About Hugo
    • Overview
    • Hugo 0.32 HOWTO
    • What is Hugo
    • Hugo Features
    • The Benefits of Static
    • License
  • Getting Started
    • Get Started Overview
    • Quick Start
    • Install Hugo
    • Basic Usage
    • Directory Structure
    • Configuration
  • Themes
    • Themes Overview
    • Install and Use Themes
    • Customize a Theme
    • Create a Theme
  • Content Management
    • Content Management Overview
    • Organization
    • Page Bundles
    • Supported Content Formats
    • Front Matter
    • Page Resources
    • Image Processing
    • Shortcodes
    • Related Content
    • Sections
    • 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
    • .Param
    • .Scratch
    • .Unix
    • Math
    • absLangURL
    • absURL
    • after
    • apply
    • base64
    • chomp
    • cond
    • countrunes
    • countwords
    • dateFormat
    • default
    • delimit
    • dict
    • echoParam
    • emojify
    • eq
    • errorf
    • fileExists
    • findRE
    • first
    • float
    • ge
    • getenv
    • gt
    • hasPrefix
    • highlight
    • htmlEscape
    • htmlUnescape
    • humanize
    • i18n
    • imageConfig
    • in
    • index
    • int
    • intersect
    • isset
    • jsonify
    • lang.Merge
    • lang.NumFmt
    • last
    • le
    • lower
    • lt
    • markdownify
    • md5
    • ne
    • now
    • partialCached
    • plainify
    • pluralize
    • print
    • printf
    • println
    • querify
    • range
    • readDir
    • readFile
    • ref
    • relLangURL
    • relURL
    • relref
    • render
    • replace
    • replaceRE
    • safeCSS
    • safeHTML
    • safeHTMLAttr
    • safeJS
    • safeURL
    • seq
    • sha
    • shuffle
    • singularize
    • slice
    • slicestr
    • sort
    • split
    • string
    • strings.TrimLeft
    • strings.TrimPrefix
    • strings.TrimRight
    • strings.TrimSuffix
    • substr
    • time
    • title
    • trim
    • truncate
    • union
    • uniq
    • upper
    • urlize
    • urls.Parse
    • where
    • with
  • Variables
    • Variables Overview
    • Site Variables
    • Page Variables
    • Shortcode Variables
    • Taxonomy Variables
    • File Variables
    • Menu Variables
    • Hugo Variables
    • Git Variables
    • Sitemap Variables
  • 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
    • Host-Agnostic Deploys with Nanobox
    • Host on Netlify
    • Host on Firebase
    • Host on GitHub
    • Host on GitLab
    • Hosting on KeyCDN
    • Host on Bitbucket
    • Deployment with Wercker
    • Deployment with Rsync
  • Contribute
    • Contribute to Hugo
    • Development
    • Documentation
    • Themes
  • Maintenance
“Image Processing” was last updated: April 2, 2018: Use the new go-html-template Chroma lexer (c5a5250a)
Improve this page
By the Hugo Authors
  • File an Issue
  • Get Help
  • Discuss Source Code
  • @GoHugoIO
  • @spf13
  • @bepsays

 
  Hugo Sponsors
Logo for Forestry.io
Logo for Linode
Logo for eSolia
 

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

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

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