Aldin Kozica

Posted on May 13

I was spending 2 hours a week making thumbnails. Here's the n8n workflow that fixed it.

#api #automation #webdev #productivity

I run a small content automation pipeline. RSS feeds, AI summaries, auto-publishing — the usual stuff.

Everything was automated except thumbnails.

Every time a new blog post went live, I'd open Canva, drag some text around, pick a background, export it, upload it. 10–15 minutes per post. Multiply that by 8–10 posts a week and you get the picture.

It wasn't hard work. It was boring work. The worst kind.

So I spent a weekend building a workflow that does it for me. Here's exactly how it works.

The setup

My publishing pipeline already ran on n8n. When a new post goes live on my blog, a webhook fires and kicks off a chain: notify newsletter, post to Twitter, update Notion.

Adding thumbnail generation was just one more node.

The idea: when a post publishes → generate a thumbnail → upload it back to the CMS.

The HTTP node that does the work

I used ThumbAPI — a REST API that takes a title and returns a ready-made thumbnail image. One POST request, one image back as base64.

Here's the exact node config in n8n:

Method: POST

URL: https://api.thumbapi.dev/v1/generate

Authentication: Header — Authorization: Bearer YOUR_API_KEY

Body (JSON):

{
  "title": "{{ $json.post_title }}",
  "format": "blogpost",
  "imageStyle": "faceless"
}

That's it. The $json.post_title pulls the title from the previous node in the workflow — whatever just triggered the webhook.

What comes back

The response looks like this:

{
  "image": "data:image/webp;base64,/9j/4AAQSkZJRgAB...",
  "format": "blogpost",
  "dimensions": { "width": 1200, "height": 630 }
}

A base64 WebP image, correct dimensions for blog OG images (1200×630), ready to use.

Connecting it to my CMS

Next node: an HTTP request to my CMS API to upload the image and attach it to the post. The exact steps depend on your CMS — I'm on a custom setup — but if you're on WordPress, Ghost, or anything with a REST API, it's the same pattern: decode base64, POST to your media endpoint, get back an image ID, attach to the post.

In n8n this is just two more nodes:

Code node — strip the data:image/webp;base64, prefix and convert to binary
HTTP node — POST to your CMS media endpoint

The full workflow in plain English

Blog post published (Webhook)
  → Generate thumbnail (HTTP POST to ThumbAPI)
  → Convert base64 to binary (Code node)
  → Upload to CMS (HTTP POST to media endpoint)
  → Attach thumbnail to post (HTTP PATCH)

Five nodes. Runs in about 25 seconds. Zero Canva.

What I'd do differently

The faceless style is great for blogs but if you're doing YouTube thumbnails and want your face on them, ThumbAPI supports uploading a reference photo and reusing it across generations. I haven't set that up yet but it's next.

Also: error handling. Right now if the API call fails, the workflow just stops. I need to add a fallback node that pings me on Slack so I can manually handle it. Classic "it works, ship it" problem.

Is it worth it?

I've now run this for about 6 weeks. Zero manual thumbnails since. The images aren't as polished as what I'd make in Canva on a good day, but they're consistent, on-brand, and they exist — which is more than I can say for the weeks I'd skip thumbnails because I didn't have time.

If you have any automation pipeline that produces content regularly, this is a low-effort, high-payoff addition.

Happy to share the full n8n workflow JSON if anyone wants it — drop a comment.
PS:This cover blogpost image is generated by ThumbAPI.

DEV Community