Cómo crear una galería de imágenes en Svelte
Tags: svelte, carousel, gallery, sapper
Published: 2021-02-12 11:14:56

> Artículo original: [Cómo crear una galería de imágenes en Svelte](https://alextomas.com/blog/crear-galeria-imagenes-con-svelte)

## Introducción

En este artículo veremos como crear una **galería de imágenes en Svelte** (*carousel gallery*) de una forma muy sencilla, creando tu propio componente y sin necesidad de plugins o librerías externas.

¡Así que vamos a empezar! 💃🏻

## Crear un nuevo proyecto Svelte

Para crear un proyecto en Svelte, recordemos, con el siguiente comando:

```bash
npx degit sveltejs/template <Nombre_del_proyecto>
```

Para el ejemplo voy a llamar el proyecto `galeria-svelte`:

```bash
npx degit sveltejs/template galeria-svelte
```
> `Degit` clona solo el espacio de trabajo publicado de git y no el repositorio.

Entonces, sólo nos queda instalar las dependencias con `yarn install` o `npm install` (eso ya a tu elección, yo usaré NPM).

```bash
cd galeria-svelte
npm install
```

![Creación de nuevo proyecto con Svelte](https://alextomas.com/blog/crear-galeria-imagenes-con-svelte/alex_tomas_com_2021-02-12-10-42-41.png)

Bien. Ya tenemos instalado nuestro nuevo proyecto para crear nuestra *awesome* galería de imágenes 🙃 Si ejecutas `npm run dev` deberías ver tu proyecto en `http://localhost:5000/`:

![Proyecto arrancado de Svelte](https://alextomas.com/blog/crear-galeria-imagenes-con-svelte/alex_tomas_com_2021-02-12-10-44-04.png)


## Componente `<Carousel />`

Vamos a crear nuestro componente básico para ver nuestra galería, que lo llamaremos `Carousel`:

```javascript
// Carousel.svelte
<script>
	export let images;
</script>

```
Como verás, con `export let images` le estamos diciendo al componente que le enviaremos por `props` una variable (que será un array de imágenes) llamada `images`.

```html
<!-- Carousel.svelte -->
<div class="carousel">
	<div class="carousel__container">
		{#each images as image (image.id)}
			<img src={image.path} alt={image.alt} id={image.id} height="100" />
		{/each}
	</div>
</div>
```

El html es muy sencillo de momento. Hacemos un *loop* del array de imágenes que recibimos por parámetro y ponemos una imagen para cada item.

```css
/* Carousel.svelte  */
<style>
	.carousel {
		display: flex;
		overflow-x: auto;
		position: relative;
		width: 100%;
	}
	.carousel__container {
		display: flex;
	}
</style>
```

Y finalmente le damos un poco de estilo, para ver todas las imágenes una al lado de la otra, y en el caso de que tengamos más imagenes y no entren en el ancho de la página, nos haga un scroll horizontal.

El `Carousel.svelte` completo quedaría de la siguiente forma:

```html
<script>
	export let images;
</script>

<div class="carousel">
	<div class="carousel__container">
		{#each images as image (image.id)}
			<img src={image.path} alt={image.alt} id={image.id} height="100" />
		{/each}
	</div>
</div>

<style>
	.carousel {
		display: flex;
		overflow-x: auto;
		position: relative;
		width: 100%;
	}
	.carousel__container {
		display: flex;
	}
</style>
```
## ¿Cómo puedo utilizar mi `<Carousel />`?

Para utilizar un componente en Svelte, como en otros frameworks de JavaScript es muy muy MUY fácil. Importamos el componente y lo llamamos como una etiqueta html. Vamos a verlo con un ejemplo, para ello editaremos el fichero `src/App.svelte` de ejemplo que nos genera el propio Svelte al crear el proyecto. Lo dejaremos de la siguiente forma:

```html
<script>
	import Carousel from './Carousel.svelte';
	const images = [
		{
			path: 'https://picsum.photos/id/1012/3973/2639',
			id: 'imagen-ejemplo-1',
			alt: 'Atributo ALT de ejemplo para la imagen #1',
		},
		{
			path: 'https://picsum.photos/id/1005/5760/3840',
			id: 'imagen-ejemplo-2',
			alt: 'Atributo ALT de ejemplo para la imagen #2',
		},
		{
			path: 'https://picsum.photos/id/1020/4288/2848',
			id: 'imagen-ejemplo-3',
			alt: 'Atributo ALT de ejemplo para la imagen #3',
		},
		{
			path: 'https://picsum.photos/id/1025/4951/3301',
			id: 'imagen-ejemplo-4',
			alt: 'Atributo ALT de ejemplo para la imagen #4',
		},
		{
			path: 'https://picsum.photos/id/103/2592/1936',
			id: 'imagen-ejemplo-5',
			alt: 'Atributo ALT de ejemplo para la imagen #5',
		},
		{
			path: 'https://picsum.photos/id/104/3840/2160',
			id: 'imagen-ejemplo-6',
			alt: 'Atributo ALT de ejemplo para la imagen #6',
		},
	];
</script>

<main>
	<h2 class="item__title">Mi galería de ejemplo</h2>
	<div class="item__gallery">
		<Carousel {images} />
	</div>
	<p class="item__description">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae ipsum
		possimus accusamus aut, assumenda fuga labore provident, non molestiae
		recusandae harum, fugit neque nisi quos qui nulla. Non, quaerat officia.
	</p>
</main>

<style>
	main {
		padding: 1em;
		max-width: 800px;
		margin: 0 auto;
	}
</style>
```

Como verás, importamos el componente con `import Carousel from './Carousel.svelte';` y definimos un array de imagenes con tres atributos (path, id, alt). E invocamos el componente `Carousel` pasándole el array de imágenes que nos hemos definido anteriormente:

```html
<Carousel {images} />
```

Si todo ha funcionado correctamente, que seguro que sí 🕵🏻‍♂️, deberías de ver nuestro primer carousel de imágenes:

![Ejemplo de carousel de imágenes en Svelte](https://alextomas.com/blog/crear-galeria-imagenes-con-svelte/alex_tomas_com_2021-02-12-11-01-22.png)

Fácil, ¿no?

## Parametrizar el componente

La *gracia* de los componentes es que podemos querer reutilizarlos en otras partes de la web, con diferentes parámetros y estilo, ¿no? Por ejemplo, en nuestro caso, podríamos querer diferentes tamaños de imagen para una galería u otra, o bien una separación entre imágenes, ¡o ambas cosas! Vamos a ello.

### Tamaño de imagen variable en nuestra galería

Vamos a definir un nuevo parámetro `imageHeight` en nuestro Carousel.svelte que será el tamaño máximo de las imágenes:

```javascript
// ...
// Alto máximo por defecto de 150px
export let imageHeight = 150;
// ...
```

Y se lo pasamos al html de la siguiente forma:

```html
<!-- ... -->
<img
	src={image.path}
	alt={image.id}
	id={image.id}
	style={`height: ${imageHeight}px;`}
/>
<!-- ... -->
```

> Elimina la la propiedad `height="100"` que le pasábamos inicialmente porque ahora se lo vamos a pasar dinámicamente. Se lo añado a la etiqueta `style` porque luego le pasaremos otra propiedad css 🙃

Y ahora ya podemos crear nuestra galerías con diferentes tamaños de imagen.

#### Galería de imágenes con 200px de alto

```html
<Carousel {images} imageHeight={200} />
```

![Galería de imágenes con 200px de alto](https://alextomas.com/blog/crear-galeria-imagenes-con-svelte/alex_tomas_com_2021-02-12-11-14-33.png)

#### Galería de imágenes con 275px de alto

```html
<Carousel {images} imageHeight={275} />
```

![Galería de imágenes con 275px de alto](https://alextomas.com/blog/crear-galeria-imagenes-con-svelte/alex_tomas_com_2021-02-12-11-15-42.png)

Y por supuesto puedes reutilizar el componente y poner dos galería con diferentes tamaños:

```html
<Carousel {images} imageHeight={205} />
<Carousel {images} />
```

![Dos galerías con el mismo componente pero diferentes tamaños](https://alextomas.com/blog/crear-galeria-imagenes-con-svelte/alex_tomas_com_2021-02-12-11-17-15.png)

> Nota que al segundo `Carousel` no le he pasado la propiedad `imageHeight`, por lo que coge por defecto 150 que es el valor por defecto declarado en `Carousel.svelte` 🎉

### Separación entre imágenes

Vamos a hacer otra pequeña configuración. Vamos a separar, o no, las imágenes entre sí. Para ello usaremos una nueva propiedad llamada `imageSpacing`:

```javascript
// ...
// Por defecto las imágenes no van separadas
export let imageSpacing = 0;
// ...
```

Y se lo pasamos al html de la siguiente forma:

```html
<!-- ... -->
<img
	src={image.path}
	alt={image.id}
	id={image.id}
	style={`height: ${imageHeight}px; margin-right: ${imageSpacing}px`}
/>
<!-- ... -->
```

Y ahora ya podemos crear nuestra galerías con las imágenes separadas los pixels que quedamos, por ejemplo:


#### Galería de imágenes de 140px de alto y separadas 3px

```html
<Carousel {images} imageHeight={140} imageSpacing={3} />
```

![Galería de imágenes de 140px de alto y separadas 3px](https://alextomas.com/blog/crear-galeria-imagenes-con-svelte/alex_tomas_com_2021-02-12-11-23-15.png)

Cómo verás es muy sencillo su configuración y su uso.

## Código final

Finalmente el componente debería haberte quedado así:

```html
<script>
	export let images;
	export let imageHeight = 150;
	export let imageSpacing = 0;
</script>

<div class="carousel">
	<div class="carousel__container">
		{#each images as image (image.id)}
			<img
				src={image.path}
				alt={image.alt}
				id={image.id}
				style={`height: ${imageHeight}px; margin-right: ${imageSpacing}px`}
			/>
		{/each}
	</div>
</div>

<style>
	.carousel {
		display: flex;
		overflow-x: auto;
		position: relative;
		width: 100%;
	}
	.carousel__container {
		display: flex;
	}
</style>
```

## Repositorio en Github

Repo: https://github.com/alextomas80/galeria-imagenes-svelte

Y esto es todo. Espero que te pueda servir 😉