Image.text parameters

support
1

Hi, I have the following code working well in hugo v0.109.0+extended darwin/arm64

{{ $font := resources.GetRemote "https://github.com/google/fonts/raw/main/apache/roboto/static/Roboto-Black.ttf" }}
{{ $thumbTitle := .Title | truncate 20 }}

{{ $buffer_asset := resources.Get "/images/background.png" }}
{{ $buffer_watermark := resources.Get "/images/watermark.png" }}
{{- $finalFilter := (images.Overlay $buffer_watermark 125 415 ) -}}
{{- $finalImage := $buffer_asset | images.Filter $finalFilter -}}
{{ $finalImage = $finalImage.Filter (images.Text "{{$thumbTitle}}" (dict
          "color" "#666666"
          "size" 60
          "linespacing" 2
          "x" 120
          "y" 90
          "font" $font
          ))}}

The problem is the text rendered on the image is litterly {{$thumbTitle}}

How can I have the image.Text render the actual string value?

2

Change this:

$finalImage = $finalImage.Filter (images.Text "{{$thumbTitle}}" (dict

To this:

$finalImage = $finalImage.Filter (images.Text $thumbTitle (dict
3

nope, I did just try that, and got backthe same result, but this worked for me

{{ $finalImage = $finalImage.Filter (images.Text (print $thumbTitle) (dict
4

I didn’t know that.

The truncate function doesn’t return a string.

{{ $title := "foo" }}
{{ printf "%[1]v (%[1]T)" $title }} --> foo (string)
{{ printf "%[1]v (%[1]T)" ($title | truncate 20) }} --> foo (template.HTML)

Not sure why… the other string functions that return things that look like strings are… strings. This is the only one that behaves differently.

@bep Is there a reason for this?

5

OK, looking at this a little more, it makes sense.

The truncate function was designed to truncate HTML, not strings. A typical use case is to shorten .Summary when displayed on a list page.

Let’s say the summary, defined either in front matter or manually with <!--more--> token in content, is:

This is **bold** text.

Then let’s say you’re rendering the summary on a list page:

{{ range site.RegularPages }}
  <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
  {{ .Summary | truncate 80 }}<
{{ end }}

If the truncate function returned a string, you would see this on the page:

<p>This is <strong>bold</strong> text.</p>

Instead of this:

This is bold text.

1 Like
6

Fun fact: The truncate function was implemented by the CEO of Netlify. I told him once that “It has never been changed since your first implementation, never found any bug.” We have since found a … bug.

2 Likes
7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.