housesof/src/molecules/Photo.svelte

<script>
    import { onMount } from 'svelte'
    import { site, currentLocation } from 'utils/store'
    import { getThumbnail, formatDate } from 'utils/functions'
    // Animations
    import { animateIn } from 'animations/Photo'

    // Props and variables
    export let photo
    export let index
    let scope

    // Default size for the image
    const defaultWidth = 900
    const defaultHeight = Math.ceil(defaultWidth / 1.5)

    // Location related
    const { name, date, location } = photo
    const { private_hash } = photo.image
    const imgAlt = `${name}, ${location.region}, ${location.country.name}`

    // Photo index
    const photoIndex = (index < 10 ? '0': '') + index


    /*
    ** Run code when mounted
    */
    onMount(() => {
        animateIn(scope)
    })
</script>

<div class="photo" role="figure" aria-labelledby="photo-{index + 1}" bind:this={scope}>
    <div class="photo__location wrap">
        <div class="wrapper">
            <h2 class="title-location" id="photo-{index + 1}">
                {#each name.split(', ') as line, i}
                <span class="line">
                    <span>{name.split(', ')[i]},</span>
                </span>
                {/each}
            </h2>
            <p class="style-caps">{location.region}, {location.country.name}</p>
        </div>
    </div>

    <div class="photo__image wrap">
        <div class="align">
            <a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}" sapper-noscroll>
                <picture class="photo__picture">
                    <source media="(min-width: 992px)" data-srcset={getThumbnail(private_hash, 1200)}>
                    <source media="(min-width: 768px)" data-srcset={getThumbnail(private_hash, 992)}>
                    <source media="(min-width: 500px)" data-srcset={getThumbnail(private_hash, 650)}>
                    <source media="(min-width: 300px)" data-srcset={getThumbnail(private_hash, 400)}>
                    <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
                        width={defaultWidth} height={defaultHeight}
                        alt={imgAlt}
                        class="lazyload"
                    />
                </picture>
            </a>
            <time class="photo__date" datetime={formatDate(date, 'DATETIME')}>
                {formatDate(date, 'FULL')}
            </time>
            <div class="photo__number">
                <span>{photoIndex}</span>
            </div>
        </div>
    </div>
</div>