I wanted to update how my posts are looking on mastodon. I did not like that it only shows title and some default icon. I wanted to show image there, or some “kind of logo” of my website.
For illustration:
This is how my posts are looks now (… at least to the time when I published this article).
Version 1
I found how to generate simple square image - a logo of the page.
This looks so much better now and it is really easy to do. I just changed my opengraph.html file by adding following lines.
1{{ $img := resources.Get "img/og.png" }}
2{{- $img = $img.Resize "1200x" -}}
3{{- with $img.Process "webp q80" -}}
4 {{- $src := .Permalink -}}
5 <meta property="og:image" content="{{ $src }}">
6 <meta property="og:image:width" content="{{.Width}}" />
7 <meta property="og:image:height" content="{{.Height}}" />
8{{ end }}
Version 2
After doing some research i found another way - Generating images with post/page title. So i implemented this.
I stole some code from aarol.dev and updated it for my own purpose. This solution is a bit longer as it include also “writing text” to the image.
the code:
1 {{ $base := resources.Get "img/og_base.png" }}
2 {{ $mediumFont := resources.Get "/NotoSerif-Regular.ttf"}}
3 {{ $img := $base.Filter (images.Text .Page.Title (dict
4 "color" "#1e1e2e"
5 "size" 64
6 "linespacing" 2
7 "x" 100
8 "y" 291
9 "font" $mediumFont
10 ))}}
11 {{ $img = resources.Copy (path.Join .Page.RelPermalink "og.png") $img }}
12 <meta property="og:image" content="{{$img.Permalink}}">
13 <meta property="og:image:width" content="{{$img.Width}}" />
14 <meta property="og:image:height" content="{{$img.Height}}" />
If you don’t know where to get opengraph.html file - here it is on the official Hugo repository. This is the one I already use in some updated form.