Generate Social Image using Cloudinary with Remix

Note's Main Image

Photo by riciardus from Pexels

Attaching an image to your content for sharing on social media can be attractive. For many, using a design template and adding customised content such as post title and its author is preferred instead of using a static one.

A design tool such as Figma is useful but an automatic workflow can be much easier for content writers. One online service — Cloudinary can dynamically generate the social image for our purpose. A Cloudinary-special URL is constructed to transform the image as the design and insert it to the page by following the Open Graph protocol and/or Twitter Cards guideline.

This site uses Remix, the Cloudinary image URL is generated on the server. Cloudinary's JavaScript SDK can be very helpful to generate the final URL instead of manually working on the URL string.

First, we need to install @cloudinary/url-gen package to the project.

Then, inside the loader function, we build the URL and return it which can be utilised in meta function where we return the metatags following the Open Graph protocol and Twitter Cards guideline.

This is the base design template and the final result.

Basically we use Cloudinary client to fetch the feature image from the note, resize and place it on the right side of the canvas, then overlay the base template image over the feature image layer, finally add and place the note title onto it.

One issue was the package could not work for wrapping the long title text into multiple lines. This solution can be very helpful at this moment.

This site is open sourced. Code can be found here.