SvelteKit Simple Image Gallery

sveltekit-simple-image-gallery

Demo code for creating a simple responsive image gallery with Svelte. The code accompanies the post on creating a simple responsive image gallery SvelteKit. If you have any questions, please drop a comment at the bottom of that page.

Building and previewing the site

If you're seeing this, you've probably already done this step. Congrats!

git clone https://github.com/rodneylab/sveltekit-simple-image-gallery.git
cd sveltekit-simple-image-gallery
pnpm install # or npm install
pnpm run dev

Building

pnpm run build

You can preview the built app with pnpm run preview, regardless of whether you installed an adapter. This should not be used to serve your app in production.

Customising for your own images

1. The project includes the raw images in the src/lib/assets folder. Add your images there.
2. src/data/image.json links the image files names with alt text and titles. Update this manually or generate it based on an existing source for your images.
3. src/data/generated has a JavaScript file for each base image, each containing data needed to create the responsive and next-gen image set from the base images. I generated these files automatically using the generate-responsive-image-data.js script in the project root directory. You can update it to suit your needs, then run it with node. I prefer using vite-node (which will also work with TypeScript projects):

pnpm add -D vite-node
pnpm vite-node generate-responsive-image-data.js

Hope that’s clear, but let me know if I can improve the explanation.

Feel free to jump into the Rodney Lab matrix chat room.