Back to templates
Add a responsive image gallery with Netlify Image CDN for automatic resizing, format conversion (AVIF/WebP), and thumbnail generation — no image processing library needed.
Using your project's framework, add a responsive image gallery to this site that uses Netlify's built-in Image CDN for automatic optimization.
Gallery purpose: {{GALLERY_PURPOSE}}
Number of sample images (defaults to 4 if not specified): {{IMAGE_COUNT}}
The gallery should:
1. **Match the site's existing design** — use its colors, typography, and spacing for all gallery elements.
2. **Gallery page** with a grid of thumbnail images that open a larger view when clicked. Use a responsive grid layout that adapts from 1 to 4+ columns.
3. **Netlify Image CDN** for all image transformations — no image processing libraries needed. Use `/.netlify/images?url=<path>` with parameters: `w` for width, `h` for height, `fit=cover` for cropping, `fm=avif` for modern format, `q` for quality. Add `srcset` with widths 400, 800, 1200 for responsive loading.
4. Add `loading="lazy"` to all images except the first row. Add `fetchpriority="high"` to the first visible image.
5. **Lightbox** for viewing full-size images with previous/next navigation and keyboard support (arrow keys, Escape to close).
6. **Sample images** from `https://picsum.photos` with brief alt text and captions matching the gallery purpose. Add the picsum domain to `netlify.toml` for Image CDN remote image support:
```toml
[images]
remote_images = ["https://picsum\\.photos/.*"]
```
7. **Gallery data** as a simple array at the top of the file with `src`, `alt`, and `caption` fields, so replacing placeholders with real images is straightforward.
8. Add a link to the gallery in the site navigation. If there is no navigation, create one and match the site's design
Variables
How many placeholder images to include. Defaults to 4.
What the gallery is for — this shapes the layout, captions, and alt text of sample images. Example: Product photos for an online store
Did you find this doc useful?
Your feedback helps us improve our docs.