> ## Documentation Index
> This page is part of the Image and Video APIs product. Fetch the complete documentation index for Image and Video APIs at: https://cloudinary.com/documentation/llms-image-and-video-apis.txt?referrer=docpage and then use it to discover all relevant pages before exploring further.
> If your task extends beyond this product, fetch the top-level index covering all Cloudinary products and topics at: https://cloudinary.com/documentation/llms.txt?referrer=docpage

# 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](nextjs_integration). For more information, see the [Sanity Cloudinary plugin](sanity_partner_built_integration) page.

## Video tutorial

  This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.
{videoTranscript:publicId=training/Add_Images_to_Sanity_with_Cloudinary}

## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.### Introduction to Sanity and Cloudinary
{table:class=tutorial-bullets}|  |
| --- | --- |
| | 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
{table:class=tutorial-bullets}|  |
| --- | --- |
| | Install the [Cloudinary plugin for Sanity](https://www.sanity.io/plugins/sanity-plugin-cloudinary) using `npm` and configure it in your Sanity `config.ts` file by importing and adding the schema plugin to your config. |

### Update your schema
{table:class=tutorial-bullets}|  |
| --- | --- |
| | Modify your post schema file to change the image field type from `image` to `cloudinary.asset` to use Cloudinary for image storage. |

```next.js
defineField({
  name: 'coverImage'
  title: 'Cover Image'
  type: 'cloudinary.asset',
  options: {
    hotspot: true,
  },
})
```

### Update the component code
{table:class=tutorial-bullets}|  |
| --- | --- |
| | 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. |

```next.js
<Image
  className="h-auto w-full"
  width={2000}
  height={1000}
  alt=""
  src={source.secure_url}
  sizes="100vw"
  priority={priority}
/>
```

### Test in Sanity Studio
{table:class=tutorial-bullets}|  |
| --- | --- |
| | 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
{table:class=tutorial-bullets}|  |
| --- | --- |
| | Install `next-cloudinary` to use the `CldImage` component, which provides powerful image transformation capabilities in your Next.js application. |

### Use CldImage component
{table:class=tutorial-bullets}|  |
| --- | --- |
| | 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. |

```next.js
import { CldImage from 'next-clouodinary' }

<CldImage
  className="h-auto w-full"
  width={2000}
  height={1000}
  alt=""
  src={source.secure_url}
  sizes="100vw"
  priority={priority}
/>
```

### Apply image transformations
{table:class=tutorial-bullets}|  |
| --- | --- |
| | 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. |

```next.js
<CldImage
  className="h-auto w-full"
  width={2000}
  height={1000}
  alt=""
  src={source.secure_url}
  sizes="100vw"
  priority={priority}
  tint="equalize:80:blue:blueviolet"
/>
```
## Keep learning

> **READING**:
>
> * Watch more [Dev Hints videos](https://www.youtube.com/playlist?list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8) on the [Cloudinary YouTube channel](https://www.youtube.com/cloudinary).

> * Explore the [Cloudinary Next.js SDK documentation](nextjs_integration).

> * Learn more about [image transformations and optimization](image_transformations).

> * [Integrate Cloudinary with third-party platforms](integrations).

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

[Transformation Basics](transformation_basics_tutorial)

Learn the basics of a transformation URL

[Configure the Next.js SDK](nextjs_configuration_tutorial)

Install and configure the Cloudinary Next.js SDK

[Optimize Images](image_optimization_basics_tutorial)

Deliver faster images with q_auto and f_auto

&nbsp;

&nbsp;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.
&nbsp;