flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Photo: Code optimization
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
- Avoid double declaration of sources
- Use class over an HTML tag for image reveal animation
This commit is contained in:
Félix Péault
2020-03-31 17:55:32 +02:00
parent fc74a93508
commit 88186f479c
4 changed files with 43 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/animations/Photo.js
View File

@@ -28,7 +28,7 @@ export const animateIn = scope => {
// Photo appearing
const photoReveal = ScrollOut({
once: true,
targets: scope.querySelector('picture'),
targets: scope.querySelector('.photo__image'),
onShown (el) {
// Load the photo then reveal it
imagesLoaded(el, instance => {

28
src/molecules/Photo.svelte
View File

@@ -16,11 +16,10 @@
const defaultWidth = 900
const defaultHeight = Math.ceil(defaultWidth / 1.5)
// Reactive variables for location informations
// Location related
const { name, date, location } = photo
const { private_hash } = photo.image
const imgAlt = `${name}, ${location.region}, ${location.country.name}`
const photoHref = `/viewer/${location.country.slug}/${location.slug}/${photo.slug}`
// Photo index
const photoIndex = (index < 10 ? '0': '') + index
@@ -47,26 +46,21 @@
<div class="photo__image wrap">
<div class="align">
<a href={photoHref} sapper-noscroll>
<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'}
<source media="(min-width: 992px)" srcset={getThumbnail(private_hash, 1300)}>
<source media="(min-width: 768px)" srcset={getThumbnail(private_hash, 992)}>
<source media="(min-width: 500px)" srcset={getThumbnail(private_hash, 650)}>
<source media="(min-width: 300px)" srcset={getThumbnail(private_hash, 400)}>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/+HRfwAJmQPS6gISLwAAAABJRU5ErkJggg=="
data-src="{getThumbnail(private_hash, 900)}"
<img src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs="
alt={imgAlt}
width={defaultWidth} height={defaultHeight}
class="lazyload"
>
class="lazyload">
{:else}
<source media="(min-width: 992px)" srcset={getThumbnail(private_hash, 1300)}>
<source media="(min-width: 768px)" srcset={getThumbnail(private_hash, 992)}>
<source media="(min-width: 500px)" srcset={getThumbnail(private_hash, 650)}>
<source media="(min-width: 300px)" srcset={getThumbnail(private_hash, 400)}>
<img src="{getThumbnail(private_hash, 900)}" alt={imgAlt} width={defaultWidth} height={defaultHeight}>
<img src="{getThumbnail(private_hash, 900)}"
alt={imgAlt}
width={defaultWidth} height={defaultHeight}>
{/if}
</picture>
</a>