Generate Social Media Images Using Cloudinary

This is a utility function that builds social media images by overlaying a title and tagline over an image using Cloudinary’s APIs.

NOTE: a Cloudinary account is required to use this package. The free tier should be more than enough for most small to medium websites using this package. Sign up for an account here!

This was created as part of an article series:

• How to design a social sharing card template
• How the code in this package works

Installation

# install using npm
npm install --save @jlengstorf/get-share-image

# install using yarn
yarn add @jlengstorf/get-share-image

See how this is used in a production site in the learnwithjason.dev source code.

Example Usage

import getShareImage from '@jlengstorf/get-share-image';

const socialImage = getShareImage({
  title: 'Deploy a Node.js App to DigitalOcean with SSL',
  tagline: '#devops #nodejs #ssl',
  cloudName: 'jlengstorf',
  imagePublicID: 'lwj/blog-post-card',
  titleFont: 'futura',
  taglineFont: 'futura',
  textColor: '232129',
});

This generates an image URL:

https://res.cloudinary.com/jlengstorf/image/upload/w_1280,h_669,c_fill,q_auto,f_auto/w_760,c_fit,co_rgb:232129,g_south_west,x_480,y_254,l_text:futura_64:Deploy%20a%20Node.js%20App%20to%20DigitalOcean%20with%20SSL/w_760,c_fit,co_rgb:232129,g_north_west,x_480,y_445,l_text:futura_48:%23devops%20%23nodejs%20%23ssl/lwj/blog-post-card

Which looks like this:

Options

This utility function accepts a config object. Available options are as follows:

Setting config options

const socialImage = getShareImage({
  title: 'My Post Title',
  tagline: 'A tagline for the post',
  cloudName: 'myusername',
  imagePublicID: 'my-template-image.jpg',
  titleExtraConfig: '_bold', // optional - set title font weight to bold
  textColor: '663399', // optional — set the color to purple
});

Who is using this?

• Echobind with their blog image generator
• @jsjoeio on his personal website
• Horacio Herrera
• @chris_berry on his blog
• @codebender828 on his blog
• @ryan_c_harris on his blog
• Idiomatic Programmers