Front-End Development Integrating Cloudinary with Astro Building an Image Upload Feature with JavaScript Mastering Image Alignment: Centering Images with HTML & CSS Adding Video to Your React Native App with react-native-video HTML Image Slider: Do It Yourself and 1-Step Image Gallery Widget How to Effectively Manage Digital Assets in a PHP Image Gallery Introducing Angular Image Editor: Your New Editing Too Mastering Javascript Image Annotation Mastering JavaScript Image Popup Python Video Player: 3 Free Options and a Quick Tutorial Image Recognition Machine Learning: Use Cases and Common Algorithms HTML/CSS: How to Center Images Vertically and Horizontally How to Create an Image Map Understand CSS Background Position with 4 Simple Examples Java for Image Processing: 4 Libraries You Should Know Python Video Processing: 6 Useful Libraries and a Quick Tutorial Blur Image CSS: Two Ways to Blur Images for Gorgeous Effects Designing a Video Flipping App for Android Build an App for Embedding Video Watermarks on Android Devices Change Image on Hover with HTML and CSS How to Align Images with CSS Full Page Background Image with CSS: Tutorial and 5 Automation Tips Using CSS to Scale Page Elements and a Better Way to Scale Your Images CSS Background Image: Quick Tutorial and 3 Automation Tips Featured Image: Best Practices to Feature Images on Your Website Image Gallery Websites: Tips and Tricks for a Stunning Image Gallery 6 Ways to Stretch a Background Image with CSS Auto Cropping for Images and Video: Features & Best Practices FLAC vs. WAV: 4 Key Differences and How to Choose Converting Audio to Video: A Practical Guide FLAC vs. AIFF: 5 Key Differences and How to Choose FLAC vs. MQA: 5 Key Differences and How to Choose Converting WAV Files To OGG The Ultimate Guide On Converting OGG Files To WAV Sound Choices: FLAC vs. MP3 AAC vs MP3 – The Future of Audio Files All about AIFF and how it compares to WAV and MP3 Integrating Cloudinary with Netlify Integrating Cloudinary with Svelte and SvelteKit Integrating Cloudinary with Nuxt Integrating Cloudinary with Gatsby File Upload as a Service: How It Works and 5 Leading Solutions Native Mobile App Development Creative Uses for CSS Inner Border and 3 Ways to Set a Border Integrating Cloudinary with Next.js Front-End Development: The Complete Guide

Integrating Cloudinary with Astro

integrating cloudinary with astro

Astro is a JavaScript-based web framework that helps developers build fast, content-driven websites.

Cloudinary can help Astro developers build richer, performance-first visual experiences by leveraging automatic optimization, transformations like dynamic cropping and resizing, and media management tools like uploading with our drop-in Upload Widget.

Using Cloudinary with Astro

There are multiple options for integrating Cloudinary with an Astro app.

Astro Cloudinary

Astro Cloudinary is the recommended way for using Cloudinary in an Astro app. It comes with out-of-the-box image and video optimization along with Cloudinary’s transformation API allowing you to customize your images on-the-fly.

Important: Astro Cloudinary is developed, tested and maintained by the Cloudinary Developer Experience Team and broader developer community. Bug fixes and feature requests should be submitted in the relevant repository.

The CldImage component wraps the Unpic Astro Image component, providing you with a state-of-the-art base image component, extended with Cloudinary tech.

This includes features beyond automatic optimization like dynamic cropping and resizing, background removal, generative AI, image and text overlays, and a lot more.

For basic usage, first install the package with:

npm install astro-cloudinary

Next, add an environment variable to your .env file configuring your Cloudinary cloud name:

CLOUDINARY_CLOUD_NAME="Your Cloudinary Cloud Name".

Need help finding your credentials? Learn more.

To use the CldImage component, pass in your image’s Public ID along with its dimensions and some alternative text:

<CldImage
  src="<Public ID>"
  width="600"
  height="600"
  alt=”<Description>”
/>

To use the CldVideoPlayer component, similarly pass in your video’s Public ID and dimensions:

<CldVideoPlayer
  src="<Public ID>"
  width="1920"
  height="1080"
/>

To source Cloudinary images and videos into an Astro project, use the cldAssetLoader as part of Astro’s Content Layer:

import { cldAssetsLoader } from 'astro-cloudinary/loaders';

export const collections = {
  assets: defineCollection({
    loader: cldAssetsLoader()
  }),
}

Where then you can access the assets using the getCollection function:

import { getCollection } from 'astro:content';
const assets = await getCollection('assets');

Learn more about all of the features at: https://astro.cloudinary.dev/

Using the Astro Image component

The Astro Image component supports loading external providers like Cloudinary. To use Cloudinary URLs with Astro Image, you simply need to authorize Cloudinary URLs as a remote image source.

For example, to configure Cloudinary as a remote source: 

export default defineConfig({
  image: {
    domains: ["res.cloudinary.com"],
  }
});

For more information on how to use the Astro Image component with Cloudinary, head over to the Astro docs.

Building Image & Video URLs with the Cloudinary JavaScript SDK

The JS URL Gen SDK allows developers to integrate with Cloudinary in any JavaScript-based applications.

You can use the JavaScript SDK to generate image and video URLs along with any transformations you want.

To get started, first install the JavaScript SDK with:

npm install @cloudinary/url-gen

Set up a new instance of Cloudinary with your cloud’s configuration:

import { Cloudinary } from '@cloudinary/url-gen';

const cld = new Cloudinary({
  cloud: {
    cloudName: '<Your Cloud Name>'
  }
});

Then use one of the available methods to generate your asset URL such as:

const myImage = cld.image('<Public ID>').format('auto').quality('auto').toURL().

Which will build an image URL that will use automatic optimization.

Learn more over on the Cloudinary Docs.

Uploading & Managing Media Assets with the Cloudinary Node.js SDK

When working in an Astro project, you have access to a server environment that allows you to work in Node.js.

Inside Node, you can take advantage of the Cloudinary Node.js SDK to upload files and interact with other Cloudinary APIs like search and administration.

To get started, first install the Cloudinary Node.js SDK:

npm install cloudinary

Configure the package and your Cloudinary account:

import { v2 as cloudinary } from 'cloudinary';

cloudinary.config({
  cloud_name: '<Your Cloud Name>',
  api_key: '<Your API Key>', // Store in .env
  api_secret: '<Your API Secret'>, // Store in .env
});

const result = await cloudinary.uploader.upload('/path/to/image');

Note: Avoid storing your credentials directly in the code to avoid compromising your account. Use environment variables instead to securely use your API key, API secret, and optionally your Cloud Name within your application.

Learn more over on the Cloudinary Docs.

More Resources

Learn more about how to use Cloudinary with Astro:


            
Last updated: Oct 1, 2024