svelte-gallery
Version:
Intelligent masonry style photo gallery that maintains image aspect ratios in perfect rows.
40 lines (28 loc) • 2.01 kB
Markdown
# Svelte Gallery
[](https://www.npmjs.com/package/svelte-gallery) [](https://github.com/peppercornstudio/svelte-gallery/blob/master/LICENSE)
Intelligent masonry-style photo gallery that maintains image aspect ratios in perfect rows. Svelte gallery analyses a graph of all possible row combinations to find the ideal gallery layout based on a target row height.
Originally forked from [fergaldoyle/image-masonry](https://github.com/fergaldoyle/image-masonry), `svelte-gallery` is a full rewrite taking the core layout logic and focussing on an updated, maintained svelte implementation.
### Usage
```sh
npm i svelte-gallery
```
```svelte
<script>
import Gallery from 'svelte-gallery';
const images = [
{ src: 'https://source.unsplash.com/random', width: 600, height: 400 },
{ src: 'https://source.unsplash.com/random', width: 400, height: 600 }
{ src: 'https://source.unsplash.com/random', width: 800, height: 1200 }
{ src: 'https://source.unsplash.com/random', width: 300, height: 200 }
];
</script>
<Gallery {images} />
```
### Properties
| Property | Description | Type | Default |
| ---------------- | ------------------------------------------------------------------- | -------------------- | ------- |
| `images` | Images to display. Must (native) `width` and `height` values | `HTMLImageElement[]` | `[]` |
| `rowHeight` | Ideal row height to aim for in px | `number` | `220` |
| `gutter` | Gap between images in the gallery in px | `number` | `8` |
| `imageComponent` | Optional custom image component, passed all props in `images` array | `SvelteComponent` | `img` |