TheCloud/hugoDocs
1
0
Fork 0
mirror of https://github.com/gohugoio/hugoDocs.git synced 2025-09-09 07:55:17 -04:00
Code Issues Packages Projects Releases Wiki Activity

Improve description of masking with non-transparent images

Browse Source
This commit is contained in:
Joe Mooring 2025-01-18 13:06:28 -08:00 committed by GitHub
parent 41c8feb645
commit 4171c0eb7d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
content/en/functions/images/Mask.md
View File

@ -18,11 +18,17 @@ toc: true
The `images.Mask` filter applies a mask to an image. Black pixels in the mask make the corresponding areas of the base image transparent, while white pixels keep them opaque. Color images are converted to grayscale for masking purposes. The mask is automatically resized to match the dimensions of the base image.
{{% note %}}
Of the formats supported by Hugo's imaging pipelie, only PNG and WebP have an alpha channel to support transparency. If your source image uses a different format, convert it to either PNG or WebP before applying the mask as shown in the example below.
Applying an image mask to a non-transparent image format such as JPEG will result in masked areas appearing white instead of transparent.
Of the formats supported by Hugo's imaging pipelie, only PNG and WebP have an alpha channel to support transparency. If your source image has a different format and you require transparent masked areas, convert it to either PNG or WebP as shown in the example below.
{{% /note %}}
When applying a mask to a non-transparent image format such as JPEG, the masked areas will be filled with the color specified by the `bgColor` parameter in your [site configuration]. You can override that color with a `Process` image filter:
```go-html-template
{{ $filter := images.Process "#00ff00" }}
```
[site configuration]: /content-management/image-processing/#imaging-configuration
## Usage
Create a slice of filters, one for WebP conversion and the other for mask application: