In this article, we will create automation of some images from the Fox News. On the main page of Fox News you can see images that can be created different ways

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.

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.

Using supportivekoala template

Let's use template from supportivekoala which looks like this

You can try to generate images by yourself, using this tenplate, you dont need to login. Go here to generate images

All the data on this image can be change via an API request. Go to api docs to learn how to do it