Astro Cloudinary: The Image and Video API for Astro

Astro has become a major player in the JavaScript ecosystem, giving developers the tools they need to build fast, content-driven websites. With it comes a vast collection of extensions and integrations, to build those sites with the tools you love.

And now, we’re adding an SDK to help you build performance and visual experiences on the web with Cloudinary.

Astro Cloudinary brings first-class support for Cloudinary in the Astro ecosystem, allowing you to easily optimize and transform images and videos, drop in the Cloudinary Upload Widget, generate social media cards, and even load assets with Astro Collections.

The SDK brings the Cloudinary features you love, including transforming images using the CldImage component with dynamic cropping and resizing, background removal, generative AI, and all of the filters and effects.

Video playback and the CldVideoPlayer component uses the Cloudinary Video Player, ensuring you can give your visitors a delightful embedded video experience.

The Cloudinary Upload widget can be easily dropped in with the CldUploadWidget component, giving you easy access to user-generated content (UGC).

Social media cards, which are critical for social engagement, can be dynamically generated with the cldOgImageUrl helper.

And your media library can be loaded as an Astro Collection with the cldAssetsLoader loader.

Astro Cloudinary gives you everything you need to build great experiences for your visitors.

Getting started with Astro Cloudinary is easy.

First, install the package in your Astro project:

```

npm install astro-cloudinary

```

Add your Cloudinary cloud name as an environment variable inside of .env:

```

PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

```

If using the Upload Widget, you'll also need your API Key and Secret:

```

PUBLIC_CLOUDINARY_API_KEY="<Your API Key>"

CLOUDINARY_API_SECRET="<Your API Secret>"

```Code language: HTML, XML (xml)

From there, you can use any of the components, like CldImage, to render and transform images on your page.

```

---

import { CldImage } from 'astro-cloudinary';

---

<CldImage

  src="cld-sample-5"

  width="800"

  height="600"

  replaceBackground="cartoon outer space"

  alt="Shoe that is out of this world!"

  sizes="100vw"

/>

```Code language: HTML, XML (xml)

To learn more about what components, APIs, and features are available, head over to the Astro Cloudinary Docs. For bugs, issues, or feature requests, find Astro Cloudinary on GitHub.