Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text filter that draws text with the given options #9239

Merged
merged 14 commits into from
Dec 7, 2021

Conversation

vanbroup
Copy link
Contributor

@vanbroup vanbroup commented Dec 3, 2021

Closes: #9238

@vanbroup
Copy link
Contributor Author

vanbroup commented Dec 3, 2021

@bep I'm creating a Text filter that overlays the given text on an image according to the given options. I would like to hear your thoughts on the current approach, and specifically on how you would like to handle fonts.

I was thinking that fonts could be retrieved using the resources.Get function, from local storage or from a remote location such a Google Fonts. While the method below loads the font and passes it on as an option (as resources.resourceAdapter), this doesn't allow me to use it.

{{ $font := resources.Get "https://github.com/google/fonts/raw/main/apache/roboto/static/Roboto-Regular.ttf" }}
{{ $img := resources.Get "/images/open-graph-bg.png"}}
{{ $img = $img.Filter (images.Text "This text is placed over the image" (dict
    "color" "#ffffff"
    "size" 50
    "x" 100
    "y" 200
    "font" $font
))}}

@bep
Copy link
Member

bep commented Dec 3, 2021

While the method below loads the font and passes it on as an option (as resources.resourceAdapter), this doesn't allow me to use it.

Without discussing if it's a great idea or not, I'm not sure what you mean by "doesn't allow me to use it"? You should be able to cast it to resource.Resource.

That said, I think this issue would be mentally easier to manage if we took it in two steps and just used the default font in the first iteration.

@vanbroup vanbroup marked this pull request as ready for review December 3, 2021 17:06
@bep
Copy link
Member

bep commented Dec 3, 2021

If we drop the font discussion for a minute; I tested this, and it works pretty great.

{{ $img = $img.Filter (images.Text "This text is placed over the image" (dict
    "color" "#ffffff"
    "size" 50
    "x" 100
    "y" 200
))}}

Some comments after testing it:

  1. I would expect x=0,y=0 to place the text in the upper left corner. Seems like the y is the bottom of the text and not the top.
  2. I would expect images.Text "This text is placed over the image" to work without options with some sensible defaults.
  3. I don't think the default should be italic text.

@vanbroup
Copy link
Contributor Author

vanbroup commented Dec 3, 2021

Agreed, addressed your comments

docs/content/en/functions/images/index.md Outdated Show resolved Hide resolved
resources/image_test.go Outdated Show resolved Hide resolved
resources/images/text.go Show resolved Hide resolved
resources/image_test.go Outdated Show resolved Hide resolved
resources/images/text.go Outdated Show resolved Hide resolved
resources/images/filters.go Outdated Show resolved Hide resolved
resources/images/filters.go Outdated Show resolved Hide resolved
resources/images/filters.go Outdated Show resolved Hide resolved
resources/images/text.go Outdated Show resolved Hide resolved
resources/images/filters.go Outdated Show resolved Hide resolved
resources/images/filters.go Outdated Show resolved Hide resolved
resources/images/filters.go Outdated Show resolved Hide resolved
@bep bep merged commit 283394a into gohugoio:master Dec 7, 2021
bep added a commit that referenced this pull request Dec 13, 2021
4eb10c1a9 Set a sensible maxAge on the image cache
2c37f4f89 Update lists.md
8690c018f Update introduction.md
0458c3d88 Update index.md
150982f5e Update index.md
50dc0b6b9 Update multilingual.md
648598090 Configure image cache to use :cacheDir/images
4dfb523c3 Update introduction.md
b94d42e6f Add text to social images
d3253d2aa Add resources/_gen/images/ to .gitignore
8a56e1dfd Delete resources/_gen/images
1521e79b6 Update introduction.md
c7110a597 Update introduction.md
f7c4d220f Update introduction.md
c14ecf1ff Update introduction.md
c4b388c20 Fix shortcode in hugo-pipes/introduction (#1605)
d9876bd68 Update introduction.md
a39a532d5 Update introduction.md
fa8758122 netlify: Hugo 0.90.1
50cc40570 Update Contribute to Hugo Development
fc98fc82c Add .vscode dir to .gitignore (#1602)
8f8bcdefc Add frontmatter param to code-toggle shortcode (#1601)
f3b432c7c Add markdownlint configuration file (#1597)
7ea3aea92 netlify: Bump to 0.90.0
e2b6f990b docs: Regenerate docs helper
c02259e33 Merge commit '8d9511a08f14260cbfb73119e4afae50e5a9966d'
2e3573899 Add custom font support to images.Text
3186e6458 images: Text filter that draws text with the given options (#9239)
424f219eb tpl/transform: Optional options for highlight func
7993f17d0 Implement XML data support
1eb9d34cf Make resources.Get use a file cache for remote resources
8a0fffd56 Add remote support to resources.Get

git-subtree-dir: docs
git-subtree-split: 4eb10c1a9689aebf652011a6260a14bf8a3dcef4
@github-actions
Copy link

github-actions bot commented Dec 8, 2022

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Dec 8, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Text filter that draws text with the given options
2 participants