Code von der Fotogallerie von Paul Robben.

Alle Fotos CC-BY-4.0 Paul Robben. Der Code basiert auf dem Astro Photo Grid ⬇️

Astro Photo Grid

A minimal, single-page photo gallery for Astro. See the demo!

Features

• Responsive, justified grid using modern CSS. All layout and reflow logic is handled with pure CSS—no JS required for positioning!
• Automatic lightbox integration. Images open in a full-screen preview using Fancybox, which includes swipe, drag, pinch-to-zoom, and a customizable toolbar.
• Optimized image loading and sizing. Images on the grid are optimized using Astro's <Image /> component. Images on the grid beyond the first screen are lazily loaded.

Getting Started

1. Click "Use this template" and create a new repository.
2. In astro.config.mjs, update site from https://mysite.com to your site URL.
3. In src/layouts/BaseLayout.astro, update siteName to your site name.
4. Replace the items in src/images with your own photos.
5. Good to go!

Credits

• CSS-only justified gallery layout from Helmut Wandl and SmolCSS
• Fancybox lightbox
• All demo images from Unsplash