On a recent Google stroll, I found an image about a GitHub repository:
Neat, where does that come from?
To be honest: I have been bothered with see my face whenever I share a blog post in Slack:
So question: How do I generated them myself?
A quick googeling later, I found https://github.com/Ladicle/tcardgen
go get github.com/Ladicle/tcardgen
A great, downloading half the internet again… 😅
After about 50 executions, 3h hours of tweaking and ending up with my own fork, I finally made something work.
The command I run (after
go install on my fork) is
tcardgen -f opengraph/font -c opengraph/template.config.yaml -o static/opengraphimages content/blog/2021/05/Generating\ Open\ Graph\ Images\ for\ my\ Blog.md
This requires the following files:
opengraph/ ├── font │ ├── My-favorite-font-Bold.ttf │ ├── My-favorite-font-Medium.ttf │ └── My-favorite-font-Regular.ttf ├── template.config.yaml └── template.png
The config I use is
template: opengraph/template.png title: start: px: 100 py: 172 fgHexColor: "#7B8EA6" fontSize: 72 fontStyle: Bold maxWidth: 700 lineSpacing: 10 info: start: px: 100 py: 120 fgHexColor: "#A0A0A0" fontSize: 38 fontStyle: Regular separator: " — " tags: start: px: 120 py: -475
I don’t use categories, I do use tags, but I don’t want them, so I move them off the canvas.
The image I use looks like this:
I really bothers me that the template can be defined in the
template.config.yaml, but the font-folder cannot. But I didn’t find an easy way to add it, because I’m not a big fan of messing with
Running the command creates an image in
hugo automatically copies over to the output (
cover: image: "opengraphimages/Generating Open Graph Images for my Blog.png"
in my front-matter adds the link to my page.
This workflow still requires running the waaaaayyyy too long command for every new post, and manually copying filenames. I would much rather
hugogenerate the image automagically 🧙
hugotrigger another step which calls this ⏭
- have a service that dynamically generates the image 🧑🎨
og:image✨ (you can define a mime-type, but this StackOverflow entry from 2014 says svg is not allowed)
Definitely worth it:
And even Google’s “Rich Results Test” likes it:
Wow, that’s enough of my face for one day 😬 😅