GalleryView provides a layout used by Google Photos and 500px as what shows in the screenshot above which I think could be used in most scenarios. It displays photos with the same height in each line and keeps the original aspect ratio of each photo.
The implementation was inspired by a post Pure CSS implementation of Google Photos / 500px image layout.
npm install svelte-gallery-view
import GalleryView from 'svelte-gallery-view'
<GalleryView
photos={photos}
gutter={2}
baseHeight={200}
photoClass="photo"
onPhotoClick={(photo) => {
showPhotoDetails(photo.id);
}}
/>
photos
(required)
```typescriptinterface Photo {
/**
* URL or unsolved URL of the photo.
/
url: string | Promise
//...
photos: Photo[] = [];
- `baseHeight` (optional, default: 200)
```javascript
/**
/* Base height of each line, in px. The final height of each line
/* would be various because of adjustments.
*/
baseHeight: number = 200;
gutter
(optional, default: 2)
```javascript
/**
/* Gap between every two photos, in px.*/ gutter: number = 2;
- `photoClass` (optional, default: undefined)
```javascript
/**
/* Extra class names would be applied to the photo elements.
*/
photoClass: string | undefined;
onPhotoClick
(optional, default: undefined)
```javascript
/**
/* Callback function which handles click events triggered by each photo.*/ onPhotoClick: ((photo: Photo) => any) | undefined;
## Developing
1. Start [SvelteKit](https://kit.svelte.dev/):
```bash
npm run dev
Edit the component files in src/lib
, save it and watch the magic happens.
Navigate to localhost:7070 to see the components live.
This is a simple and intuitive method that can be done through Storybook, with the help of Cypress. And example and pre-made test scripts can be found in this repository, and more info can be found in Storybook's docs.
In this repo you'll find a basic workflow that uses Chromatic for snapshot testing.