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

Use a picture element for Location illustration

Browse Source 
Probably better for performances
This commit is contained in:
Félix Péault
2021-11-21 16:50:24 +01:00
parent 8759477b79
commit 8d487e0ef7
2 changed files with 19 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/routes/[country]/[location]/index.svelte
View File

@@ -249,16 +249,19 @@
</div>
</div>
<div class="location-page__illustration"
style="
--illus-desktop: url({getAssetUrlKey(hasIllustration && location.illustration_desktop.id, 'illustration-desktop-1x')});
--illus-desktop-2x: url({getAssetUrlKey(hasIllustration && location.illustration_desktop_2x.id, 'illustration-desktop-2x')});
--illus-mobile: url({getAssetUrlKey(hasIllustration && location.illustration_mobile.id, 'illustration-mobile')});
--parallax-y: {illustrationOffsetY}px;
"
>
<div />
</div>
{#if location.illustration_mobile && location.illustration_desktop && location.illustration_desktop_2x}
<picture class="location-page__illustration" style="--parallax-y: {illustrationOffsetY}px;">
<source media="(min-width: 1200px)" srcset={getAssetUrlKey(location.illustration_desktop_2x.id, 'illustration-desktop-2x')}>
<source media="(min-width: 768px)" srcset={getAssetUrlKey(location.illustration_desktop.id, 'illustration-desktop-1x')}>
<img
src={getAssetUrlKey(location.illustration_mobile.id, 'illustration-mobile')}
width={320}
height={824}
alt="Illustration for {location.name}"
loading="lazy"
/>
</picture>
{/if}
</section>
{#if photos.length}