On generating social images for my blog
Tags: blog, cloudinary, gatsby, netlify
Published: 2021-04-01 15:31:36

---
title: On generating social images for my blog
published: true
date: 2021-03-27 10:34:50 UTC
tags: blog,cloudinary,gatsby,netlify
canonical_url: https://krzysztofzuraw.com/blog/2021/social-images
---

I recently decided to generate social images for my blog. You know those images that are being displayed by facebook or twitter when you share link on those platforms:

[![social card example](https://krzysztofzuraw.com/static/9e8a87c49fe103079cc9f11888ae073e/a6d36/example.png "social card example")](/static/9e8a87c49fe103079cc9f11888ae073e/38af3/example.png)

I want to get started and create something in finished time so I prepared a minimalistic version of banner using [figma social branding template](https://www.figma.com/community/file/820337605519256142):

[![my social card example](https://krzysztofzuraw.com/static/0f073a7f88365b777ddafa160acb6733/6aca1/social-card.jpg "my social card example")](/static/0f073a7f88365b777ddafa160acb6733/e5166/social-card.jpg)

When I had my design in place I started searching for solutions on how to generate social images. What I wanted is:

- generate social card based on title of page/blog post
- it should be fairly easy to integrate & debug
- it should not cost me money - I’m trying stuff out now
- it should be fun to do

After a few minutes of googling/duck ducking I distilled couple of solutions:

- send image to image handling service (like [cloudinary](https://cloudinary.com)) and allow them to handle cache & image generation
- fire up chromium to make screenshot and then pass it to the twitter bot
- have one static image or generate static image per blog post & include it in e.g frontmatter

All of them have their pros & cons but I decided to use the first solution - using cloudinary. Why?

- I wanted something simple to try out stuff preferably with caching
- I tried firing up chromium but it took a hell a lot of time and I cant debug it locally
- Having static images was also problematic - what if I want to change design of my social card? Everything needs to generated one more time

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#how-it-is-working)How it is working?

[![flow](https://krzysztofzuraw.com/static/60e6569a990f1693b8b388da07efd3e9/a6d36/flow.png "flow")](/static/60e6569a990f1693b8b388da07efd3e9/4a00e/flow.png)

I”m using there couple of goodies from different companies:

- netlify redirects - instead of having `https://krzysztofzuraw.com/.netlify/functions/social-image?title=Home` I have `https://krzysztofzuraw.com/social-image?title=Home`
- netlify functions for generating cloudinary URL & then redirecting bot to image
- cloudinary node API to generate cloudinary URL

I wrote about pros but what are downsides of using it approach? I feel like I’m hardcoding my image generation to cloudinary.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#resources)Resources

- [https://egghead.io/lessons/figma-designing-opengraph-unfurls-in-figma](https://egghead.io/lessons/figma-designing-opengraph-unfurls-in-figma)
- [https://www.learnwithjason.dev/blog/auto-generate-social-image/](https://www.learnwithjason.dev/blog/auto-generate-social-image/)

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#summary)Summary

In this post I wrote about my approach to generating social images - I’ve used cloudinary + netlify functions for that job.