Text.md - hugo - [fork] hugo port for 9front
HTML git clone https://git.drkhsh.at/hugo.git
DIR Log
DIR Files
DIR Refs
DIR Submodules
DIR README
DIR LICENSE
---
Text.md (3306B)
---
1 ---
2 title: images.Text
3 description: Returns an image filter that adds text to an image.
4 categories: []
5 keywords: []
6 params:
7 functions_and_methods:
8 aliases: []
9 returnType: images.filter
10 signatures: ['images.Text TEXT [OPTIONS]']
11 ---
12
13 ## Options
14
15 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.
16
17 alignx
18 : {{< new-in 0.141.0 />}}
19 : (`string`) The horizontal alignment of the text relative to the horizontal offset, one of `left`, `center`, or `right`. Default is `left`.
20
21 aligny
22 : {{< new-in 0.147.0 />}}
23 : (`string`) The vertical alignment of the text relative to the vertical offset, one of `top`, `center`, or `bottom`. Default is `top`.
24
25 color
26 : (`string`) The font color, either a 3-digit or 6-digit hexadecimal color code. Default is `#ffffff` (white).
27
28 font
29 : (`resource.Resource`) The font can be a [global resource](g), a [page resource](g), or a [remote resource](g). Default is [Go Regular], a proportional sans-serif TrueType font.
30
31 linespacing
32 : (`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`.
33
34 size
35 : (`int`) The font size in pixels. Default is `20`.
36
37 x
38 : (`int`) The horizontal offset, in pixels, relative to the left of the image. Default is `10`.
39
40 y
41 : (`int`) The vertical offset, in pixels, relative to the top of the image. Default is `10`.
42
43 [Go Regular]: https://go.dev/blog/go-fonts#sans-serif
44
45 ## Usage
46
47 Set the text and paths:
48
49 ```go-html-template
50 {{ $text := "Zion National Park" }}
51 {{ $fontPath := "https://github.com/google/fonts/raw/main/ofl/lato/Lato-Regular.ttf" }}
52 {{ $imagePath := "images/original.jpg" }}
53 ```
54
55 Capture the font as a resource:
56
57 ```go-html-template
58 {{ $font := "" }}
59 {{ with try (resources.GetRemote $fontPath) }}
60 {{ with .Err }}
61 {{ errorf "%s" . }}
62 {{ else with .Value }}
63 {{ $font = . }}
64 {{ else }}
65 {{ errorf "Unable to get resource %s" $fontPath }}
66 {{ end }}
67 {{ end }}
68 ```
69
70 Create the filter, centering the text horizontally and vertically:
71
72 ```go-html-template
73 {{ $r := "" }}
74 {{ $filter := "" }}
75 {{ with $r = resources.Get $imagePath }}
76 {{ $opts := dict
77 "alignx" "center"
78 "aligny" "center"
79 "color" "#fbfaf5"
80 "font" $font
81 "linespacing" 8
82 "size" 60
83 "x" (mul .Width 0.5 | int)
84 "y" (mul .Height 0.5 | int)
85 }}
86 {{ $filter = images.Text $text $opts }}
87 {{ else }}
88 {{ errorf "Unable to get resource %s" $imagePath }}
89 {{ end }}
90 ```
91
92 Apply the filter using the [`images.Filter`] function:
93
94 ```go-html-template
95 {{ with $r }}
96 {{ with . | images.Filter $filter }}
97 <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
98 {{ end }}
99 {{ end }}
100 ```
101
102 You can also apply the filter using the [`Filter`] method on a `Resource` object:
103
104 ```go-html-template
105 {{ with $r }}
106 {{ with .Filter $filter }}
107 <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
108 {{ end }}
109 {{ end }}
110 ```
111
112 [`images.Filter`]: /functions/images/filter/
113 [`Filter`]: /methods/resource/filter/
114
115 ## Example
116
117 {{< img
118 src="images/examples/zion-national-park.jpg"
119 alt="Zion National Park"
120 filter="Text"
121 filterArgs="Zion National Park,25,190,40,1.2,#fbfaf5"
122 example=true
123 >}}