Félix Péault
7d8285ac6d
All checks were successful
continuous-integration/drone/push Build is passing
81 lines
3.3 KiB
Svelte
81 lines
3.3 KiB
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
|
|
export let layout = 'list'
|
|
let scope
|
|
|
|
// Default size for the image
|
|
const defaultWidth = 900
|
|
const defaultHeight = Math.ceil(defaultWidth / 1.5)
|
|
|
|
// Reactive variables for location informations
|
|
const location = photo.location
|
|
const imgAlt = `${photo.name}, ${location.region}, ${location.country.name}`
|
|
const photoHref = `/viewer/${location.country.slug}/${location.slug}/${photo.slug}`
|
|
|
|
// Photo index
|
|
const photoIndex = (index < 10 ? '0': '') + index
|
|
|
|
|
|
/*
|
|
** Run code when mounted
|
|
*/
|
|
onMount(() => {
|
|
animateIn(scope)
|
|
})
|
|
</script>
|
|
|
|
<div class="photo" bind:this={scope}>
|
|
<div class="photo__location wrap">
|
|
<div class="wrapper">
|
|
<h2 class="title-location">
|
|
<span>{photo.name.split(', ')[0]},</span>
|
|
<span>{photo.name.split(', ')[1]}</span>
|
|
</h2>
|
|
<p class="style-caps">{location.region}, {location.country.name}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="photo__image wrap">
|
|
<div class="align">
|
|
<a href={photoHref} sapper-noscroll>
|
|
<picture class="photo__picture">
|
|
{#if layout === 'list'}
|
|
<source media="(min-width: 992px)" data-srcset={getThumbnail(photo.image.private_hash, 1300)}>
|
|
<source media="(min-width: 768px)" data-srcset={getThumbnail(photo.image.private_hash, 992)}>
|
|
<source media="(min-width: 500px)" data-srcset={getThumbnail(photo.image.private_hash, 650)}>
|
|
<source media="(min-width: 300px)" data-srcset={getThumbnail(photo.image.private_hash, 400)}>
|
|
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/+HRfwAJmQPS6gISLwAAAABJRU5ErkJggg=="
|
|
data-src="{getThumbnail(photo.image.private_hash, 900)}"
|
|
alt={imgAlt}
|
|
width={defaultWidth} height={defaultHeight}
|
|
class="lazyload"
|
|
>
|
|
|
|
{:else}
|
|
<source media="(min-width: 992px)" srcset={getThumbnail(photo.image.private_hash, 1300)}>
|
|
<source media="(min-width: 768px)" srcset={getThumbnail(photo.image.private_hash, 992)}>
|
|
<source media="(min-width: 500px)" srcset={getThumbnail(photo.image.private_hash, 650)}>
|
|
<source media="(min-width: 300px)" srcset={getThumbnail(photo.image.private_hash, 400)}>
|
|
<img src="{getThumbnail(photo.image.private_hash, 900)}" alt={imgAlt} width={defaultWidth} height={defaultHeight}>
|
|
{/if}
|
|
</picture>
|
|
</a>
|
|
<time class="photo__date" datetime={formatDate(photo.date, 'DATETIME')}>
|
|
{formatDate(photo.date, 'FULL')}
|
|
</time>
|
|
<div class="photo__number">
|
|
<span id="photo_number">{photoIndex}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|