https://github.com/rodneylab/sveltekit-simple-image-gallery

Simple Svelte responsive image gallery: create a ribbon gallery, using Svelte dimension bindings to maintain the aspect ratio of all images.
https://github.com/rodneylab/sveltekit-simple-image-gallery

image-gallery lazyload-images next-gen responsive-images responsive-layout svelte sveltekit vite-imagetools

Last synced: 3 months ago
JSON representation

Simple Svelte responsive image gallery: create a ribbon gallery, using Svelte dimension bindings to maintain the aspect ratio of all images.

• Host: GitHub
• URL: https://github.com/rodneylab/sveltekit-simple-image-gallery
• Owner: rodneylab
• License: bsd-3-clause
• Created: 2021-10-28T13:54:15.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-04-29T08:26:07.000Z (9 months ago)
• Last Synced: 2024-05-08T23:06:49.008Z (9 months ago)
• Topics: image-gallery, lazyload-images, next-gen, responsive-images, responsive-layout, svelte, sveltekit, vite-imagetools
• Language: JavaScript
• Homepage:
• Size: 4.47 MB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: .github/SECURITY.md

Awesome Lists containing this project

README

        




  

    

  





  SvelteKit Simple Image Gallery



# sveltekit-simple-image-gallery

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/rodneylab/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!

```bash

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

```bash

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):

```shell

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](https://matrix.to/#/%23rodney:matrix.org).