mirror of
https://github.com/gohugoio/hugo.git
synced 2025-08-25 22:00:58 +02:00
4a5cc2dd26
Add an "alignx" option to the images.Text to control whether the value of the "x" option is the left border of the text (current behaviour), the center of each line or the right border. Fixes #10849
102 lines
2.4 KiB
Markdown
102 lines
2.4 KiB
Markdown
---
|
|
title: images.Text
|
|
description: Returns an image filter that adds text to an image.
|
|
categories: []
|
|
keywords: []
|
|
action:
|
|
aliases: []
|
|
related:
|
|
- functions/images/Filter
|
|
- methods/resource/Filter
|
|
returnType: images.filter
|
|
signatures: ['images.Text TEXT [OPTIONS]']
|
|
toc: true
|
|
---
|
|
|
|
## 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.
|
|
|
|
[Go Regular]: https://go.dev/blog/go-fonts#sans-serif
|
|
|
|
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`.
|
|
|
|
alignx
|
|
{{< new-in 0.141.0 >}}
|
|
: (`string`) The horizontal alignment of the text relative to the `x` position. One of `left`, `center`, or `right`. Default is `left`.
|
|
|
|
[global resource]: /getting-started/glossary/#global-resource
|
|
[page resource]: /getting-started/glossary/#page-resource
|
|
[remote resource]: /getting-started/glossary/#remote-resource
|
|
|
|
## Usage
|
|
|
|
Capture the font as a resource:
|
|
|
|
```go-html-template
|
|
{{ $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:
|
|
|
|
```go-html-template
|
|
{{ $opts := dict
|
|
"color" "#fbfaf5"
|
|
"font" $font
|
|
"linespacing" 8
|
|
"size" 40
|
|
"x" 25
|
|
"y" 190
|
|
}}
|
|
```
|
|
|
|
Set the text:
|
|
|
|
```go-html-template
|
|
{{ $text := "Zion National Park" }}
|
|
```
|
|
|
|
Create the filter:
|
|
|
|
```go-html-template
|
|
{{ $filter := images.Text $text $opts }}
|
|
```
|
|
|
|
{{% include "functions/images/_common/apply-image-filter.md" %}}
|
|
|
|
## Example
|
|
|
|
{{< img
|
|
src="images/examples/zion-national-park.jpg"
|
|
alt="Zion National Park"
|
|
filter="Text"
|
|
filterArgs="Zion National Park,25,190,40,1.2,#fbfaf5"
|
|
example=true
|
|
>}}
|