How to generate OpenGraph/Twitter Card Image for every article

[jcubic]

I need to add image for every post, limited by tags I use. I've created an SVG file that I can use as template, where I will add
{{ title }} and {{ users[author].name }}. I only don't know how to generate this image for every md file I have.

this is my image, that I want to render as png or jpg using rsvg tool when building the website.

I was thinking about using transforms for that, but I will need to open the source file and parse it myself to extract the title and tags.

I was looking for Zach blog but it use some kind of service for this, he don't generate images with Eleventy.

[jcubic]

So if anyone is interested, now or in the future. I've created shorcode for this. And to render the image that include foreignObject and p tag, so the title wraps into multiple lines I used Pappetier.

This is the commit that add this jcubic/jankiewicz@c1642a4

[pdehaan]

I was looking for Zach blog but it use some kind of service for this, he don't generate images with Eleventy.

I think there is https://www.11ty.dev/docs/services/screenshots/

[jcubic]

I don't want to use such service. I prefer to have control over my own images.