images.Text

images.Text TEXT [OPTIONS]

images.filter

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. For a line height of 1.4, set the linespacing to 0.4 multiplied by the size. Default is 2.

size

(int) The font size in pixels. Default is 20.

x

(int) The horizontal offset, in pixels, relative to the left of the image. Default is 10.

y

(int) The vertical offset, in pixels, relative to the top of the image. Default is 10.

Usage

Capture the font as a resource:

{{ $font := "" }}
{{ $path := "https://github.com/google/fonts/raw/main/ofl/lato/Lato-Regular.ttf" }}
{{ with resources.GetRemote $path }}
  {{ with .Err }}
    {{ errorf "%s" . }}
  {{ else }}
    {{ $font = . }}
  {{ end }}
{{ else }}
  {{ errorf "Unable to get resource %q" $path }}
{{ end }}

Create the options map:

{{ $opts := dict
  "color" "#fbfaf5"
  "font" $font
  "linespacing" 8
  "size" 40
  "x" 25
  "y" 190
}}

Set the text:

{{ $text := "Zion National Park" }}

Create the filter:

{{ $filter := images.Text $text $opts }}

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