Automatic generation of SVG OG images

support
1

Hey,

I’m wondering how you would go about injecting a frontmatter variable, My post for example into an SVG image, and then. convert it to JPG. I’ve kind of mapped out a process but would love your thoughts, perhaps there is an easier way.

  • Build Hugo

  • Output all posts as JSON.

  • Use node to traverse the file and pick out posts & variables I need (I think thats how it would work)

  • Use sharp to convert the title into an SVG and save as a JPG.

Thanks in advance!

2

So, if I am understanding correctly, you want a frontmatter string to be used as a opengraph image?
You should be able to overlay text on to an image (which can be a blank) using image.text

2 Likes
3

See this commit when we added something simliar to the Hugo sites:

2 Likes
4

@bep that is some clever stuff.
Just to confirm, you’re not using an SVG but layering over some text with a particular font using a filter?Wasn’t aware you could do that. Thanks!

1 Like
5

Just a question about using these text filters, is it possible to grab the font from /static instead?

6

Either place it the assets directory, or mount the static directory on the assets directory by including both of the following in your site configuration:

[[module.mounts]]
source = 'assets'
target = 'assets'

[[module.mounts]]
source = 'static'
target = 'assets'
2 Likes
7

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