But the thought of creating an image generation API was daunting to me. Cloudinary, Lambdas, Chromium are cool, but I wanted something more straightforward.
Being one of the alpha testers of Microlink Cards, I decided to take it for a spin and rely on it to generate the social images for me.
Microlink Cards works like this:
metatag, providing the right queries
Instead of using an existing template, I decided to build my own. Have a look here.
Templates are built (designed) in JSX, powered by Theme UI. What a good idea! 👏
This how you choose what can be customised via query strings passed in to the generated URL.
I created the following queries:
heading: the heading of the card
subheading: the sub-heading of the card
title: the main title of the page you're sharing
domain: the URL of the page you're sharing
theme: a theme object following (I'm using a subset from Wallop System theme)
The last step is to take the generated URL and pass in your queries via query strings.
For example, let's say you want to generate a card with a title of "The future is now.":
I think this is a sweet balance between flexibility and simplicity. I love that I can build templates in JSX and decide how customisable I want them to be.
The ability to take a URL, provide some query strings, and get back a social image (at the right size!) is brilliant to me.
In order to create templates right now, you need to contribute to the repo. It would be cool if there was a way to do it all in the app.
Finally, I think there's some potential for a Modulz integration. Imagine connecting your Modulz generated design system and having access to all your components? 🤯
See for yourself how it works. Enjoy! ✌️
Here's the generated URL based on the queries above:
Share this post on Twitter