Félix Péault
bdc305a77a
All checks were successful
continuous-integration/drone/push Build is passing
- Fullscreen: center image + add a background color - Carousel: don't cut informations - Title location font size - Style location line height - Photo reveal effect - Photo has now a transparent png
76 lines
2.6 KiB
Svelte
76 lines
2.6 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)
|
|
|
|
// 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" bind:this={scope}>
|
|
<div class="photo__location wrap">
|
|
<div class="wrapper">
|
|
<h2 class="title-location">
|
|
<span>{name.split(', ')[0]},</span>
|
|
<span>{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="/viewer/{location.country.slug}/{location.slug}/{photo.slug}" sapper-noscroll>
|
|
<picture class="photo__picture">
|
|
<source media="(min-width: 992px)" data-srcset={getThumbnail(private_hash, 1300)}>
|
|
<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)}>
|
|
{#if layout === 'list'}
|
|
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
|
|
alt={imgAlt}
|
|
width={defaultWidth} height={defaultHeight}
|
|
class="lazyload">
|
|
{:else}
|
|
<img src="{getThumbnail(private_hash, 900)}"
|
|
alt={imgAlt}
|
|
width={defaultWidth} height={defaultHeight}>
|
|
{/if}
|
|
</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>
|