Skip to content

Installing Astro Cloudinary

Getting Started

  1. Installation

    npm install 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>"

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>"

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

Or use a loader to source images and videos into Astro:

  • 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