images.Mask

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.

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:

{{ $filter := images.Process "#00ff00" }}

Usage

Create a slice of filters, one for WebP conversion and the other for mask application:

{{ $filter1 := images.Process "webp" }}
{{ $filter2 := images.Mask (resources.Get "images/mask.png") }}
{{ $filters := slice $filter1 $filter2 }}

Apply the filters using the images.Filter function:

{{ with resources.Get "images/original.jpg" }}
  {{ with . | images.Filter $filters }}
    <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 $filters }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

Example

Mask

Original

Processed