Skip to content
No description, website, or topics provided.
TypeScript
Branch: master
Clone or download
Pull request Compare This branch is 13 commits behind jlengstorf:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
.prettierrc
LICENSE
README.md
package.json
yarn.lock

README.md

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.

Installation

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

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

Example Usage

import getShareImage from require('@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',
  font: '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:

Deploy a Node.js App to DigitalOcean with SSL, from learnwithjason.dev

Options

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

name required description
title true (string) title text to be placed on the card
tagline true (string) tagline text to be placed on the card
cloudName true (string) your Cloudinary cloud name (i.e. your username)
imagePublicID true (string) the public ID of your social image template
cloudinaryUrlBase (string, default https://res.cloudinary.com) Cloudinary asset URL
titleFont (string, default arial) font to use for rendering title
taglineFont (string, default arial) font to use for rendering tagline
imageWidth (number, default 1280) SEO image width (defaults to Twitter ratio)
imageHeight (number, default 669) SEO image height (defaults to Twitter ratio)
textAreaWidth (number, default 760) width of title and tagline text areas
textLeftOffset (number, default 480) distance from left edge to start text boxes
titleBottomOffset (number, default 254) distance from bottom to start title text
taglineTopOffset (number, default 445) distance from top to start tagline text
textColor (string, default 000000) hex value for text color
titleFontSize (number, default 64) font size to use for the title
taglineFontSize (number, default 48) font size to use for the tagline
version (string) optional version string for caching

Setting config options

const sharingImage = getSharingImage({
  title: 'My Post Title',
  tagline: 'A tagline for the post',
  cloudName: 'myusername',
  imagePublicID: 'my-template-image.jpg',
  textColor: '663399', // optional — set the color to purple
});
You can’t perform that action at this time.