Making the web svelter with SvelteKit

# Making the web Svelter with SvelteKit

### Part 5 - Moving the PhotoAlbum index to a separate component

[Back to part 4](part4_slides.html)
						---
						## PhotoAlbum Index component

- Create /src/lib/components/PhotoAlbumIndex.svelte, and cut the relevant code form +page.js

```svelte []
						<div class="photo-albums-area">
						    <h1>Fotoalbum</h1>

<div class="photo-album-grid">
						        <a href="/album/makro">
						            <div class="grid-item">
						                <img class="grid-item-photo" src="/images/IMGP4117.jpg">
						                <div class="grid-item-caption">
						                    <h1>makro</h1>
						                </div>
						            </div>
						        </a>
						        <a href="/album/norge2020">
						            <div class="grid-item">
						                <img class="grid-item-photo" src="/images/background1.jpg">
						                <div class="grid-item-caption">
						                    <h1>Norge 2020</h1>
						                </div>
						            </div>
						        </a>
						    </div>
						</div>
						```
						---
						## And the CSS

```css []
						<style>
							.photo-albums-area h1 {
								text-align: center;
								margin-top: 40px;
								margin-bottom: 40px;
								font-weight: 100;
								font-size: 4rem;
							}

.photo-album-grid {
								display: grid;
								grid-template-columns: repeat(3, 30vw);
								grid-gap: 3%;
								margin-left: 1%;
							}

.grid-item {
								width: 30vw;
								height: 20vh;
								transition: opacity 0.3s ease-in-out, transform 0.5s;
								overflow: hidden;
							}

.grid-item img {
								width: 30vw;
								height: 20vh;
								object-fit: cover;
								transition: opacity 0.3s ease-in-out, transform 2s;
							}

.grid-item:hover img {
								transform: scale(1.7);
							}

.grid-item-caption {
								position: relative;
								top: -120px;
								opacity: 0;
							}

.grid-item:hover {
								transform: scale(1.15);
							}

.in-album .grid-item-caption {
								top: -100px;
							}

.in-album .grid-item:hover {
								transform: scale(1);
							}

.in-album .grid-item-caption h1 {
								font-size: 1em;
							}

.grid-item-caption {
								animation: ease-in-out 1s;
							}

.grid-item:hover .grid-item-caption {
								opacity: 1;
								background: rgba(0,0,0,0.5);
							}

.grid-item-caption h1 {
								text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
								font-size: 3em;
								color: white;
								font-weight: 100;
							}
						</style>
						```
						---
						## Include the component and add it to +page.js

```svelte [4]
						<script>
							 import '../app.css';
							 import Slideshow from "$lib/components/Slideshow.svelte";
						     import PhotoAlbumIndex from "$lib/components/PhotoAlbumIndex.svelte";

export let data;
						 </script>

```javascript[]
						export function load({ params }) {
							return {
								photos: [ //Same as before ],
								albums: [
									{
										id: 'makro',
										image: 'IMGP4117.jpg',
										caption: 'makro',
										images: ['IMGP4117.jpg', 'background1.jpg', 'IMGP4642.jpg', 'IMGP6801.jpg', 'IMGP3329.jpg']
									},
									{
										id: 'norge2020',
										image: 'background1.jpg',
										caption: 'Norge 2020',
										images: ['IMGP4117.jpg', 'background1.jpg']
									}
								]
							};
						}
						```
						---
						## Send data to the component in +page.svelte

```svelte[]
						<PhotoAlbumIndex albums={data.albums}></PhotoAlbumIndex>
						```
						---
						## Get the album-data in PhotoAlbumIndex.svelte

```svelte []
						<script>
							 import {onMount} from "svelte";

export let albums;

onMount(() => {
								 if (!albums) {
									 albums = [];
								 }
							 });
						 </script>
						```
						---
						## Use the album data in the markup

```svelte [4, 6, 7, 9, 11, 15-17, 19]
						<div class="photo-albums-area">
							 <h1>Fotoalbum</h1>

{#if albums}
								 <div class="photo-album-grid">
									 {#each albums as album}
										 <a href="/album/{album.id}">
											 <div class="grid-item">
												 <img class="grid-item-photo" src="/images/{album.image}">
												 <div class="grid-item-caption">
													 <h1>{album.caption}</h1>
												 </div>
											 </div>
										 </a>
										 {:else}
										 <div>Ingen fotoalbum er lagt til</div>
									 {/each}
								 </div>
							 {/if}
						 </div>
						```
						---
						## Onwards

[part 6](part6_slides.html)