图片image资源实现了 Resize, Fit, Fill, and Filter 方法,
每个方法返回一个应用指定的面积和处理选项变换后的图片.
缩放 Resize
缩放图片到指定宽度和高度.
1
2
3
4
5
6
7
8
// 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.
1
{{$image:=$resource.Fit"600x400"}}
填充 Fill
缩放和剪切图片到指定面积。要求指定高度和宽度。
Resize and crop the image to match the given dimensions. Both height and width are required.
参考 图像处理配置 获取Exif应包含域的如何进行配置的信息。for how to configure what gets included in Exif.
图像处理选项
在面积 (如 600x400)外, Hugo还支持一系列额外的图像选项.
Background Color 背景色
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.
填充透明图层的背景颜色。这对于将转化为的不支持透明的图像格式,比如JPEG非常有用。
仅与JPEG图像相关。值从1到100包含边界,越高数值越清晰。默认是75
Only relevant for JPEG images, values 1 to 100 inclusive, higher is better. Default is 75.
1
{{$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.
Only relevant for the Fill method. This is useful for thumbnail generation where the main motive is located in, say, the left corner.
仅仅对Fill方法有用.这对于生成缩略图有用,比如主要动机位于,比如说左边角。
Valid values are Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight.
{{$original:=.Page.Resources.GetMatch(printf"*%s*"(.Get0))}}{{$command:=.Get1}}{{$options:=.Get2}}{{ifeq$command"Fit"}}{{.Scratch.Set"image"($original.Fit$options)}}{{elseifeq$command"Resize"}}{{.Scratch.Set"image"($original.Resize$options)}}{{elseifeq$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"}}<figurestyle="padding: 0.25rem; margin: 2rem 0; background-color: #cccc"><imgstyle="max-width: 100%; width: auto; height: auto;"src="{{$image.RelPermalink}}"width="{{$image.Width}}"height="{{$image.Height}}"><figcaption><small>{{with.Inner}}{{.}}{{else}} .{{$command}} "{{$options}}"
{{end}}</small></figcaption></figure>
[imaging]# Default resample filter used for resizing. Default is Box,# a simple and fast averaging filter appropriate for downscaling.# See https://github.com/disintegration/imagingresampleFilter="box"# Default 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, BottomRightanchor="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+pickerbgColor="#ffffff"[imaging.exif]# Regexp matching the fields you want to Exclude from the (massive) set of Exif info# available. As we cache this info to disk, this is for performance and# disk space reasons more than anything.# If you want it all, put ".*" in this config setting.# Note that if neither this or ExcludeFields is set, Hugo will return a small# default set.includeFields=""# Regexp matching the Exif fields you want to exclude. This may be easier to use# than IncludeFields above, depending on what you want.excludeFields=""# Hugo extracts the "photo taken" date/time into .Date by default.# Set this to true to turn it off.disableDate=false# Hugo extracts the "photo taken where" (GPS latitude and longitude) into# .Long and .Lat. Set this to true to turn it off.disableLatLong=false
Smart Cropping of Images
By default, Hugo will use 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 library author to improve this in the future.
An example using the sunset image from above:
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.