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:
- Installation of the Cloudinary React library
- Implementation of the Cloudinary Upload Widget
- 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.
## PrerequisitesAs 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 */}45 export default function IndexPage() {6 const [publicId, setPublicId] = useState(null);78 const widget = () => {9 setPublicId(null);10 window.cloudinary11 .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 };2425 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";34 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 <Transformation12 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 elementsImage
element represents the Cloudinary Image tagTransformation
allows you to use additional styles, formats, and other visual enhancements to the imageimageID
, 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: