> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Image gallery with Astro and Cloudinary (video tutorial)


## Overview

Learn how to build an image gallery in [Astro](https://astro.build/) by sourcing assets directly from your Cloudinary Media Library using the Astro content layer. This tutorial shows how to use the `cldAssetsLoader` from the [Astro Cloudinary community-developed library](https://astro.cloudinary.dev/) to define a Cloudinary collection, fetch assets with `getCollection`, and display them using the `CldImage` component with automatic format optimization, responsive sizing, and AI-powered smart cropping.

## Video tutorial

  This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.### Introduction
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | Astro's content layer can source content from many places, including Cloudinary. Using the `cldAssetsLoader` from the [Astro Cloudinary community-developed library](https://astro.cloudinary.dev/), you can define a collection that pulls images and videos directly from your Cloudinary media library. |

### Defining a Cloudinary collection
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=48 :player=cld} | In your Astro project's `src/content/config.ts` file, define a collection using `defineCollection` from `astro:content`. Set the `loader` to `cldAssetsLoader()`, imported from `astro-cloudinary/loaders`. By default, the loader fetches all assets from the root of your Cloudinary account using the Admin API. Pass a folder name in the loader options to limit results to a specific folder. |

### Fetching assets in a page
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=10 :player=cld} | In any Astro page or component, import `getCollection` from `astro:content` and call it with your collection name to fetch all assets. The returned data includes metadata for each asset from your Cloudinary account, such as `public_id`, `secure_url`, `width`, `height`, and more. |

### Displaying images
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=50 :player=cld} | Loop through the fetched assets and render each image using a standard `<img>` tag with `asset.data.secure_url` as the source. Each asset object exposes useful metadata from Cloudinary's resource response, including dimensions, format, and tags, giving you full control over how images are displayed. |

### Customizing the loader
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=3 :sec=23 :player=cld} | Because `cldAssetsLoader` uses the Admin API under the hood, you can pass a configuration object to customize what it fetches. Filter assets by folder (e.g., `folder: "e-commerce/sneakers"`), or request additional data such as contextual metadata, moderation status, and structured metadata fields, depending on what your project needs. |

### CLD Image component and transformations
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=3 :sec=50 :player=cld} | Because your assets are sourced from Cloudinary, you can go a step further and apply [image transformations](image_transformations) directly in your Astro components. Import `CldImage` from `astro-cloudinary` and replace the `<img>` tag with it, using `asset.data.public_id` as the `src`. Pass `width` and `height` from the asset data for the correct aspect ratio. `CldImage` automatically applies `f_auto` and `q_auto` [optimizations](image_optimization), delivering the best format and quality for each browser. |

### Responsive sizing
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=4 :sec=54 :player=cld} | Add the `sizes` attribute to `CldImage` to define how wide the image should be at different viewport sizes. For example, a four-column grid might always display images at roughly 25% of the viewport width. Cloudinary uses this information to deliver only the pixels needed for each device, reducing bandwidth without sacrificing visual quality. |

### AI-powered smart cropping
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=5 :sec=18 :player=cld} | Add a `crop: "auto"` transformation to `CldImage` to enable Cloudinary's AI-powered [subject-aware cropping](resizing_and_cropping). Every image is cropped at the server level, not hidden with CSS, so you're never sending unnecessary pixels. Cloudinary's AI detects the most important subject or region in each photo and crops to preserve it. |
## Keep learning

> **READING**:
>
> * Watch more [Dev Hints videos](https://www.youtube.com/playlist?list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8) on the [Cloudinary YouTube channel](https://www.youtube.com/cloudinary).

> * Learn more about the [Astro Cloudinary community-developed library](https://astro.cloudinary.dev/) for additional components and integration options.

> * Explore [image optimization](image_optimization) to understand automatic format and quality delivery.

> * See how to [resize and crop images](resizing_and_cropping) including AI-powered subject-aware cropping.

> * Discover how to apply [image transformations](image_transformations) such as overlays, effects, and color adjustments.

#### If you like this, you might also like...

  
  
  
    Upload Images in Astro
    Upload images from an HTML form in Astro.js
  

  
  
  
    List Images in Next.js
    List images using the Next.js app router and Node.js SDK 
  

  
  
  
    Using the Next.js Image Component
    Deliver images using the Next.js Image component 
  

&nbsp;

&nbsp;Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.
&nbsp;