resources/images: Allow to set background fill colour

Closes #6298
This commit is contained in:
Bjørn Erik Pedersen 2019-10-20 10:39:00 +02:00
parent 689f647baf
commit 4b286b9d27
15 changed files with 356 additions and 45 deletions

View file

@ -2,7 +2,6 @@
title: "Image Processing"
description: "Image Page resources can be resized and cropped."
date: 2018-01-24T13:10:00-05:00
lastmod: 2018-01-26T15:59:07-05:00
linktitle: "Image Processing"
categories: ["content management"]
keywords: [bundle,content,resources,images]
@ -72,31 +71,42 @@ Image operations in Hugo currently **do not preserve EXIF data** as this is not
In addition to the dimensions (e.g. `600x400`), Hugo supports a set of additional image options.
### Background Color
JPEG Quality
: Only relevant for JPEG images, values 1 to 100 inclusive, higher is better. Default is 75.
The background color to fill into the transparency layer. This is mostly useful when converting to a format that does not support transparency, e.g. `JPEG`.
You can set the background color to use with a 3 or 6 digit hex code starting with `#`.
```go
{{ $image.Resize "600x jpg #b31280" }}
```
For color codes, see https://www.google.com/search?q=color+picker
### JPEG Quality
Only relevant for JPEG images, values 1 to 100 inclusive, higher is better. Default is 75.
```go
{{ $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](https://github.com/golang/go/issues/4341) of JPEG images.
### 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](https://github.com/golang/go/issues/4341) of JPEG images.
```go
{{ $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.
### 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`.
```go
{{ $image.Fill "300x200 BottomLeft" }}
```
Resample Filter
: Filter used in resizing. Default is `Box`, a simple and fast resampling filter appropriate for downscaling.
### Resample Filter
Filter used in resizing. Default is `Box`, a simple and fast resampling filter appropriate for downscaling.
Examples are: `Box`, `NearestNeighbor`, `Linear`, `Gaussian`.
@ -106,6 +116,16 @@ See https://github.com/disintegration/imaging for more. If you want to trade qua
{{ $image.Resize "600x400 Gaussian" }}
```
### Target Format
By default the images is encoded in the source format, but you can set the target format as an option.
Valid values are `jpg`, `png`, `tif`, `bmp`, and `gif`.
```go
{{ $image.Resize "600x jpg" }}
```
## Image Processing Examples
_The photo of the sunset used in the examples below is Copyright [Bjørn Erik Pedersen](https://commons.wikimedia.org/wiki/User:Bep) (Creative Commons Attribution-Share Alike 4.0 International license)_
@ -160,6 +180,13 @@ quality = 75
# Valid values are Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight
anchor = "smart"
# Default background color.
# Hugo will preserve transparency for target formats that supports it,
# but will fall back to this color for JPEG.
# Expects a standard HEX color string with 3 or 6 digits.
# See https://www.google.com/search?q=color+picker
bgColor = "#ffffff"
```
All of the above settings can also be set per image procecssing.