index.md (5527B)
1 ---
2 title: Image Filters
3 description: The images namespace provides a list of filters and other image related functions.
4 date: 2017-02-01
5 categories: [functions]
6 aliases: [/functions/imageconfig/]
7 menu:
8 docs:
9 parent: "functions"
10 keywords: [images]
11 toc: true
12 ---
13
14 See [images.Filter](#filter) for how to apply these filters to an image.
15
16 ## Overlay
17
18 {{< new-in "0.80.0" >}}
19
20 {{% funcsig %}}
21 images.Overlay SRC X Y
22 {{% /funcsig %}}
23
24 Overlay creates a filter that overlays the source image at position x y, e.g:
25
26
27 ```go-html-template
28 {{ $logoFilter := (images.Overlay $logo 50 50 ) }}
29 {{ $img := $img | images.Filter $logoFilter }}
30 ```
31
32 A shorter version of the above, if you only need to apply the filter once:
33
34 ```go-html-template
35 {{ $img := $img.Filter (images.Overlay $logo 50 50 )}}
36 ```
37
38 The above will overlay `$logo` in the upper left corner of `$img` (at position `x=50, y=50`).
39
40 ## Text
41
42 {{< new-in "0.90.0" >}}
43
44 Using the `Text` filter, you can add text to an image.
45
46 {{% funcsig %}}
47 images.Text TEXT DICT)
48 {{% /funcsig %}}
49
50 The following example will add the text `Hugo rocks!` to the image with the specified color, size and position.
51
52 ```go-html-template
53 {{ $img := resources.Get "/images/background.png"}}
54 {{ $img = $img.Filter (images.Text "Hugo rocks!" (dict
55 "color" "#ffffff"
56 "size" 60
57 "linespacing" 2
58 "x" 10
59 "y" 20
60 ))}}
61 ```
62
63 You can load a custom font if needed. Load the font as a Hugo `Resource` and set it as an option:
64
65 ```go-html-template
66
67 {{ $font := resources.Get "https://github.com/google/fonts/raw/main/apache/roboto/static/Roboto-Black.ttf" }}
68 {{ $img := resources.Get "/images/background.png"}}
69 {{ $img = $img.Filter (images.Text "Hugo rocks!" (dict
70 "font" $font
71 ))}}
72 ```
73
74
75 ## Brightness
76
77 {{% funcsig %}}
78 images.Brightness PERCENTAGE
79 {{% /funcsig %}}
80
81 Brightness creates a filter that changes the brightness of an image.
82 The percentage parameter must be in range (-100, 100).
83
84 ### ColorBalance
85
86 {{% funcsig %}}
87 images.ColorBalance PERCENTAGERED PERCENTAGEGREEN PERCENTAGEBLUE
88 {{% /funcsig %}}
89
90 ColorBalance creates a filter that changes the color balance of an image.
91 The percentage parameters for each color channel (red, green, blue) must be in range (-100, 500).
92
93 ## Colorize
94
95 {{% funcsig %}}
96 images.Colorize HUE SATURATION PERCENTAGE
97 {{% /funcsig %}}
98
99 Colorize creates a filter that produces a colorized version of an image.
100 The hue parameter is the angle on the color wheel, typically in range (0, 360).
101 The saturation parameter must be in range (0, 100).
102 The percentage parameter specifies the strength of the effect, it must be in range (0, 100).
103
104 ## Contrast
105
106 {{% funcsig %}}
107 images.Contrast PERCENTAGE
108 {{% /funcsig %}}
109
110 Contrast creates a filter that changes the contrast of an image.
111 The percentage parameter must be in range (-100, 100).
112
113 ## Gamma
114
115 {{% funcsig %}}
116 images.Gamma GAMMA
117 {{% /funcsig %}}
118
119 Gamma creates a filter that performs a gamma correction on an image.
120 The gamma parameter must be positive. Gamma = 1 gives the original image.
121 Gamma less than 1 darkens the image and gamma greater than 1 lightens it.
122
123 ## GaussianBlur
124
125 {{% funcsig %}}
126 images.GaussianBlur SIGMA
127 {{% /funcsig %}}
128
129 GaussianBlur creates a filter that applies a gaussian blur to an image.
130
131 ## Grayscale
132
133 {{% funcsig %}}
134 images.Grayscale
135 {{% /funcsig %}}
136
137 Grayscale creates a filter that produces a grayscale version of an image.
138
139 ## Hue
140
141 {{% funcsig %}}
142 images.Hue SHIFT
143 {{% /funcsig %}}
144
145 Hue creates a filter that rotates the hue of an image.
146 The hue angle shift is typically in range -180 to 180.
147
148 ## Invert
149
150 {{% funcsig %}}
151 images.Invert
152 {{% /funcsig %}}
153
154 Invert creates a filter that negates the colors of an image.
155
156 ## Pixelate
157
158 {{% funcsig %}}
159 images.Pixelate SIZE
160 {{% /funcsig %}}
161
162 Pixelate creates a filter that applies a pixelation effect to an image.
163
164 ## Saturation
165
166 {{% funcsig %}}
167 images.Saturation PERCENTAGE
168 {{% /funcsig %}}
169
170 Saturation creates a filter that changes the saturation of an image.
171
172 ## Sepia
173
174 {{% funcsig %}}
175 images.Sepia PERCENTAGE
176 {{% /funcsig %}}
177
178 Sepia creates a filter that produces a sepia-toned version of an image.
179
180 ## Sigmoid
181
182 {{% funcsig %}}
183 images.Sigmoid MIDPOINT FACTOR
184 {{% /funcsig %}}
185
186 Sigmoid creates a filter that changes the contrast of an image using a sigmoidal function and returns the adjusted image.
187 It's a non-linear contrast change useful for photo adjustments as it preserves highlight and shadow detail.
188
189 ## UnsharpMask
190
191 {{% funcsig %}}
192 images.UnsharpMask SIGMA AMOUNT THRESHOLD
193 {{% /funcsig %}}
194
195 UnsharpMask creates a filter that sharpens an image.
196 The sigma parameter is used in a gaussian function and affects the radius of effect.
197 Sigma must be positive. Sharpen radius roughly equals 3 * sigma.
198 The amount parameter controls how much darker and how much lighter the edge borders become. Typically between 0.5 and 1.5.
199 The threshold parameter controls the minimum brightness change that will be sharpened. Typically between 0 and 0.05.
200
201 ## Other Functions
202
203 ### Filter
204
205 {{% funcsig %}}
206 IMAGE | images.Filter FILTERS...
207 {{% /funcsig %}}
208
209 Can be used to apply a set of filters to an image:
210
211 ```go-html-template
212 {{ $img := $img | images.Filter (images.GaussianBlur 6) (images.Pixelate 8) }}
213 ```
214
215 Also see the [Filter Method](/content-management/image-processing/#filter).
216
217 ### ImageConfig
218
219 Parses the image and returns the height, width, and color model.
220
221 {{% funcsig %}}
222 images.ImageConfig PATH
223 {{% /funcsig %}}
224
225 ```go-html-template
226 {{ with (imageConfig "favicon.ico") }}
227 favicon.ico: {{.Width}} x {{.Height}}
228 {{ end }}
229 ```