cld-cropping-intro

This microcourse dives into the diverse world of automatic image cropping with Cloudinary. Learners will be introduced to the plethora of cropping methods available with Cloudinary, understanding their unique applications and limitations.

Explore the intricacies of aspect ratios and the importance of considering various viewports or device screen sizes for responsive design.

Discover the concept of gravity in Cloudinary, and illustrate its role in determining the focal point of cropped images. Additionally, learners will gain insight into automatic cropping (c_auto), its benefits, and practical application.

Through hands-on code examples, learners will discover how to apply automatic cropping (c_auto) and leverage automatic gravity detection (g_auto), or specify specific gravity locations like g_dog or g_face. By the end of the microcourse, participants will be equipped with the knowledge and skills to effectively crop images in diverse scenarios, optimizing them for different contexts and devices.

Environment Setup

Install Node.js and NPM:

You will need to install Node.js on your machine, version 10 or higher. Important - Installing Node.js will also install npm, the package manager for Node.js.

Mac Users

Using Homebrew:

brew install node

Windows

Download for windows

Verify Node/NPM install:

$ node --version
v18.18.1

$ npm --version
9.8.1

Choose an IDE or Use Text Editor:

• Visual Studio Code - VSCode is our preferred IDE
• WebStorm
• Sublime
• iTerm

Download Repository:

Introduction to Cropping Essentials: Maximizing Efficiency with Cloudinary

• Run code from root directory, like so:

node <file_name.js>

Account Setup and Credentials:

1. If you don't have one already, create a free Cloudinary account at: https://www.cloudinary.com/signup.

2. Navigate to your Product Environment Settings. Then click API Keys. Copy the CLOUDINARY_URL into your clipboard (see yellow arrow pointing to a clipboard).

3. Create a .env file in the root of the project. Paste the CLOUDINARY_URL environment variable into your .env file.

4. After you've copy and pasted the provided format, substitute your actual values for the placeholders.

• Example of a copied CLOUDINARY_URL: CLOUDINARY_URL=cloudinary://<your_api_key>:<your_api_secret>@jen-brissman

• Your own cloud name will be automatically copied for you, so just replace <your_api_key> with your API Key and <your_api_secret> with your API Secret.

• There should be one line of code in your .env file, which should look like this:

CLOUDINARY_URL=cloudinary://YOUR_API_KEY:YOUR_API_SECRET@YOUR_CLOUD_NAME

• Doing this step properly is essential, as it will let Cloudinary know who you are and provide access to your cloud.

• Note: Keep your API Secret private. Treat it like a password. You can always regenerate a new API Key if you'd like.

Run Code: Install Node Libraries

npm i

(You will be using the cloudinary and the dotenv libraries.)

Run Code: Test Credentials

node testCredentials.js

The output should look like this:

your Cloud Name
your API Key

• Your API_SECRET is part of your CLOUDINARY_URL
• Remember to always keep your API_SECRET a secret!
  • This is why we programmed testCredentials.js to only output your cloud name and API Key (no need to keep these two credentials private)

Run Code:

In order to upload all of the assets associated with these code examples and assign the correct Public ID to each, run this file:

node upload.js

Now you're ready to get started!

Helpful Cloudinary Docs, Demos, and Tutorials:

• Resize and Crop Modes
• c_auto
• c_auto demo
• Aspect Ratio
• Image Resizing and Cropping
• Face-detection Based Cropping
• Cloudinary AI Content Analysis Add-On
• Gravity Feature
• Gravity Positions for Crops