Dynamically create a social sharing image using Cloudinary (text-over-image)

get-social-image-url.js

// Customize this by adding your own Cloudinary bucket url
const urlBase = 'https://res.cloudinary.com/<your-bucket-here>/image/upload';

// Tweak text size, position, font and color
const titleOptions =
  'w_1200,h_628,c_fill,q_auto,f_auto/w_800,c_fit,co_rgb:232129,g_south_west,x_300,y_254,l_text:arial_64_bold';

// Tweak text size, position, font and color
const textOptions = 'w_800,c_fit,co_rgb:232129,g_north_west,x_300,y_415,l_text:arial_38';

// Replace this with the Cloudinary path to your template PNG / JPG image.
const template = 'path/to/template/templateName';

export default (title, text) =>
  `${urlBase}/${titleOptions}:${encodeURIComponent(title).replace(
    /\//g,
    '%252F'
  )}/${textOptions}:${encodeURIComponent(text).replace(/%2F/gi, '%252F')}/${template}`;