Cloudinary & Astro
Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.
Cloudinary is an image and video platform and headless Digital Asset Manager (DAM) that lets you host assets and deliver them from their content delivery network (CDN).
When delivering from Cloudinary, you additionally get access to their Transformation API, giving you the ability to edit your assets with tools like background removal, dynamic cropping and resizing, and generative AI.
Using Cloudinary in Astro
Section titled Using Cloudinary in AstroCloudinary supports a wide variety of SDKs that can be used depending on your Astro environment.
The Cloudinary Astro SDK provides native Astro components, including image, video, and upload components, as well as a content loader that can be used with Astro content collections.
Alternatively, both the Cloudinary Node.js SDK and JavaScript SDK can be used to generate URLs for your images. The Node.js SDK can additionally make requests to the Cloudinary API including uploading assets, requesting resources, and running content analysis.
Prerequisites
Section titled Prerequisites- An existing Astro project
- A Cloudinary account
Installing Astro Cloudinary
Section titled Installing Astro CloudinaryInstall the Cloudinary Astro SDK by running the appropriate command for your package manager:
Configuring your account
Section titled Configuring your accountCreate a new .env
file in the root of your project and add your Cloudinary credentials:
Using Cloudinary images
Section titled Using Cloudinary imagesAdd images in .astro
components by passing image data (e.g. src
, width
, alt
) to the <CldImage>
component. This will automatically optimize your image and give you access to the Transformations API.
See Cloudinary’s <CldImage>
documentation for more information.
Using Cloudinary videos
Section titled Using Cloudinary videosTo add video to your .astro
components, add the <CldVideoPlayer>
and pass the appropriate properties. This component will automatically optimize and embed your video using the Cloudinary Video Player.
See Cloudinary’s <CldVideoPlayer>
documentation for more information.
Enabling Cloudinary uploads
Section titled Enabling Cloudinary uploadsTo enable file uploading in your website or app’s UI, add the <CldUploadWidget>
which will embed the Cloudinary Upload Widget.
The following example creates a widget to allow unsigned uploads by passing an unsigned Upload Preset:
For signed uploads, you can find a guide and example on the Astro Cloudinary docs.
See Cloudinary’s <CldUploadWidget>
documentation for more information.
Cloudinary content loader
Section titled Cloudinary content loaderThe Cloudinary Astro SDK provides the cldAssetsLoader
content loader to load Cloudinary assets for content collections.
To load a collection of images or videos, set loader: cldAssetsLoader ({})
with a folder
, if required:
You can then use the getCollection()
or getEntry()
query functions to select one or many images or videos from your collection.
See Cloudinary’s cldAssetsLoader
documentation for more information.
Generating Cloudinary image URLs
Section titled Generating Cloudinary image URLsThe Astro Cloudinary SDK provides a getCldOgImageUrl()
helper for generating and using URLs for your images. Use this when you need a URL instead of a component to display your image.
One common use for a URL is for an Open Graph image in <meta>
tags for social media cards. This helper, like the components, provides you access to Cloudinary transformations to create dynamic, unique social cards for any of your pages.
The following example shows the necessary <meta>
tags for a social media card, using getCldOgImageUrl()
to generate an Open Graph image:
Find Cloudinary Social Media Card templates on the Cloudinary docs.
See Cloudinary’s getCldOgImageUrl()
documentation for more information.
Using Cloudinary in Node.js
Section titled Using Cloudinary in Node.jsFor more complex asset management, uploading, or analysis, you can use the Cloudinary Node.js SDK when working in an Astro Node.js environment.
Install the Cloudinary Node.js SDK by running the appropriate command for your package manager:
Add the following environment variables in your .env
file:
Configure your account with a new Cloudinary instance by adding the following code between the fences of your Astro component:
This will give you access to all of the Cloudinary APIs to allow you to interact with your images, videos, and other supported files.
Learn how to upload files using the Cloudinary Node.js SDK with Astro Forms.
Official Resources
Section titled Official Resources- Cloudinary Astro SDK
- Cloudinary Node.js SDK
- Using Cloudinary with Astro (YouTube)
- Code Examples Using Cloudinary Astro SDK (GitHub)