mirror of
https://github.com/gohugoio/hugo.git
synced 2025-08-19 21:21:39 +02:00
Merge commit '35dec7c96f7ee3eb17dd444f7067f0c776fb56ae'
This commit is contained in:
Bjørn Erik Pedersen
36
docs/content/en/functions/images/Brightness.md
Normal file
36
docs/content/en/functions/images/Brightness.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: images.Brightness
|
||||
description: Returns an image filter that changes the brightness of an image.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/images/Filter
|
||||
- methods/resource/Filter
|
||||
returnType: images.filter
|
||||
signatures: [images.Brightness PERCENTAGE]
|
||||
toc: true
|
||||
---
|
||||
|
||||
The percentage must be in the range [-100, 100] where 0 has no effect. A value of `-100` produces a solid black image, and a value of `100` produces a solid white image.
|
||||
|
||||
## Usage
|
||||
|
||||
Create the image filter:
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Brightness 12 }}
|
||||
```
|
||||
|
||||
{{% include "functions/images/_common/apply-image-filter.md" %}}
|
||||
|
||||
## Example
|
||||
|
||||
{{< img
|
||||
src="images/examples/zion-national-park.jpg"
|
||||
alt="Zion National Park"
|
||||
filter="Brightness"
|
||||
filterArgs="12"
|
||||
example=true
|
||||
>}}
|
||||
36
docs/content/en/functions/images/ColorBalance.md
Normal file
36
docs/content/en/functions/images/ColorBalance.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: images.ColorBalance
|
||||
description: Returns an image filter that changes the color balance of an image.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/images/Filter
|
||||
- methods/resource/Filter
|
||||
returnType: images.filter
|
||||
signatures: [images.ColorBalance PCTRED PCTGREEN PCTBLUE]
|
||||
toc: true
|
||||
---
|
||||
|
||||
The percentage for each channel (red, green, blue) must be in the range [-100, 500].
|
||||
|
||||
## Usage
|
||||
|
||||
Create the filter:
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.ColorBalance -10 10 50 }}
|
||||
```
|
||||
|
||||
{{% include "functions/images/_common/apply-image-filter.md" %}}
|
||||
|
||||
## Example
|
||||
|
||||
{{< img
|
||||
src="images/examples/zion-national-park.jpg"
|
||||
alt="Zion National Park"
|
||||
filter="ColorBalance"
|
||||
filterArgs="-10,10,50"
|
||||
example=true
|
||||
>}}
|
||||
40
docs/content/en/functions/images/Colorize.md
Normal file
40
docs/content/en/functions/images/Colorize.md
Normal file
@@ -0,0 +1,40 @@
|
||||
---
|
||||
title: images.Colorize
|
||||
description: Returns an image filter that produces a colorized version of an image.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/images/Filter
|
||||
- methods/resource/Filter
|
||||
returnType: images.filter
|
||||
signatures: [images.Colorize HUE SATURATION PERCENTAGE]
|
||||
toc: true
|
||||
---
|
||||
|
||||
The hue is the angle on the color wheel, typically in the range [0, 360].
|
||||
|
||||
The saturation must be in the range [0, 100].
|
||||
|
||||
The percentage specifies the strength of the effect, and must be in the range [0, 100].
|
||||
|
||||
## Usage
|
||||
|
||||
Create the filter:
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Colorize 180 50 20 }}
|
||||
```
|
||||
|
||||
{{% include "functions/images/_common/apply-image-filter.md" %}}
|
||||
|
||||
## Example
|
||||
|
||||
{{< img
|
||||
src="images/examples/zion-national-park.jpg"
|
||||
alt="Zion National Park"
|
||||
filter="Colorize"
|
||||
filterArgs="180,50,20"
|
||||
example=true
|
||||
>}}
|
||||
36
docs/content/en/functions/images/Config.md
Normal file
36
docs/content/en/functions/images/Config.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: images.Config
|
||||
description: Returns an image.Config structure from the image at the specified path, relative to the working directory.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related: []
|
||||
returnType: image.Config
|
||||
signatures: [images.Config PATH]
|
||||
aliases: [/functions/imageconfig]
|
||||
---
|
||||
|
||||
See [image processing] for an overview of Hugo's image pipeline.
|
||||
|
||||
[image processing]: /content-management/image-processing/
|
||||
|
||||
```go-html-template
|
||||
{{ $ic := images.Config "/static/images/a.jpg" }}
|
||||
|
||||
{{ $ic.Width }} → 600 (int)
|
||||
{{ $ic.Height }} → 400 (int)
|
||||
```
|
||||
|
||||
Supported image formats include GIF, JPEG, PNG, TIFF, and WebP.
|
||||
|
||||
{{% note %}}
|
||||
This is a legacy function, superseded by the [`Width`] and [`Height`] methods for [global], [page], and [remote] resources. See the [image processing] section for details.
|
||||
|
||||
[`Width`]: /methods/resource/width
|
||||
[`Height`]: /methods/resource/height
|
||||
[global]: /getting-started/glossary/#global-resource
|
||||
[image processing]: /content-management/image-processing
|
||||
[page]: /getting-started/glossary/#page-resource
|
||||
[remote]: /getting-started/glossary/#remote-resource
|
||||
{{% /note %}}
|
||||
36
docs/content/en/functions/images/Contrast.md
Normal file
36
docs/content/en/functions/images/Contrast.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: images.Contrast
|
||||
description: Returns an image filter that changes the contrast of an image.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/images/Filter
|
||||
- methods/resource/Filter
|
||||
returnType: images.filter
|
||||
signatures: [images.Contrast PERCENTAGE]
|
||||
toc: true
|
||||
---
|
||||
|
||||
The percentage must be in the range [-100, 100] where 0 has no effect. A value of `-100` produces a solid grey image, and a value of `100` produces an over-contrasted image.
|
||||
|
||||
## Usage
|
||||
|
||||
Create the filter:
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Contrast -20 }}
|
||||
```
|
||||
|
||||
{{% include "functions/images/_common/apply-image-filter.md" %}}
|
||||
|
||||
## Example
|
||||
|
||||
{{< img
|
||||
src="images/examples/zion-national-park.jpg"
|
||||
alt="Zion National Park"
|
||||
filter="Contrast"
|
||||
filterArgs="-20"
|
||||
example=true
|
||||
>}}
|
||||
67
docs/content/en/functions/images/Filter.md
Normal file
67
docs/content/en/functions/images/Filter.md
Normal file
@@ -0,0 +1,67 @@
|
||||
---
|
||||
title: images.Filter
|
||||
description: Applies one or more image filters to the given image resource.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- methods/resource/Filter
|
||||
returnType: images.ImageResource
|
||||
signatures: [images.Filter FILTERS... IMAGE]
|
||||
toc: true
|
||||
---
|
||||
|
||||
Apply one or more [image filters](#image-filters) to the given image.
|
||||
|
||||
To apply a single filter:
|
||||
|
||||
```go-html-template
|
||||
{{ with resources.Get "images/original.jpg" }}
|
||||
{{ with images.Filter images.Grayscale . }}
|
||||
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
To apply two or more filters, executing from left to right:
|
||||
|
||||
```go-html-template
|
||||
{{ $filters := slice
|
||||
images.Grayscale
|
||||
(images.GaussianBlur 8)
|
||||
}}
|
||||
{{ with resources.Get "images/original.jpg" }}
|
||||
{{ with images.Filter $filters . }}
|
||||
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
You can also apply image filters using the [`Filter`] method on a `Resource` object.
|
||||
|
||||
[`Filter`]: /methods/resource/filter
|
||||
|
||||
## Example
|
||||
|
||||
```go-html-template
|
||||
{{ with resources.Get "images/original.jpg" }}
|
||||
{{ with images.Filter images.Grayscale . }}
|
||||
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
{{< img
|
||||
src="images/examples/zion-national-park.jpg"
|
||||
alt="Zion National Park"
|
||||
filter="Grayscale"
|
||||
filterArgs=""
|
||||
example=true
|
||||
>}}
|
||||
|
||||
## Image filters
|
||||
|
||||
Use any of these filters with the `images.Filter` function, or with the `Filter` method on a `Resource` object.
|
||||
|
||||
{{< list-pages-in-section path=/functions/images filter=functions_images_no_filters filterType=exclude >}}
|
||||
36
docs/content/en/functions/images/Gamma.md
Normal file
36
docs/content/en/functions/images/Gamma.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: images.Gamma
|
||||
description: Returns an image filter that performs gamma correction on an image.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/images/Filter
|
||||
- methods/resource/Filter
|
||||
returnType: images.filter
|
||||
signatures: [images.Gamma GAMMA]
|
||||
toc: true
|
||||
---
|
||||
|
||||
The gamma value must be positive. A value greater than 1 lightens the image, while a value less than 1 darkens the image. The filter has no effect when the gamma value is 1.
|
||||
|
||||
## Usage
|
||||
|
||||
Create the filter:
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Gamma 1.667 }}
|
||||
```
|
||||
|
||||
{{% include "functions/images/_common/apply-image-filter.md" %}}
|
||||
|
||||
## Example
|
||||
|
||||
{{< img
|
||||
src="images/examples/zion-national-park.jpg"
|
||||
alt="Zion National Park"
|
||||
filter="Gamma"
|
||||
filterArgs="1.667"
|
||||
example=true
|
||||
>}}
|
||||
36
docs/content/en/functions/images/GaussianBlur.md
Normal file
36
docs/content/en/functions/images/GaussianBlur.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: images.GaussianBlur
|
||||
description: Returns an image filter that applies a gaussian blur to an image.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/images/Filter
|
||||
- methods/resource/Filter
|
||||
returnType: images.filter
|
||||
signatures: [images.GaussianBlur SIGMA]
|
||||
toc: true
|
||||
---
|
||||
|
||||
The sigma value must be positive, and indicates how much the image will be blurred. The blur-affected radius is approximately 3 times the sigma value.
|
||||
|
||||
## Usage
|
||||
|
||||
Create the filter:
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.GaussianBlur 5 }}
|
||||
```
|
||||
|
||||
{{% include "functions/images/_common/apply-image-filter.md" %}}
|
||||
|
||||
## Example
|
||||
|
||||
{{< img
|
||||
src="images/examples/zion-national-park.jpg"
|
||||
alt="Zion National Park"
|
||||
filter="GaussianBlur"
|
||||
filterArgs="5"
|
||||
example=true
|
||||
>}}
|
||||
34
docs/content/en/functions/images/Grayscale.md
Normal file
34
docs/content/en/functions/images/Grayscale.md
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: images.Grayscale
|
||||
description: Returns an image filter that produces a grayscale version of an image.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/images/Filter
|
||||
- methods/resource/Filter
|
||||
returnType: images.filter
|
||||
signatures: [images.Grayscale]
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Create the filter:
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Grayscale }}
|
||||
```
|
||||
|
||||
{{% include "functions/images/_common/apply-image-filter.md" %}}
|
||||
|
||||
## Example
|
||||
|
||||
{{< img
|
||||
src="images/examples/zion-national-park.jpg"
|
||||
alt="Zion National Park"
|
||||
filter="Grayscale"
|
||||
filterArgs=""
|
||||
example=true
|
||||
>}}
|
||||
36
docs/content/en/functions/images/Hue.md
Normal file
36
docs/content/en/functions/images/Hue.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: images.Hue
|
||||
description: Returns an image filter that rotates the hue of an image.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/images/Filter
|
||||
- methods/resource/Filter
|
||||
returnType: images.filter
|
||||
signatures: [images.Hue SHIFT]
|
||||
toc: true
|
||||
---
|
||||
|
||||
The hue angle shift is typically in the range [-180, 180] where 0 has no effect.
|
||||
|
||||
## Usage
|
||||
|
||||
Create the filter:
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Hue -15 }}
|
||||
```
|
||||
|
||||
{{% include "functions/images/_common/apply-image-filter.md" %}}
|
||||
|
||||
## Example
|
||||
|
||||
{{< img
|
||||
src="images/examples/zion-national-park.jpg"
|
||||
alt="Zion National Park"
|
||||
filter="Hue"
|
||||
filterArgs="-15"
|
||||
example=true
|
||||
>}}
|
||||
34
docs/content/en/functions/images/Invert.md
Normal file
34
docs/content/en/functions/images/Invert.md
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: images.Invert
|
||||
description: Returns an image filter that negates the colors of an image.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/images/Filter
|
||||
- methods/resource/Filter
|
||||
returnType: images.filter
|
||||
signatures: [images.Invert]
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Create the filter:
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Invert }}
|
||||
```
|
||||
|
||||
{{% include "functions/images/_common/apply-image-filter.md" %}}
|
||||
|
||||
## Example
|
||||
|
||||
{{< img
|
||||
src="images/examples/zion-national-park.jpg"
|
||||
alt="Zion National Park"
|
||||
filter="Invert"
|
||||
filterArgs=""
|
||||
example=true
|
||||
>}}
|
||||
52
docs/content/en/functions/images/Opacity.md
Normal file
52
docs/content/en/functions/images/Opacity.md
Normal file
@@ -0,0 +1,52 @@
|
||||
---
|
||||
title: images.Opacity
|
||||
description: Returns an image filter that changes the opacity of an image.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/images/Filter
|
||||
- methods/resource/Filter
|
||||
returnType: images.filter
|
||||
signatures: [images.Opacity OPACITY]
|
||||
toc: true
|
||||
---
|
||||
|
||||
{{< new-in 0.119.0 >}}
|
||||
|
||||
The opacity value must be in the range [0, 1]. A value of `0` produces a transparent image, and a value of `1` produces an opaque image (no transparency).
|
||||
|
||||
## Usage
|
||||
|
||||
Create the filter:
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Opacity 0.65 }}
|
||||
```
|
||||
|
||||
{{% include "functions/images/_common/apply-image-filter.md" %}}
|
||||
|
||||
The `images.Opacity` filter is most useful for target formats such as PNG and WebP that support transparency. If the source image does not support transparency, combine this filter with the `images.Process` filter:
|
||||
|
||||
```go-html-template
|
||||
{{ with resources.Get "images/original.jpg" }}
|
||||
{{ $filters := slice
|
||||
(images.Opacity 0.65)
|
||||
(images.Process "png")
|
||||
}}
|
||||
{{ with . | images.Filter $filters }}
|
||||
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
{{< img
|
||||
src="images/examples/zion-national-park.jpg"
|
||||
alt="Zion National Park"
|
||||
filter="Opacity"
|
||||
filterArgs="0.65"
|
||||
example=true
|
||||
>}}
|
||||
52
docs/content/en/functions/images/Overlay.md
Normal file
52
docs/content/en/functions/images/Overlay.md
Normal file
@@ -0,0 +1,52 @@
|
||||
---
|
||||
title: images.Overlay
|
||||
description: Returns an image filter that overlays the source image at the given coordinates, relative to the upper left corner.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/images/Filter
|
||||
- methods/resource/Filter
|
||||
returnType: images.filter
|
||||
signatures: [images.Overlay RESOURCE X Y]
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Capture the overlay image as a resource:
|
||||
|
||||
```go-html-template
|
||||
{{ $overlay := "" }}
|
||||
{{ $path := "images/logo.png" }}
|
||||
{{ with resources.Get $path }}
|
||||
{{ $overlay = . }}
|
||||
{{ else }}
|
||||
{{ errorf "Unable to get resource %q" $path }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
The overlay image can be a [global resource], a [page resource], or a [remote resource].
|
||||
|
||||
[global resource]: /getting-started/glossary/#global-resource
|
||||
[page resource]: /getting-started/glossary/#page-resource
|
||||
[remote resource]: /getting-started/glossary/#remote-resource
|
||||
|
||||
Create the filter:
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Overlay $overlay 20 20 }}
|
||||
```
|
||||
|
||||
{{% include "functions/images/_common/apply-image-filter.md" %}}
|
||||
|
||||
## Example
|
||||
|
||||
{{< img
|
||||
src="images/examples/zion-national-park.jpg"
|
||||
alt="Zion National Park"
|
||||
filter="Overlay"
|
||||
filterArgs="images/logos/logo-64x64.png,20,20"
|
||||
example=true
|
||||
>}}
|
||||
75
docs/content/en/functions/images/Padding.md
Normal file
75
docs/content/en/functions/images/Padding.md
Normal file
@@ -0,0 +1,75 @@
|
||||
---
|
||||
title: images.Padding
|
||||
description: Returns an image filter that resizes the image canvas without resizing the image.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/images/Filter
|
||||
- methods/resource/Filter
|
||||
returnType: images.filter
|
||||
signatures: ['images.Padding V1 [V2] [V3] [V4] [COLOR]']
|
||||
toc: true
|
||||
---
|
||||
|
||||
{{< new-in 0.120.0 >}}
|
||||
|
||||
The last argument is the canvas color, expressed as an RGB or RGBA [hexadecimal color]. The default value is `ffffffff` (opaque white). The preceding arguments are the padding values, in pixels, using the CSS [shorthand property] syntax. Negative padding values will crop the image.
|
||||
|
||||
[hexadecimal color]: https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color
|
||||
[shorthand property]: https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box
|
||||
|
||||
## Usage
|
||||
|
||||
Create the filter:
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Padding 20 40 "#976941" }}
|
||||
```
|
||||
|
||||
{{% include "functions/images/_common/apply-image-filter.md" %}}
|
||||
|
||||
Combine with the [`Colors`] method to create a border with one of the image's most dominant colors:
|
||||
|
||||
[`Colors`]: /methods/resource/colors
|
||||
|
||||
```go-html-template
|
||||
{{ with resources.Get "images/original.jpg" }}
|
||||
{{ $filter := images.Padding 20 40 (index .Colors 2) }}
|
||||
{{ with . | images.Filter $filter }}
|
||||
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
{{< img
|
||||
src="images/examples/zion-national-park.jpg"
|
||||
alt="Zion National Park"
|
||||
filter="Padding"
|
||||
filterArgs="20,40,20,40,#976941"
|
||||
example=true
|
||||
>}}
|
||||
|
||||
## Other recipes
|
||||
|
||||
This example resizes an image to 300px wide, converts it to the WebP format, adds 20px vertical padding and 50px horizontal padding, then sets the canvas color to dark green with 33% opacity.
|
||||
|
||||
Conversion to WebP is required to support transparency. PNG and WebP images have an alpha channel; JPEG and GIF do not.
|
||||
|
||||
```go-html-template
|
||||
{{ $img := resources.Get "images/a.jpg" }}
|
||||
{{ $filters := slice
|
||||
(images.Process "resize 300x webp")
|
||||
(images.Padding 20 50 "#0705")
|
||||
}}
|
||||
{{ $img = $img.Filter $filters }}
|
||||
```
|
||||
|
||||
To add a 2px gray border to an image:
|
||||
|
||||
```go-html-template
|
||||
{{ $img = $img.Filter (images.Padding 2 "#777") }}
|
||||
```
|
||||
34
docs/content/en/functions/images/Pixelate.md
Normal file
34
docs/content/en/functions/images/Pixelate.md
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: images.Pixelate
|
||||
description: Returns an image filter that applies a pixelation effect to an image.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/images/Filter
|
||||
- methods/resource/Filter
|
||||
returnType: images.filter
|
||||
signatures: [images.Pixelate SIZE]
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Create the filter:
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Pixelate 4 }}
|
||||
```
|
||||
|
||||
{{% include "functions/images/_common/apply-image-filter.md" %}}
|
||||
|
||||
## Example
|
||||
|
||||
{{< img
|
||||
src="images/examples/zion-national-park.jpg"
|
||||
alt="Zion National Park"
|
||||
filter="Pixelate"
|
||||
filterArgs="4"
|
||||
example=true
|
||||
>}}
|
||||
115
docs/content/en/functions/images/Process.md
Normal file
115
docs/content/en/functions/images/Process.md
Normal file
@@ -0,0 +1,115 @@
|
||||
---
|
||||
title: images.Process
|
||||
description: Returns an image filter that processes the given image using the given specification.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/images/Filter
|
||||
- methods/resource/Filter
|
||||
- methods/resource/Process
|
||||
returnType: images.filter
|
||||
signatures: [images.Process SPEC]
|
||||
toc: true
|
||||
---
|
||||
|
||||
{{< new-in 0.119.0 >}}
|
||||
|
||||
This filter has the same options as the [`Process`] method on a `Resource` object, but using it as a filter may be more effective if you need to apply multiple filters to an image.
|
||||
|
||||
[`Process`]: /methods/resource/process
|
||||
|
||||
The process specification is a space-delimited, case-insensitive list of one or more of the following in any sequence:
|
||||
|
||||
action
|
||||
: Specify zero or one of `crop`, `fill`, `fit`, or `resize`. If you specify an action you must also provide dimensions. See [details](content-management/image-processing/#image-processing-methods).
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Process "resize 300x" }}
|
||||
```
|
||||
|
||||
dimensions
|
||||
: Required if you specify an action. Provide width _or_ height when using `resize`, else provide both width _and_ height. See [details](/content-management/image-processing/#dimensions).
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Process "crop 200x200" }}
|
||||
```
|
||||
|
||||
anchor
|
||||
: Use with the `crop` or `fill` action. Specify zero or one of `TopLeft`, `Top`, `TopRight`, `Left`, `Center`, `Right`, `BottomLeft`, `Bottom`, `BottomRight`, or `Smart`. Default is `Smart`. See [details](/content-management/image-processing/#anchor).
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Process "crop 200x200 center" }}
|
||||
```
|
||||
|
||||
rotation
|
||||
: Typically specify zero or one of `r90`, `r180`, or `r270`. Also supports arbitrary rotation angles. See [details](/content-management/image-processing/#rotation).
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Process "r90" }}
|
||||
{{ $filter := images.Process "crop 200x200 center r90" }}
|
||||
```
|
||||
|
||||
target format
|
||||
: Specify zero or one of `gif`, `jpeg`, `png`, `tiff`, or `webp`. See [details](/content-management/image-processing/#target-format).
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Process "webp" }}
|
||||
{{ $filter := images.Process "crop 200x200 center r90 webp" }}
|
||||
```
|
||||
|
||||
quality
|
||||
: Applicable to JPEG and WebP images. Optionally specify `qN` where `N` is an integer in the range [0, 100]. Default is `75`. See [details](/content-management/image-processing/#quality).
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Process "q50" }}
|
||||
{{ $filter := images.Process "crop 200x200 center r90 webp q50" }}
|
||||
```
|
||||
|
||||
hint
|
||||
: Applicable to WebP images and equivalent to the `-preset` flag for the [`cwebp`] encoder. Specify zero or one of `drawing`, `icon`, `photo`, `picture`, or `text`. Default is `photo`. See [details](/content-management/image-processing/#hint).
|
||||
|
||||
[`cwebp`]: https://developers.google.com/speed/webp/docs/cwebp
|
||||
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Process "webp" "icon" }}
|
||||
{{ $filter := images.Process "crop 200x200 center r90 webp q50 icon" }}
|
||||
```
|
||||
|
||||
background color
|
||||
: When converting a PNG or WebP with transparency to a format that does not support transparency, optionally specify a background color using a 3-digit or a 6-digit hexadecimal color code. Default is `#ffffff` (white). See [details](/content-management/image-processing/#background-color).
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Process "jpeg #000" }}
|
||||
{{ $filter := images.Process "crop 200x200 center r90 q50 jpeg #000" }}
|
||||
```
|
||||
|
||||
resampling filter
|
||||
: Typically specify zero or one of `Box`, `Lanczos`, `CatmullRom`, `MitchellNetravali`, `Linear`, or `NearestNeighbor`. Other resampling filters are available. See [details](/content-management/image-processing/#resampling-filter).
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Process "resize 300x lanczos" }}
|
||||
{{ $filter := images.Process "resize 300x r90 q50 jpeg #000 lanczos" }}
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Create a filter:
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Process "resize 256x q40 webp" }}
|
||||
```
|
||||
|
||||
{{% include "functions/images/_common/apply-image-filter.md" %}}
|
||||
|
||||
## Example
|
||||
|
||||
{{< img
|
||||
src="images/examples/zion-national-park.jpg"
|
||||
alt="Zion National Park"
|
||||
filter="Process"
|
||||
filterArgs="resize 256x q40 webp"
|
||||
example=true
|
||||
>}}
|
||||
36
docs/content/en/functions/images/Saturation.md
Normal file
36
docs/content/en/functions/images/Saturation.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: images.Saturation
|
||||
description: Returns an image filter that changes the saturation of an image.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/images/Filter
|
||||
- methods/resource/Filter
|
||||
returnType: images.filter
|
||||
signatures: [images.Saturation PERCENTAGE]
|
||||
toc: true
|
||||
---
|
||||
|
||||
The percentage must be in the range [-100, 500] where 0 has no effect.
|
||||
|
||||
## Usage
|
||||
|
||||
Create the filter:
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Saturation 65 }}
|
||||
```
|
||||
|
||||
{{% include "functions/images/_common/apply-image-filter.md" %}}
|
||||
|
||||
## Example
|
||||
|
||||
{{< img
|
||||
src="images/examples/zion-national-park.jpg"
|
||||
alt="Zion National Park"
|
||||
filter="Saturation"
|
||||
filterArgs="65"
|
||||
example=true
|
||||
>}}
|
||||
36
docs/content/en/functions/images/Sepia.md
Normal file
36
docs/content/en/functions/images/Sepia.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: images.Sepia
|
||||
description: Returns an image filter that produces a sepia-toned version of an image.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/images/Filter
|
||||
- methods/resource/Filter
|
||||
returnType: images.filter
|
||||
signatures: [images.Sepia PERCENTAGE]
|
||||
toc: true
|
||||
---
|
||||
|
||||
The percentage must be in the range [0, 100] where 0 has no effect.
|
||||
|
||||
## Usage
|
||||
|
||||
Create the filter:
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Sepia 75 }}
|
||||
```
|
||||
|
||||
{{% include "functions/images/_common/apply-image-filter.md" %}}
|
||||
|
||||
## Example
|
||||
|
||||
{{< img
|
||||
src="images/examples/zion-national-park.jpg"
|
||||
alt="Zion National Park"
|
||||
filter="Sepia"
|
||||
filterArgs="75"
|
||||
example=true
|
||||
>}}
|
||||
40
docs/content/en/functions/images/Sigmoid.md
Normal file
40
docs/content/en/functions/images/Sigmoid.md
Normal file
@@ -0,0 +1,40 @@
|
||||
---
|
||||
title: images.Sigmoid
|
||||
description: Returns an image filter that changes the contrast of an image using a sigmoidal function.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/images/Filter
|
||||
- methods/resource/Filter
|
||||
returnType: images.filter
|
||||
signatures: [images.Sigmoid MIDPOINT FACTOR]
|
||||
toc: true
|
||||
---
|
||||
|
||||
This is a non-linear contrast change useful for photo adjustments; it preserves highlight and shadow detail.
|
||||
|
||||
The midpoint is the midpoint of contrast. It must be in the range [0, 1], typically 0.5.
|
||||
|
||||
The factor indicates how much to increase or decrease the contrast, typically in the range [-10, 10] where 0 has no effect. A positive value increases contrast, while a negative value decrease contrast.
|
||||
|
||||
## Usage
|
||||
|
||||
Create the filter:
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Sigmoid 0.6 -4 }}
|
||||
```
|
||||
|
||||
{{% include "functions/images/_common/apply-image-filter.md" %}}
|
||||
|
||||
## Example
|
||||
|
||||
{{< img
|
||||
src="images/examples/zion-national-park.jpg"
|
||||
alt="Zion National Park"
|
||||
filter="Sigmoid"
|
||||
filterArgs="0.6,-4"
|
||||
example=true
|
||||
>}}
|
||||
95
docs/content/en/functions/images/Text.md
Normal file
95
docs/content/en/functions/images/Text.md
Normal file
@@ -0,0 +1,95 @@
|
||||
---
|
||||
title: images.Text
|
||||
description: Returns an image filter that adds text to an image.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/images/Filter
|
||||
- methods/resource/Filter
|
||||
returnType: images.filter
|
||||
signatures: ['images.Text TEXT [OPTIONS]']
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Options
|
||||
|
||||
Although none of the options are required, at a minimum you will want to set the `size` to be some reasonable percentage of the image height.
|
||||
|
||||
color
|
||||
: (`string`) The font color, either a 3-digit or 6-digit hexadecimal color code. Default is `#ffffff` (white).
|
||||
|
||||
font
|
||||
: (`resource.Resource`) The font can be a [global resource], a [page resource], or a [remote resource]. Default is the "Go Regular" TrueType font.
|
||||
|
||||
linespacing
|
||||
: (`int`) The number of pixels between each line. For a line height of 1.4, set the `linespacing` to 0.4 multiplied by the `size`. Default is `2`.
|
||||
|
||||
size
|
||||
: (`int`) The font size in pixels. Default is `20`.
|
||||
|
||||
x
|
||||
: (`int`) The horizontal offset, in pixels, relative to the left of the image. Default is `10`.
|
||||
|
||||
y
|
||||
: (`int`) The vertical offset, in pixels, relative to the top of the image. Default is `10`.
|
||||
|
||||
[global resource]: /getting-started/glossary/#global-resource
|
||||
[page resource]: /getting-started/glossary/#page-resource
|
||||
[remote resource]: /getting-started/glossary/#remote-resource
|
||||
|
||||
## Usage
|
||||
|
||||
Capture the font as a resource:
|
||||
|
||||
```go-html-template
|
||||
{{ $font := "" }}
|
||||
{{ $path := "https://github.com/google/fonts/raw/main/apache/roboto/static/Roboto-Regular.ttf" }}
|
||||
{{ with resources.GetRemote $path }}
|
||||
{{ with .Err }}
|
||||
{{ errorf "%s" . }}
|
||||
{{ else }}
|
||||
{{ $font = . }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{ errorf "Unable to get resource %q" $path }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
Create the options map:
|
||||
|
||||
```go-html-template
|
||||
{{ $opts := dict
|
||||
"color" "#fbfaf5"
|
||||
"font" $font
|
||||
"linespacing" 8
|
||||
"size" 40
|
||||
"x" 25
|
||||
"y" 190
|
||||
}}
|
||||
```
|
||||
|
||||
Set the text:
|
||||
|
||||
```go-html-template
|
||||
{{ $text := "Zion National Park" }}
|
||||
```
|
||||
|
||||
Create the filter:
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.Text $text $opts }}
|
||||
```
|
||||
|
||||
{{% include "functions/images/_common/apply-image-filter.md" %}}
|
||||
|
||||
## Example
|
||||
|
||||
{{< img
|
||||
src="images/examples/zion-national-park.jpg"
|
||||
alt="Zion National Park"
|
||||
filter="Text"
|
||||
filterArgs="Zion National Park,25,190,40,1.2,#fbfaf5"
|
||||
example=true
|
||||
>}}
|
||||
40
docs/content/en/functions/images/UnsharpMask.md
Normal file
40
docs/content/en/functions/images/UnsharpMask.md
Normal file
@@ -0,0 +1,40 @@
|
||||
---
|
||||
title: images.UnsharpMask
|
||||
description: Returns an image filter that sharpens an image.
|
||||
categories: []
|
||||
keywords: []
|
||||
action:
|
||||
aliases: []
|
||||
related:
|
||||
- functions/images/Filter
|
||||
- methods/resource/Filter
|
||||
returnType: images.filter
|
||||
signatures: [images.UnsharpMask SIGMA AMOUNT THRESHOLD]
|
||||
toc: true
|
||||
---
|
||||
|
||||
The sigma parameter is used in a gaussian function and affects the radius of effect. Sigma must be positive. The sharpen radius is approximately 3 times the sigma value.
|
||||
|
||||
The amount parameter controls how much darker and how much lighter the edge borders become. Typically between 0.5 and 1.5.
|
||||
|
||||
The threshold parameter controls the minimum brightness change that will be sharpened. Typically between 0 and 0.05.
|
||||
|
||||
## Usage
|
||||
|
||||
Create the filter:
|
||||
|
||||
```go-html-template
|
||||
{{ $filter := images.UnsharpMask 10 0.4 0.03 }}
|
||||
```
|
||||
|
||||
{{% include "functions/images/_common/apply-image-filter.md" %}}
|
||||
|
||||
## Example
|
||||
|
||||
{{< img
|
||||
src="images/examples/zion-national-park.jpg"
|
||||
alt="Zion National Park"
|
||||
filter="UnsharpMask"
|
||||
filterArgs="10,0.4,0.03"
|
||||
example=true
|
||||
>}}
|
||||
13
docs/content/en/functions/images/_common/_index.md
Normal file
13
docs/content/en/functions/images/_common/_index.md
Normal file
@@ -0,0 +1,13 @@
|
||||
---
|
||||
cascade:
|
||||
_build:
|
||||
list: never
|
||||
publishResources: false
|
||||
render: never
|
||||
---
|
||||
|
||||
<!--
|
||||
Files within this headless branch bundle are markdown snippets. Each file must contain front matter delimiters, though front matter fields are not required.
|
||||
|
||||
Include the rendered content using the "include" shortcode.
|
||||
-->
|
||||
@@ -0,0 +1,27 @@
|
||||
---
|
||||
# Do not remove front matter.
|
||||
---
|
||||
|
||||
Apply the filter using the [`images.Filter`] function:
|
||||
|
||||
[`images.Filter`]: /functions/images/filter
|
||||
|
||||
```go-html-template
|
||||
{{ with resources.Get "images/original.jpg" }}
|
||||
{{ with . | images.Filter $filter }}
|
||||
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
You can also apply the filter using the [`Filter`] method on a `Resource` object:
|
||||
|
||||
[`Filter`]: methods/resource/filter
|
||||
|
||||
```go-html-template
|
||||
{{ with resources.Get "images/original.jpg" }}
|
||||
{{ with .Filter $filter }}
|
||||
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
```
|
||||
12
docs/content/en/functions/images/_index.md
Normal file
12
docs/content/en/functions/images/_index.md
Normal file
@@ -0,0 +1,12 @@
|
||||
---
|
||||
title: Image functions
|
||||
linkTitle: images
|
||||
description: Use these functions to create an image filter, apply an image filter to an image, and to retrieve image information.
|
||||
categories: []
|
||||
keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: functions
|
||||
---
|
||||
|
||||
Use these functions to create an image filter, apply an image filter to an image, and to retrieve image information.
|
||||
Reference in New Issue
Block a user