cldAssetsLoader Examples

Basic Collections

Cloudinary supports a wide variety of powerful transformations that allow you to not only deliver, but easily edit and build new images on the fly.

Default

• 
• 
• 
• 
• 
• 
• 
• 

Not displaying all assets for performance.

Total Assets in Collection: 10

Defining the Collection

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

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

• Expand Snippet
• Collapse Snippet

Accessing the Collection

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

• Expand Snippet
• Collapse Snippet

Large Collections

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Not displaying all assets for performance.

Total Assets in Collection: 1200

Defining the Collection

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

export const collections = {
  assets: defineCollection({
    loader: cldAssetsLoader({
      limit: 1200,
      folder: '<Folder Name>'
    })
  }),
}

• Expand Snippet
• Collapse Snippet

Accessing the Collection

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

• Expand Snippet
• Collapse Snippet

Advanced

Tags, Context, & Metadata

• 
• 
• 
• 

Defining the Collection

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

export const collections = {
  assets: defineCollection({
    loader: cldAssetsLoader({
      context: true,
      tags: true,
      moderation: true,
      metadata: true,
    })
  }),
}

• Expand Snippet
• Collapse Snippet

Accessing the Collection

---
import { getCollection } from 'astro:content';
import { CldImage } from 'astro-cloudinary';
const assets = await getCollection('assets');
---
{assets.map(asset => {
  return (
    <CldImage
      src={asset.data.public_id}
      width={asset.data.width}
      height={asset.data.height}
      crop={{
        source: true,
        type: 'auto'
      }}
      {...(asset.data.context?.custom?.caption && ({
        overlays: [
          {
            text: {
              color: 'black',
              fontFamily: 'Source Sans Pro',
              fontSize: 150,
              fontWeight: 'black',
              text: asset.data.context.custom.caption.toUpperCase(),
              letterSpacing: -6,
            },
            position: {
              gravity: 'south_west',
              x: 50,
              y: 50
            }
          },
        ]
      }))
      }
      alt={asset.data.context?.custom?.alt || ''}
    />
  )
})}

• Expand Snippet
• Collapse Snippet