Part 1 of this article describes how Nextvatar, a Gravatar service, works to enable users upload images and apply transformations to them. We covered the following:

1. Installation of the Cloudinary React library
2. Implementation of the Cloudinary Upload Widget
3. Managing a connection to Cloudinary to retrieve an uploaded image’s image link

This post, part 2 of the series, will highlight the use of Cloudinary React to apply transformations on the parent image element to get our avatar.

Sandbox

You can access the entire project on Codesandbox. Fork it to run the code.

As we mentioned during setup in part 1, these are necessary to have.

• An account on Cloudinary with a cloud name
• NodeJS installed on our computer
• A code editor of our choice

Installation

We install lodash in our nextvatar project. Lodash is a modern JavaScript library delivering modularity, performance.

1npm install lodash

Image retrieval with the Public ID

In the first part of the post, we configured the Cloudinary Widget to retrieve the delivery URL of the stored image. Now we will do the same for the public ID. The public ID is a unique identifier for each stored assets on Cloudinary.

pages/index.js

<!— Please mention to include to import Avatar in pages/index.js [ import Avatar from "../components/Avatar”; ]—>

1import React, { useState } from "react";
2    import Avatar from "../components/Avatar”;
3    {/* other imports goes here */}
4    
5    export default function IndexPage() {
6      const [publicId, setPublicId] = useState(null);
7    
8      const widget = () => {
9        setPublicId(null);
10        window.cloudinary
11          .createUploadWidget(
12            {
13              cloudName: "terieyenike",
14              uploadPreset: "avatar"
15            },
16            (error, result) => {
17              if (!error && result && result.event === "success") {
18                setPublicId(result.info.public_id);
19              }
20            }
21          )
22          .open();
23      };
24    
25      return (
26        <div className={styles.container}>
27          <Layout>
28            {/* Rendered JSX goes here */}
29              <p className={styles.pStyle}>
30                <span>Avatar image:</span>
31                <Avatar imageID={publicId} />
32              </p>
33            </div>
34          </Layout>
35        </div>
36      );
37    }

In the above snippet, we configured the Cloudinary upload widget using our Cloudinary Cloud name and a specific upload preset.

We returned the public ID from the above code after successfully uploading it to the media store, Cloudinary. We displayed the image as an avatar in the Avatar component with the imageID prop having the returned image's public ID as its value.

Transform the Image

Here, we will work on the Avatar component to apply image transformation and configuration parameters to the image. We will use the CloudinaryContext component shipped with the cloudinary-react library to provide shared configuration across all child Cloudinary components. In the components directory, we create a file called Avatar.js with the following content.

components/Avatar.js

<!— Can you please mention to create ‘Avatar.js’ file within components —>

1import { Image, CloudinaryContext, Transformation } from "cloudinary-react";
2    import styles from "../styles/Home.module.css";
3    
4    const Avatar = ({ imageID = "hwzsj8ybu62tgk7oohh0" }) => {
5      return (
6        <div>
7          <section className={styles.section}>
8            <div className={styles.container}>
9              <CloudinaryContext cloudName="terieyenike">
10                <Image publicId={imageID}>
11                  <Transformation
12                    effect="art:incognito"
13                    gravity="face"
14                    height="150"
15                    quality="auto"
16                    radius="max"
17                    width="150"
18                    crop="thumb"
19                    fetchFormat="auto"
20                  />
21                </Image>
22              </CloudinaryContext>
23            </div>
24          </section>
25        </div>
26      );
27    };
28    export default Avatar;

The code above does the following:

• CloudinaryContext defines the shared parameters applied to all children elements
• Image element represents the Cloudinary Image tag
• Transformation allows you to use additional styles, formats, and other visual enhancements to the image
• imageID, a default public id passed as a parameter in the component till we get the displayed image

The supplied transformation does the following:

• Applies an art effect of incognito to the image.
• Uses the ‘gravity’ transformation to automatically detect a face and focus on it
• Sets a height and width of 150px to the image
• Applies a dynamic quality and format transformation to match the device and internet bandwidth
• Creates a circular, thumbnail image with the crop and thumb transformations.

You can find more Cloudinary image transformations here.

With this done, we have the transformed avatar looking like this.

Summary

This post discussed how to use Cloudinary and its transformation parameters to create an avatar. Try to apply this system to any image stored in your media library, and modify the image to your specifications.

Resources

You may find this helpful:

• Image Transformation