Getting Started with cldAssetsLoader

The Cloudinary Assets Loader allows you to query your Cloudinary images, videos, and other resources using the Astro Collections.

Basic Usage

cldAssetsLoader allows you to specify exactly which assets you’d like to query and store in an Astro Collection, including a folder and how many assets in total you would like to request.

Start by defining a new Collection with defineCollection:

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

export const collections = {
  assets: defineCollection({
    loader: cldAssetsLoader({
      limit: 4,
      folder: 'samples/food'
    })
  }),
}

• Expand Snippet
• Collapse Snippet

Getting Assets from a Collection

You can use getCollection to retrieve your assets:

• 
• 
• 
• 

---
import { CldImage } from 'astro-cloudinary';
import { getCollection } from 'astro:content';
const assets = await getCollection('<Collection>');
---
<ul>
  {assets.map(asset => {
    return (
      <li>
        <CldImage
          src={asset.data.public_id}
          width={asset.data.width}
          height={asset.data.height}
          alt=""
        />
      </li>
    )
  })}
</ul>

• Expand Snippet
• Collapse Snippet

By default, using cldAssetsLoader will query the assets in the root of your Cloudinary account, but you can customize the request with options depending on the assets you want to find.

Getting a Single Asset from a Collection

You can use getEntry to retrieve a single asset:

---
import { CldImage } from 'astro-cloudinary';
import { getEntry } from 'astro:content';
const asset = await getEntry('<Collection>', '<Public ID>');
---
<CldImage
  src={asset.data.public_id}
  width={asset.data.width}
  height={asset.data.height}
  alt=""
/>

• Expand Snippet
• Collapse Snippet

Learn More about CldImage

• Configuration