hugoDocs/content/content-management/bundles/image-processing/index.md

title, description, date, lastmod, linktitle, categories, weight, draft, toc

title	description	date	lastmod	linktitle	categories	weight	draft	toc
Image Processing	Hugo API for processing images that are part of page or section bundles	2018-01-24T13:10:00-05:00	2018-01-25T15:59:07-05:00	Image Processing	content management bundles	4004	false	true

Image processing is available on Page Resources.

Methods

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

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

{{% note %}} 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. {{% /note %}}

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. Among them: 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" }}