images.Overlay

Returns an image filter that overlays the source image at the given coordinates, relative to the upper left corner.

Syntax

images.Overlay RESOURCE X Y

Returns

images.filter

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.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="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

Example

Original

Processed

Last updated: January 19, 2025 : Replace links to glossary terms with custom render hook syntax (69d7a781b)

Improve this page