https://v0-122-0--gohugoio.netlify.app/functions/images/Recent content in Image functions on HugoHugo -- gohugo.ioenhttps://v0-122-0--gohugoio.netlify.app/functions/images/autoorient/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/images/autoorient/New in v0.121.2 Usage Create the filter: {{ $filter := images.AutoOrient }} Apply the filter using the images.Filter function: {{ 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: {{ with resources.Get "images/original.jpg" }} {{ with .https://v0-122-0--gohugoio.netlify.app/functions/images/brightness/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/images/brightness/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: {{ $filter := images.Brightness 12 }} Apply the filter using the images.Filter function: {{ with resources.Get "images/original.jpg" }} {{ with . | images.Filter $filter }} <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .https://v0-122-0--gohugoio.netlify.app/functions/images/colorbalance/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/images/colorbalance/The percentage for each channel (red, green, blue) must be in the range [-100, 500]. Usage Create the filter: {{ $filter := images.ColorBalance -10 10 50 }} Apply the filter using the images.Filter function: {{ 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:https://v0-122-0--gohugoio.netlify.app/functions/images/colorize/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/images/colorize/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: {{ $filter := images.Colorize 180 50 20 }} Apply the filter using the images.Filter function: {{ with resources.Get "images/original.jpg" }} {{ with . | images.Filter $filter }} <img src="{{ .https://v0-122-0--gohugoio.netlify.app/functions/images/config/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/images/config/See image processing for an overview of Hugo’s image pipeline. {{ $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. 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.https://v0-122-0--gohugoio.netlify.app/functions/images/contrast/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/images/contrast/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: {{ $filter := images.Contrast -20 }} Apply the filter using the images.Filter function: {{ 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:https://v0-122-0--gohugoio.netlify.app/functions/images/filter/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/images/filter/Apply one or more image filters to the given image. To apply a single filter: {{ 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: {{ $filters := slice images.Grayscale (images.GaussianBlur 8) }} {{ with resources.Get "images/original.jpg" }} {{ with images.Filter $filters .https://v0-122-0--gohugoio.netlify.app/functions/images/gamma/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/images/gamma/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: {{ $filter := images.Gamma 1.667 }} Apply the filter using the images.Filter function: {{ with resources.Get "images/original.jpg" }} {{ with . | images.Filter $filter }} <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .https://v0-122-0--gohugoio.netlify.app/functions/images/gaussianblur/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/images/gaussianblur/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: {{ $filter := images.GaussianBlur 5 }} Apply the filter using the images.Filter function: {{ 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:https://v0-122-0--gohugoio.netlify.app/functions/images/grayscale/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/images/grayscale/Usage Create the filter: {{ $filter := images.Grayscale }} Apply the filter using the images.Filter function: {{ 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: {{ with resources.Get "images/original.jpg" }} {{ with .Filter $filter }} <img src="{{ .https://v0-122-0--gohugoio.netlify.app/functions/images/hue/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/images/hue/The hue angle shift is typically in the range [-180, 180] where 0 has no effect. Usage Create the filter: {{ $filter := images.Hue -15 }} Apply the filter using the images.Filter function: {{ 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:https://v0-122-0--gohugoio.netlify.app/functions/images/invert/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/images/invert/Usage Create the filter: {{ $filter := images.Invert }} Apply the filter using the images.Filter function: {{ 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: {{ with resources.Get "images/original.jpg" }} {{ with .Filter $filter }} <img src="{{ .https://v0-122-0--gohugoio.netlify.app/functions/images/opacity/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/images/opacity/New in v0.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: {{ $filter := images.Opacity 0.65 }} Apply the filter using the images.Filter function: {{ with resources.Get "images/original.jpg" }} {{ with . | images.Filter $filter }} <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .https://v0-122-0--gohugoio.netlify.app/functions/images/overlay/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/images/overlay/Usage Capture the overlay image as a resource: {{ $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. Create the filter: {{ $filter := images.Overlay $overlay 20 20 }} Apply the filter using the images.https://v0-122-0--gohugoio.netlify.app/functions/images/padding/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/images/padding/New in v0.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. Usage Create the filter: {{ $filter := images.Padding 20 40 "#976941" }} Apply the filter using the images.Filter function: {{ with resources.Get "images/original.https://v0-122-0--gohugoio.netlify.app/functions/images/pixelate/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/images/pixelate/Usage Create the filter: {{ $filter := images.Pixelate 4 }} Apply the filter using the images.Filter function: {{ 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: {{ with resources.Get "images/original.jpg" }} {{ with .Filter $filter }} <img src="{{ .https://v0-122-0--gohugoio.netlify.app/functions/images/process/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/images/process/New in v0.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. 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.https://v0-122-0--gohugoio.netlify.app/functions/images/saturation/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/images/saturation/The percentage must be in the range [-100, 500] where 0 has no effect. Usage Create the filter: {{ $filter := images.Saturation 65 }} Apply the filter using the images.Filter function: {{ 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:https://v0-122-0--gohugoio.netlify.app/functions/images/sepia/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/images/sepia/The percentage must be in the range [0, 100] where 0 has no effect. Usage Create the filter: {{ $filter := images.Sepia 75 }} Apply the filter using the images.Filter function: {{ 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:https://v0-122-0--gohugoio.netlify.app/functions/images/sigmoid/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/images/sigmoid/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:https://v0-122-0--gohugoio.netlify.app/functions/images/text/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/images/text/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 Go Regular, a proportional sans-serif TrueType font. linespacing (int) The number of pixels between each line.https://v0-122-0--gohugoio.netlify.app/functions/images/unsharpmask/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/functions/images/unsharpmask/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: