Add images to Sanity with Cloudinary (video tutorial)

Overview

Learn how to integrate Cloudinary with Sanity CMS in a Next.js application. This tutorial shows you how to install the Cloudinary plugin, update your schema and components, and apply image transformations using the Cloudinary Next.js SDK. For more information, see the Sanity Cloudinary plugin page.

Video tutorial

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Introduction to Sanity and Cloudinary

0:00	Sanity is an intuitive Content Management System (CMS). Learn how to enhance its image capabilities with Cloudinary's cloud-based image uploading and transformation features.

Install the Cloudinary plugin

0:42	Install the Cloudinary plugin for Sanity using npm and configure it in your Sanity config.ts file by importing and adding the schema plugin to your config.

Update your schema

0:56	Modify your post schema file to change the image field type from image to cloudinary.asset to use Cloudinary for image storage.

Update the component code

1:05	Update your CoverImage component to work with the new Cloudinary asset type by removing references to source.asset and adding res.cloudinary.com to your Next.js configuration.

Test in Sanity Studio

1:40	See the updated image field in Sanity Studio, select an image from Cloudinary, and publish your post to verify the image displays correctly in your blog.

Install the Cloudinary Next.js SDK

2:17	Install next-cloudinary to use the CldImage component, which provides powerful image transformation capabilities in your Next.js application.

Use CldImage component

2:29	Import CldImage from next-cloudinary and replace the standard Next.js Image component with CldImage from the SDK. Then, set the cloud name of your product environment as an environment variable, NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME. For Next.js v14, add the useClient directive to your component.

Apply image transformations

3:09	Add Cloudinary transformations to your images through the CldImage component to enhance visual quality, apply effects, and optimize delivery. With the plugin installed, you now have full access to Cloudinary's transformation capabilities.

Keep learning

If you like this, you might also like...

 

 

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.