TheCloud/hugoDocs
1
0
Fork 0
mirror of https://github.com/gohugoio/hugoDocs.git synced 2025-09-11 08:44:41 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add alignx option to images.Text usage example

Browse Source
This commit is contained in:
Joe Mooring 2025-01-18 11:06:45 -08:00 committed by GitHub
parent 7c03eb0cc3
commit 704a81656b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 41 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
content/en/functions/images/Text.md
View File

@ -47,48 +47,72 @@ y
## Usage ## 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: Capture the font as a resource:
```go-html-template ```go-html-template
{{ $font := "" }} {{ $font := "" }}
{{ $path := "https://github.com/google/fonts/raw/main/ofl/lato/Lato-Regular.ttf" }} {{ with try (resources.GetRemote $fontPath) }}
{{ with try (resources.GetRemote $path) }}
{{ with .Err }} {{ with .Err }}
{{ errorf "%s" . }} {{ errorf "%s" . }}
{{ else with .Value }} {{ else with .Value }}
{{ $font = . }} {{ $font = . }}
{{ else }} {{ else }}
{{ errorf "Unable to get resource %q" $path }} {{ errorf "Unable to get resource %s" $fontPath }}
{{ end }} {{ end }}
{{ end }} {{ end }}
``` ```
Create the options map: Create the filter, centering the text horizontally and vertically:
```go-html-template ```go-html-template
{{ $opts := dict {{ $r := "" }}
"color" "#fbfaf5" {{ $filter := "" }}
"font" $font {{ with $r = resources.Get $imagePath }}
"linespacing" 8 {{ $opts := dict
"size" 40 "alignx" "center"
"x" 25 "color" "#fbfaf5"
"y" 190 "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 ```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 ```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 ## Example