{"id":27815,"date":"2022-03-21T19:24:03","date_gmt":"2022-03-21T19:24:03","guid":{"rendered":"http:\/\/Automatically-Generate-Social-Sharing-Images"},"modified":"2025-03-09T06:37:54","modified_gmt":"2025-03-09T13:37:54","slug":"automatically-generate-social-sharing-images","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/automatically-generate-social-sharing-images\/","title":{"rendered":"Automatically Generate Social Sharing Images"},"content":{"rendered":"

Promoting your content on social media is an important part of the publishing process, but as anyone who has attempted to share their work online knows, social media is a black hole of content. It\u2019s really easy to publish, and then see your work lost in the endless stream of tweets and posts. But by sharing images or \u201cOpen Graph Images\u201d for your content, you can stand out more!<\/p>\n

These images are the ones shown as a previews in your followers\u2019 timelines, for example:\n<img src=\u201chttps:\/\/res.cloudinary.com\/matiasfha\/image\/upload\/v1616598769\/Screen_Shot_2021-03-01_at_08.01.57_yhqtx8.png\u201d style={{ width : 500 }} \/><\/p>\n

Creating a share image for each post is a significant burden, and can slow down the publishing process, but there is good news. You can automate this, and get beatiful social image cards with just a bit of upfront effort.<\/p>\n

Before starting with this tutorial, we need to have a plan, and identify our outcomes. By the end of this article, we want to be able to automatically generate social media images by using the Cloudinary transformation API. This process will be part of a utility function that we can use in the Gatsby build process to generate the images for each article. We will asume that you have a running site using Gatsby, sourcing content from markdown or mdx, and that you have some knowledge of the gatsby-node<\/code> API.<\/p>\n

The result will be something like this. Obviously, it will depend of the template image that you use.<\/p>\n

<img src=\u201chttps:\/\/res.cloudinary.com\/matiasfha\/image\/upload\/v1616598776\/Untitled_qujclk.png\u201d style={{ width : 500 }} \/><\/p>\n

The text content of this image is automatically generated by Cloudinary transformation by adding a text overlay for the title, and for the tags.<\/p>\n

Cloudinary transformations<\/h2>\n

Cloudinary has a powerful transformation API that allows users to manipulate images in different ways with simple url parameters. One of those manipulations is the ability to add text overlays.<\/p>\n

\n

You can use all of these features by creating a free Cloudinary account, and storing your social image there.<\/p>\n<\/blockquote>\n

Cloudinary offers a collection of transformations to add overlays. You can combine these parameters to place a piece of text anywhere in an image. The most simple example is to use the l_text<\/code> transformation that tells Cloudinary to add a text overlay.<\/p>\n

Step 1: Add a text overlay transformation<\/h3>\n

https:\/\/res.cloudinary.com\/matiasfha\/image\/upload\/co_white,l_text:roboto_84:This is the example text\/example_social_card.jpg<\/code><\/p>\n

<img src=\u201chttps:\/\/res.cloudinary.com\/matiasfha\/image\/upload\/co_white,l_text:roboto_84:This%20is%20the%20example%20text\/example_social_card.jpg\u201d style={{ width : 500 }} \/><\/p>\n

Here, we just used the image\u2019s Cloudinary url, example_social_card.jpg``, hosted under the account <\/code>matiasfha` (or your cloud name in case you created your Cloudinary account) and we passed a transformation that is marked by using forward slashes.<\/p>\n

The transformation part here is l_text:roboto_84:This%20is%20%20the%20example%20text <\/code> This is composed by<\/p>\n