mirror/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2025-08-19 21:21:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge commit '346b60358dd8ec2ca228e6635bff9d7914b398b7'

Browse Source
This commit is contained in:
Bjørn Erik Pedersen
2025-01-23 09:47:46 +01:00
parent 7f0f50b133 346b60358d
commit 43307b07f8
384 changed files with 3305 additions and 3271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
docs/content/en/functions/images/Text.md
View File

@@ -17,11 +17,15 @@ toc: true
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.
alignx
{{< new-in 0.141.0 >}}
: (`string`) The horizontal alignment of the text relative to the horizontal offset, one of `left`, `center`, or `right`. Default is `left`.
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.
: (`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.
[Go Regular]: https://go.dev/blog/go-fonts#sans-serif
@@ -37,58 +41,74 @@ x
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
Set the text and paths:
```go-html-template
{{ $text := "Zion National Park" }}
{{ $fontPath := "https://github.com/google/fonts/raw/main/ofl/lato/Lato-Regular.ttf" }}
{{ $imagePath := "images/original.jpg" }}
```
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 try (resources.GetRemote $fontPath) }}
{{ with .Err }}
{{ errorf "%s" . }}
{{ else }}
{{ else with .Value }}
{{ $font = . }}
{{ else }}
{{ errorf "Unable to get resource %s" $fontPath }}
{{ end }}
{{ else }}
{{ errorf "Unable to get resource %q" $path }}
{{ end }}
```
Create the options map:
Create the filter, centering the text horizontally and vertically:
```go-html-template
{{ $opts := dict
"color" "#fbfaf5"
"font" $font
"linespacing" 8
"size" 40
"x" 25
"y" 190
}}
{{ $r := "" }}
{{ $filter := "" }}
{{ with $r = resources.Get $imagePath }}
{{ $opts := dict
"alignx" "center"
"color" "#fbfaf5"
"font" $font
"linespacing" 8
"size" 60
"x" (mul .Width 0.5 | int)
"y" (mul .Height 0.5 | int)
}}
{{ $filter = images.Text $text $opts }}
{{ else }}
{{ errorf "Unable to get resource %s" $imagePath }}
{{ end }}
```
Set the text:
Apply the filter using the [`images.Filter`] function:
```go-html-template
{{ $text := "Zion National Park" }}
{{ with $r }}
{{ with . | images.Filter $filter }}
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
{{ end }}
{{ end }}
```
Create the filter:
You can also apply the filter using the [`Filter`] method on a `Resource` object:
```go-html-template
{{ $filter := images.Text $text $opts }}
{{ with $r }}
{{ with .Filter $filter }}
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
{{ end }}
{{ end }}
```
{{% include "functions/images/_common/apply-image-filter.md" %}}
[`images.Filter`]: /functions/images/filter/
[`Filter`]: /methods/resource/filter/
## Example