Image Transformation with React and Cloudinary: Generating Personalized Display Images

One way events are publicized is by creating customized display images (DPs) that can be shared across all social media platforms by the would-be attendees.

The aim of this article is to teach you how attendees can generate personalized display images for your event.
For this article, I would be using React, Cloudinary, and Filesaver.js. I assume you have prior knowledge of React and you also have Node.js installed.

If you don’t have an account on Cloudinary create one here. You also need to have to React installed on your system. Instructions here or could just clone my project repo here and run npm install to install project dependencies for the project. I also assume that you already have a background image you want to use for your DP. See mine below

Background image with space for a person’s image and name

Let's outline our processes before proceeding 💁

Step 1: Create our React Project

We would be using create-react-app in this tutorial to create our project. You can check out the React docs for more info.

Simply open your terminal in a directory of your choice and type the following commands. This would help us set up our React project.

Kindly run the following commands

The above commands would create a new react project. We would be dealing with majorly the App.js ,App.css and the .envfiles in the project. So let's move to step 2.

Step 2: Setup Cloudinary and Background image

I assume at this point that you have already created your Cloudinary account. So before we upload the image we would do need your Cloudinary cloud name and the Cloudinary upload preset. We would save this in our .env file.

To get your upload preset:

Image showing where you can get your upload presets

You can get your cloud name from your dashboard. Save into your .env file with the format REACT_APP_CLOUDINARY_CLOUD_NAME=your-cloudname

Image showing where you can get your cloudname

Now finally for our setup. Upload your background image to Cloudinary. You can simply open the Media Library tab and drag the image to upload. After uploading the image copy the public_id of the image and add to your .env file in the format REACT_APP_IMAGE_OVERLAY=public_id

Each uploaded image is in the form of a URL in this format: https://res.cloudinary.com/cloud_name/image/upload/v12222/public_id.filetype.

Kindly ensure your copy with the file type.

Step 3: Upload the image to Cloudinary and overlay with the background image, then download the image

I assume that you are already familiar with React and would just post images of the code and explain.

This section would be in 3 parts

Setting up the React Component
State object where we save all our data.

React Render method: This is basically the component that gets the image from the user’s device. It contains two input tags one for the image and the other for the user’s name. It also contains some classes for styling.

On change method: this handles the user’s name input

Image change method: this handles the selection of files from the user’s device

Submit method: this handles image upload to Cloudinary.
We would be using the upload URL with follows the format axios.post(https://api.cloudinary.com/v1_1/cloud_name/image/upload/, formData).
Note that the cloud_name is what we earlier copied from your Cloudinary dashboard. Formdata is used to upload images in Javascript you can read up about it here.

The above code snippet uploads the image to Cloudinary. Notice how we are using our environmental variables in the API call. The API returns the public_id of the uploaded image and this is used for the image overlay.
We then pass the public_id to the addOverlay method to help process the overlay effect.

Overlay Method
This method takes the response of the API call above and overlays it our background image. The API call made here is of the format https://res.cloudinary.com/cloud-name/image/upload/l_public_id ,h_1300,w_1300,r_max,x_110,y_110/l_text:Futura_92:user's_name,x_1070,y_445/background-image.

l_: This cloudinary property is used to overlay images. The public id of the image to be overlaid is passed alongside the size you want the image to be and the location along the x and y axis that you want the image to be
r_max: Ths cloudinary property gives the image a border-raduis property that is proportional the greater of the length or width of the image
l_text: This cloudinary image is used to overlay text, the font to be used alongside the text to be overlaid is passed, you also pass the the location along the x and y axis that you want the text to be
x_: This cloudinary property is used to specify the position of an image or text along the x-axis
y_: This cloudinary property is used to specify the position of an image or text along the y-axis

Feel free to play around with the values of x_ and y_ as these depend on your background image.

.

The response gotten from the above API call contains a property called URL which can use to download the image. We can access the URL using response.confiq.url, we pass this property to our FileSaver reference as seen above and we download the image.

You can see how simple it is to create personalized DPs for your event.
Here’s a copy of the completed image

Sample Generated DP

You can view the GitHub repo with the completed code here.
You can also see a live demo of our app here.

Special shoutout to David, Anjola, and Ahmed for reviewing this article.
If you enjoyed this post, please share, comment, and give it a couple of claps . . . Maybe it would help someone. You can also follow me on Twitter(I swear, I’m not boring) and on Medium for more informative articles and tutorials.

Software Developer @MyLaw.ng

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store