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

Load different images sizes depending on the screen size

Browse Source 
Use responsive images `<picture>` to load different sizes
This commit is contained in:
Félix Péault
2020-02-14 12:38:48 +01:00
parent 450de171e6
commit 3badc0c1d6
4 changed files with 21 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/molecules/Photo.svelte
View File

@@ -27,14 +27,13 @@
<div class="photo__image wrap">
<div class="align">
<a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}">
<div class="photo__image--img">
<img
src="{fn.getThumbnail(photo.image.private_hash, 800)}"
srcset="{fn.getThumbnail(photo.image.private_hash, 1200)} 1200w, {fn.getThumbnail(photo.image.private_hash, 1600)} 1600w"
width="600" height="400"
alt="{photo.name}, {location.region}, {location.country.name}"
>
</div>
<picture class="photo__image--img">
<source media="(min-width: 992px)" srcset={fn.getThumbnail(photo.image.private_hash, 1300)}>
<source media="(min-width: 768px)" srcset={fn.getThumbnail(photo.image.private_hash, 992)}>
<source media="(min-width: 500px)" srcset={fn.getThumbnail(photo.image.private_hash, 650)}>
<source media="(min-width: 300px)" srcset={fn.getThumbnail(photo.image.private_hash, 400)}>
<img src="{fn.getThumbnail(photo.image.private_hash, 900)}" alt="{photo.name}, {location.region}, {location.country.name}">
</picture>
<time class="photo__image--date" datetime={dayjs(photo.date).format('YYYY-MM-DDThh:mm:ss')}>
{dayjs(photo.date).format('MMM Do, YYYY')}
</time>