How to generate images like dev.to twitter

In this article, we will create automation of some images from the dev.to twitter account. Website dev.to where coders share, stay up-to-date, and grow their careers have. They look like this.

The self-coded approach

Automated images are not created in a graphics software like Photoshop or Sketch. They are 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 change 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 https://htmlcsstoimage.com/ 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 Placid.

It lets you create a template for your share images with our visual editor. You can design it however you want, or start with our preset designs.

Then you can either use our REST- or URL API or our no-code integrations for Webflow, Zapier, Airtable, or WordPress to get your share images automatically. We take care of all the website-creation-and-screenshotting parts, and can even host your images for you.

The tool-based approach

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

It lets you create a template for your share images with our visual editor. You can design it however you want, or start with our preset designs.

Using supportivekoala template

Let's use template from supportivekoala which looks like this

alt text

All the data on this image can be change via an API request. Here is a curl example

curl--location--request POST 'https://api.supportivekoala.com/v1/images'\
    --header 'Content-Type: application/json'\
    --header 'Authorization: Bearer <bearer token from your profile>'\
    --data - raw '{"template": "6130a6faa33917001bc5dd25", "params":[{"name": "author", "value": "https://images.unsplash.com/photo-1623605931891-d5b95ee98459?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8bWFuJTIwZmFjZXxlbnwwfDJ8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60" }, {"name": "website", "value": "https://madebyband.com/"}, {
        "name": "text-author",
        "value": "Miško Hevery • Aug 30"
    }, {
        "name": "logo-1",
        "value": "https://icon-library.com/images/javascript-icon-png/javascript-icon-png-7.jpg"
    },

    {
        "name": "main text",
        "value": "How to Become a Coder in 6 Months: a Step-by-Step Action Plan"
    }]
}
'

The result will look like this.

{
    "_id": "61313438ef7cda001bb313b0",
    "template": "6130a6faa33917001bc5dd25",
    "imageUrl": "https://dwgg0jeln99wi.cloudfront.net/1c055335-0e73-467f-951c-ec1f9aff9433.png",
    "createdAt": "2021-09-02T20:29:44.194Z",
    "updatedAt": "2021-09-02T20:29:44.194Z",
    "__v": 0
}

imageUrl point to this image

alt text