hugo/docs/content/en/functions/images/index.md

198 lines
4.6 KiB
Markdown
Raw Normal View History

---
title: Image Functions
description: The images namespace provides a list of filters and other image related functions.
date: 2017-02-01
categories: [functions]
aliases: [/functions/imageconfig/]
menu:
docs:
parent: "functions"
keywords: [images]
toc: true
---
## Image Filters
See [images.Filter](#filter) for how to apply these filters to an image.
Squashed 'docs/' changes from 1de7a358c..ef9c4913c ef9c4913c Clean up and removal of outdated examples 46122c9aa add godot tutorials to showcase 06d1d1ea2 Update scss-sass.md 1fc63c100 Spelling fix in 0.79.1 release notes ad2f50e3d Update plainwords description (#1296) 33021d451 Update substr examples (#1304) 6b1cc59bb Release 0.80.0 521db8c6d Merge branch 'tempv0.80.0' 58626c2b3 releaser: Add release notes to /docs for release of 0.80.0 f81d118af dartsass: Dart Sass only supports `expanded` and `compressed` 7da6f54be Add Dart Sass support b1f2661bb Replace jsconfig.js with jsconfig.json 38de0c1a4 Update index.md 223ceae80 Update index.md f7ac0e59d Release v0.79.1 2d4583d43 Merge branch 'temp791-2' 1d34e609b releaser: Add release notes to /docs for release of 0.79.1 e26769988 Merge branch 'temp791' 75694d904 Fix Resource.ResourceType so it always returns MIME's main type 0f65d7783 Typo s/adds/add (#1298) 0b896b2c0 images: Add images.Overlay filter 0d4257dcd Clarify documentation on shimming fcf601ddf Update index.html 6bf9bc1c1 Update index.html 1ce76bf3a Update index.html e7d976eec Update index.html db2996e64 Update index.html 245e5bfc9 news: Add post about Apple M1 3ad4115ed tpl: Add title parameter to YouTube shortcode 76ed976f8 Added two useful extensions to the list (#1243) e5a30dd11 Update related.md 25cf8f48b Improve substr examples e16e57e9a Update path.Split.md 2749b88fd Update path.Split.md d76cad3ff Release 0.79.0 f5ccfbe98 releaser: Add release notes to /docs for release of 0.79.0 ebf1b87b0 Merge commit '9f1265fde4b9ef186148337c99f08601633b6056' 1f1e8f39c Allow setting the delimiter used for setting config via OS env, e.g. HUGO_ e9b1414dd deps: Update to github.com/evanw/esbuild 0.8.11 to 0.8.14 0f76cf66c docs: Regen docshelper 1ada5d47e Add menu params 1c120aef0 Revert "docs: Regenerate docshelper" 7b60b5624 docs: Regenerate docshelper git-subtree-dir: docs git-subtree-split: ef9c4913cdcf95d62ec12d872f412f97e55a55ad
2021-01-20 06:47:49 -05:00
### Overlay
{{< new-in "0.80.0" >}}
{{% funcsig %}}
images.Overlay SRC X Y
{{% /funcsig %}}
Overlay creates a filter that overlays the source image at position x y, e.g:
```go-html-template
{{ $logoFilter := (images.Overlay $logo 50 50 ) }}
{{ $img := $img | images.Filter $logoFilter }}
```
A shorter version of the above, if you only need to apply the filter once:
```go-html-template
{{ $img := $img.Filter (images.Overlay $logo 50 50 )}}
```
The above will overlay `$logo` in the upper left corner of `$img` (at position `x=50, y=50`).
### Brightness
{{% funcsig %}}
images.Brightness PERCENTAGE
{{% /funcsig %}}
Brightness creates a filter that changes the brightness of an image.
The percentage parameter must be in range (-100, 100).
### ColorBalance
{{% funcsig %}}
images.ColorBalance PERCENTAGERED PERCENTAGEGREEN PERCENTAGEBLUE
{{% /funcsig %}}
ColorBalance creates a filter that changes the color balance of an image.
The percentage parameters for each color channel (red, green, blue) must be in range (-100, 500).
### Colorize
{{% funcsig %}}
images.Colorize HUE SATURATION PERCENTAGE
{{% /funcsig %}}
Colorize creates a filter that produces a colorized version of an image.
The hue parameter is the angle on the color wheel, typically in range (0, 360).
The saturation parameter must be in range (0, 100).
The percentage parameter specifies the strength of the effect, it must be in range (0, 100).
### Contrast
{{% funcsig %}}
images.Contrast PERCENTAGE
{{% /funcsig %}}
Contrast creates a filter that changes the contrast of an image.
The percentage parameter must be in range (-100, 100).
### Gamma
{{% funcsig %}}
images.Gamma GAMMA
{{% /funcsig %}}
Gamma creates a filter that performs a gamma correction on an image.
The gamma parameter must be positive. Gamma = 1 gives the original image.
Gamma less than 1 darkens the image and gamma greater than 1 lightens it.
### GaussianBlur
{{% funcsig %}}
images.GaussianBlur SIGMA
{{% /funcsig %}}
GaussianBlur creates a filter that applies a gaussian blur to an image.
### Grayscale
{{% funcsig %}}
images.Grayscale
{{% /funcsig %}}
Grayscale creates a filter that produces a grayscale version of an image.
### Hue
{{% funcsig %}}
images.Hue SHIFT
{{% /funcsig %}}
Hue creates a filter that rotates the hue of an image.
The hue angle shift is typically in range -180 to 180.
### Invert
{{% funcsig %}}
images.Invert
{{% /funcsig %}}
Invert creates a filter that negates the colors of an image.
### Pixelate
{{% funcsig %}}
images.Pixelate SIZE
{{% /funcsig %}}
Pixelate creates a filter that applies a pixelation effect to an image.
### Saturation
{{% funcsig %}}
images.Saturation PERCENTAGE
{{% /funcsig %}}
Saturation creates a filter that changes the saturation of an image.
### Sepia
{{% funcsig %}}
images.Sepia PERCENTAGE
{{% /funcsig %}}
Sepia creates a filter that produces a sepia-toned version of an image.
### Sigmoid
{{% funcsig %}}
images.Sigmoid MIDPOINT FACTOR
{{% /funcsig %}}
Sigmoid creates a filter that changes the contrast of an image using a sigmoidal function and returns the adjusted image.
It's a non-linear contrast change useful for photo adjustments as it preserves highlight and shadow detail.
### UnsharpMask
{{% funcsig %}}
images.UnsharpMask SIGMA AMOUNT THRESHOLD
{{% /funcsig %}}
UnsharpMask creates a filter that sharpens an image.
The sigma parameter is used in a gaussian function and affects the radius of effect.
Sigma must be positive. Sharpen radius roughly equals 3 * sigma.
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.
## Other Functions
### Filter
{{% funcsig %}}
IMAGE | images.Filter FILTERS...
{{% /funcsig %}}
Can be used to apply a set of filters to an image:
```go-html-template
{{ $img := $img | images.Filter (images.GaussianBlur 6) (images.Pixelate 8) }}
```
Also see the [Filter Method](/content-management/image-processing/#filter).
### ImageConfig
Parses the image and returns the height, width, and color model.
{{% funcsig %}}
images.ImageConfig PATH
{{% /funcsig %}}
```go-html-template
{{ with (imageConfig "favicon.ico") }}
favicon.ico: {{.Width}} x {{.Height}}
{{ end }}
```