Skip to content

Commit 0f7d8b0

Browse files
committed
Merge branch 'rel058'
2 parents 145d0dd + d087cf3 commit 0f7d8b0

File tree

5 files changed

+365
-41
lines changed

5 files changed

+365
-41
lines changed

‎content/en/content-management/image-processing/index.md‎

Lines changed: 84 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ date: 2018-01-24T13:10:00-05:00
55
lastmod: 2018-01-26T15:59:07-05:00
66
linktitle: "Image Processing"
77
categories: ["content management"]
8-
keywords: [bundle,content,resources,images]
8+
keywords: [resources,images]
99
weight: 4004
1010
draft: false
1111
toc: true
@@ -19,10 +19,8 @@ menu:
1919

2020
The `image` is a [Page Resource]({{< relref "/content-management/page-resources" >}}), and the processing methods listed below does not work on images inside your `/static` folder.
2121

22-
2322
To get all images in a [Page Bundle]({{< relref "/content-management/organization#page-bundles" >}}):
2423

25-
2624
```go-html-template
2725
{{ with .Resources.ByType "image" }}
2826
{{ end }}
@@ -32,10 +30,11 @@ To get all images in a [Page Bundle]({{< relref "/content-management/organizatio
3230
## Image Processing Methods
3331

3432

35-
The `image` resource implements the methods `Resize`, `Fit` and `Fill`, each returning the transformed image using the specified dimensions and processing options.
33+
The `image` resource implements the methods `Resize`, `Fit` and `Fill`, each returning the transformed image using the specified dimensions and processing options. The `image` resource also, since Hugo 0.58, implements the method `Exif` and `Filter`.
34+
35+
### Resize
3636

37-
Resize
38-
: Resizes the image to the specified width and height.
37+
Resizes the image to the specified width and height.
3938

4039
```go
4140
// Resize to a width of 600px and preserve ratio
@@ -48,24 +47,75 @@ Resize
4847
{{ $image := $resource.Resize "600x400" }}
4948
```
5049

51-
Fit
52-
: Scale down the image to fit the given dimensions while maintaining aspect ratio. Both height and width are required.
50+
### Fit
51+
Scale down the image to fit the given dimensions while maintaining aspect ratio. Both height and width are required.
5352

5453
```go
5554
{{ $image := $resource.Fit "600x400" }}
5655
```
5756

58-
Fill
59-
: Resize and crop the image to match the given dimensions. Both height and width are required.
57+
### Fill
58+
Resize and crop the image to match the given dimensions. Both height and width are required.
6059

6160
```go
6261
{{ $image := $resource.Fill "600x400" }}
6362
```
6463

64+
### Filter
65+
66+
Apply one or more filters to your image. See [Image Filters](/functions/images/#image-filters) for a full list.
67+
68+
```go-html-template
69+
{{ $img = $img.Filter (images.GaussianBlur 6) (images.Pixelate 8) }}
70+
```
71+
72+
The above can also be written in a more functional style using pipes:
73+
74+
```go-html-template
75+
{{ $img = $img | images.Filter (images.GaussianBlur 6) (images.Pixelate 8) }}
76+
```
77+
78+
The filters will be applied in the given order.
79+
80+
Sometimes it can be useful to create the filter chain once and then reuse it:
81+
82+
```go-html-template
83+
{{ $filters := slice (images.GaussianBlur 6) (images.Pixelate 8) }}
84+
{{ $img1 = $img1.Filter $filters }}
85+
{{ $img2 = $img2.Filter $filters }}
86+
```
87+
88+
### Exif
89+
90+
Provides an [Exif](https://en.wikipedia.org/wiki/Exif) object with metadata about the image.
91+
92+
Note that this is only suported for JPG and TIFF images, so it's recommended to wrap the access with a `with`, e.g.:
93+
94+
```go-html-template
95+
{{ with $img.Exif }}
96+
Date: {{ .Date }}
97+
Lat/Long: {{ .Lat}}/{{ .Long }}
98+
Tags:
99+
{{ range $k, $v := .Tags }}
100+
TAG: {{ $k }}: {{ $v }}
101+
{{ end }}
102+
```
103+
104+
#### Exif fields
105+
106+
Data
107+
: "photo taken" date/time
108+
109+
Lat
110+
: "photo taken where", GPS latitude
111+
112+
Long
113+
: "photo taken where", GPS longitude
114+
115+
See [Image Processing Config](#image-processing-config) for how to configure what gets included in Exif.
116+
117+
65118

66-
{{% note %}}
67-
Image operations in Hugo currently **do not preserve EXIF data** as this is not supported by Go's [image package](https://github.com/golang/go/search?q=exif&type=Issues&utf8=%E2%9C%93). This will be improved on in the future.
68-
{{% /note %}}
69119

70120

71121
## Image Processing Options
@@ -160,9 +210,28 @@ quality = 75
160210
# Valid values are Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight
161211
anchor = "smart"
162212

163-
```
213+
[imaging.exif]
214+
# Regexp matching the fields you want to Exclude from the (massive) set of Exif info
215+
# available. As we cache this info to disk, this is for performance and
216+
# disk space reasons more than anything.
217+
# If you want it all, put ".*" in this config setting.
218+
# Note that if neither this or ExcludeFields is set, Hugo will return a small
219+
# default set.
220+
includeFields = ""
164221

165-
All of the above settings can also be set per image procecssing.
222+
# Regexp matching the Exif fields you want to exclude. This may be easier to use
223+
# than IncludeFields above, depending on what you want.
224+
excludeFields = ""
225+
226+
# Hugo extracts the "photo taken" date/time into .Date by default.
227+
# Set this to true to turn it off.
228+
disableDate = false
229+
230+
# Hugo extracts the "photo taken where" (GPS latitude and longitude) into
231+
# .Long and .Lat. Set this to true to turn it off.
232+
disableLatLong = false
233+
234+
```
166235

167236
## Smart Cropping of Images
168237

‎content/en/functions/imageConfig.md‎

Lines changed: 0 additions & 25 deletions
This file was deleted.
Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
---
2+
title: Image Functions
3+
description: The images namespace provides a list of filters and other image related functions.
4+
godocref:
5+
date: 2017-02-01
6+
categories: [functions]
7+
aliases: [/functions/imageconfig/]
8+
menu:
9+
docs:
10+
parent: "functions"
11+
keywords: [images]
12+
toc: true
13+
---
14+
15+
16+
## Image Filters
17+
18+
See [images.Filter](#filter) for how to apply these filters to an image.
19+
20+
### Brightness
21+
22+
{{% funcsig %}}
23+
images.Brightness PERCENTAGE
24+
{{% /funcsig %}}
25+
26+
Brightness creates a filter that changes the brightness of an image.
27+
The percentage parameter must be in range (-100, 100).
28+
29+
### ColorBalance
30+
31+
{{% funcsig %}}
32+
images.ColorBalance PERCENTAGERED PERCENTAGEGREEN PERCENTAGEBLUE
33+
{{% /funcsig %}}
34+
35+
ColorBalance creates a filter that changes the color balance of an image.
36+
The percentage parameters for each color channel (red, green, blue) must be in range (-100, 500).
37+
38+
### Colorize
39+
40+
{{% funcsig %}}
41+
images.Colorize HUE SATURATION PERCENTAGE
42+
{{% /funcsig %}}
43+
44+
Colorize creates a filter that produces a colorized version of an image.
45+
The hue parameter is the angle on the color wheel, typically in range (0, 360).
46+
The saturation parameter must be in range (0, 100).
47+
The percentage parameter specifies the strength of the effect, it must be in range (0, 100).
48+
49+
### Contrast
50+
51+
{{% funcsig %}}
52+
images.Contrast PERCENTAGE
53+
{{% /funcsig %}}
54+
55+
Contrast creates a filter that changes the contrast of an image.
56+
The percentage parameter must be in range (-100, 100).
57+
58+
### Gamma
59+
60+
{{% funcsig %}}
61+
images.Gamma GAMMA
62+
{{% /funcsig %}}
63+
64+
Gamma creates a filter that performs a gamma correction on an image.
65+
The gamma parameter must be positive. Gamma = 1 gives the original image.
66+
Gamma less than 1 darkens the image and gamma greater than 1 lightens it.
67+
68+
### GaussianBlur
69+
70+
{{% funcsig %}}
71+
images.GaussianBlur SIGMA
72+
{{% /funcsig %}}
73+
74+
GaussianBlur creates a filter that applies a gaussian blur to an image.
75+
76+
### Grayscale
77+
78+
{{% funcsig %}}
79+
images.Grayscale
80+
{{% /funcsig %}}
81+
82+
Grayscale creates a filter that produces a grayscale version of an image.
83+
84+
### Hue
85+
86+
{{% funcsig %}}
87+
images.Hue SHIFT
88+
{{% /funcsig %}}
89+
90+
Hue creates a filter that rotates the hue of an image.
91+
The hue angle shift is typically in range -180 to 180.
92+
93+
### Invert
94+
95+
{{% funcsig %}}
96+
images.Invert
97+
{{% /funcsig %}}
98+
99+
Invert creates a filter that negates the colors of an image.
100+
101+
### Pixelate
102+
103+
{{% funcsig %}}
104+
images.Pixelate SIZE
105+
{{% /funcsig %}}
106+
107+
Pixelate creates a filter that applies a pixelation effect to an image.
108+
109+
### Saturation
110+
111+
{{% funcsig %}}
112+
images.Saturation PERCENTAGE
113+
{{% /funcsig %}}
114+
115+
Saturation creates a filter that changes the saturation of an image.
116+
117+
### Sepia
118+
119+
{{% funcsig %}}
120+
images.Sepia PERCENTAGE
121+
{{% /funcsig %}}
122+
123+
Sepia creates a filter that produces a sepia-toned version of an image.
124+
125+
### Sigmoid
126+
127+
{{% funcsig %}}
128+
images.Sigmoid MIDPOINT FACTOR
129+
{{% /funcsig %}}
130+
131+
Sigmoid creates a filter that changes the contrast of an image using a sigmoidal function and returns the adjusted image.
132+
It's a non-linear contrast change useful for photo adjustments as it preserves highlight and shadow detail.
133+
134+
### UnsharpMask
135+
136+
{{% funcsig %}}
137+
images.UnsharpMask SIGMA AMOUNT THRESHOLD
138+
{{% /funcsig %}}
139+
140+
UnsharpMask creates a filter that sharpens an image.
141+
The sigma parameter is used in a gaussian function and affects the radius of effect.
142+
Sigma must be positive. Sharpen radius roughly equals 3 * sigma.
143+
The amount parameter controls how much darker and how much lighter the edge borders become. Typically between 0.5 and 1.5.
144+
The threshold parameter controls the minimum brightness change that will be sharpened. Typically between 0 and 0.05.
145+
146+
## Other Functions
147+
148+
### Filter
149+
150+
{{% funcsig %}}
151+
IMAGE | images.Filter FILTERS...
152+
{{% /funcsig %}}
153+
154+
Can be used to apply a set of filters to an image:
155+
156+
```go-html-template
157+
{{ $img := $img | images.Filter (images.GaussianBlur 6) (images.Pixelate 8) }}
158+
```
159+
160+
Also see the [Filter Method](/content-management/image-processing/#filter).
161+
162+
### ImageConfig
163+
164+
Parses the image and returns the height, width, and color model.
165+
166+
{{% funcsig %}}
167+
images.ImageConfig PATH
168+
{{% /funcsig %}}
169+
170+
```go-html-template
171+
{{ with (imageConfig "favicon.ico") }}
172+
favicon.ico: {{.Width}} x {{.Height}}
173+
{{ end }}
174+
```

0 commit comments

Comments
 (0)