How to automatically create share images like dev.to

Have you noticed the Twitter share images of articles published on the developer community dev.to?

If you post an article on dev.to, they automatically create a share image for your post. While authors can choose an image of their own, they don't have to. Dev.to makes sure the content by everybody on their platform is perfectly shareable as is.

dev.to Twitter Article Previews

Their generated image shows up when people share the article on Facebook, Twitter, Messenger or anywhere else. This also helps their brand to spread – win win for authors and the platform!

This automatic image creation is a great idea for bigger platforms like shops, newspapers, job platforms or content platforms similar to dev.to. Does that sound interesting for you?

If you own a similar site and want to make sure every piece of content has share images, you can automate their creation, too. In this blog post, we're going to share how that works, and how you can achieve it in an easy way with our tool Placid.

How automated images work

The self-coded approach

Automated images are not created in a graphics software. They are actually a screenshot of a website!

The layout of the image is created with simple HTML / CSS, and the texts and images are being dynamically changed for every image. In the examples of dev.to, they're taking the post title, author image and name, the publish date, and also customize some parameters like color.

If an image is generated – like when an author on dev.to published an article – the website containing this data is opened in a headless browser (a browser without a user interface that can be operated through the command line), and a correctly sized screenshot is made.

Dev.to themselves use the service HTCI API to make the screenshots, and created the layouts in HTML / CSS themselves.

If you're development-savvy, you can build an image automation service as well with this or a similar API.

The tool-based approach

If you're not comfortable coding this yourself, we can save you a bit of the hassle with our service Placid.

With Placid, you can create a template for your share image with our visual editor. You can design it however you want, or start with our preset designs.

Then you only have to embed our snippet to get your share images automatically. (We also offer a no-code WordPress plugin or a REST API). We take care of all the website-creation-and-screenshotting part, and even host your images for you.

Creating a template for automated share images

We tried to recreate a dev.to template with Placid to show you how that works. What do you think, does it look good? 🥰

dev.to Share Image Clone Template

We added decoration elements like circles and boxes first, and then created the elements that we want to dynamically edit: the title, author image and name. If you wanted, you could also dynamically change the colours of the elements, like dev.to does!

dev.to Share Image Clone in Placid Editor

Implementing generated Placid images

This template can now be used to generate images with data from your website(s). You can either use our WordPress plugin to implement Placid without needing to code, or you use our embed snippets and API.

For Twitter, our snippet would look like this:

<!-- Twitter Card Image -->
<meta property="twitter:image" content="https://placid.app/u/wc9fe?title=EXAMPLE&img=EXAMPLE&author=EXAMPLE"/>
<meta name="twitter:card" content="summary_large_image">

You just have to fill in the parameters of the Placid URL. That's it – we'll generate all share images from then on!

Generated Images from our dev.to template clone

We generated these images from real articles on dev.to (really good ones, by the way!). Here's the URL of Ali's Guide to Vue, as an example:

https://placid.app/u/wc9fe?&title=A%20Complete%20Beginner%27s%20Guide%20to%20Vue&img=%24PIC%24https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F38627%2F77a2a5e7-603e-41b4-afcc-f7aff468ae2f.jpg&author=Ali%20Spittel

Curious? You can sign up for Placid for free right now and try it for yourself! If you need a bit more guidance, you can take a look at our guides for Getting Started with Placid for WordPress (there's a video!), Getting Started with the Placid API or the Placid API documentation.

If you need more support, you can always contact us. We're happy to help you with your templates and integration!

Show us what you create, we'd love to see it 💜

AUTOMATE YOUR SHARE IMAGES