Installing Astro Cloudinary

Getting Started

1. Installation

   npm

   npm install astro-cloudinary

   pnpm

   pnpm install astro-cloudinary

   yarn

   yarn add astro-cloudinary

2. Configuration

   Add the following variable to your .env file.

   PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

   If creating a Collection with cldAssetsLoader or managing Signed Uploads with the CldUploadWidget, additionally add:

   PUBLIC_CLOUDINARY_API_KEY="<Your API Key>"
   CLOUDINARY_API_SECRET="<Your API Secret>"

Tip

Don’t have a Cloudinary account? Sign up for free on cloudinary.com!

Global Configuration

Additional global configurations are availble to more easily manage Cloudinary environments:

PUBLIC_CLOUDINARY_SECURE_DISTRIBUTION="<Your Secure Distribution / CNAME>"
PUBLIC_CLOUDINARY_PRIVATE_CDN="<true|false>"

Tip

These are not all required to use the library.

Using Astro Cloudinary

Learn how to add one of the Astro Cloudinary components:

• CldImage: Optimize Cloudinary images with ready-to-use transformations
• CldUploadWidget: Cloudinary Upload Widget with a customizable UI
• CldVideoPlayer: Deliver Cloudinary video assets with a customizable player
• cldAssetsLoader: Load Cloudinary images and videos into Astro’s Content Layer

Or use helper methods to generate URLs:

• getCldImageUrl: Construct a Cloudinary image URL using the same API as CldImage
• getCldOgImageUrl: Create a Cloudinary image URL specifically for Social Media Cards
• getCldVideoUrl: Create a Cloudinary video URL using a similar API as CldImage