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

14
src/organisms/Carousel.svelte
View File

@@ -55,17 +55,17 @@
<div class="gallery"> <div class="gallery">
<div class="gallery__images"> <div class="gallery__images">
{#each photos as photo, index} {#each photos as photo, index}
<div class="gallery__images--photo" <picture class="gallery__images--photo"
class:prev={index === 0} class:prev={index === 0}
class:active={index === 1} class:active={index === 1}
class:next={index === 2} class:next={index === 2}
> >
<img <source media="(min-width: 968px)" srcset={fn.getThumbnail(photo.image.private_hash, 1400)}>
src="{fn.getThumbnail(photo.image.private_hash, 800)}" <source media="(min-width: 800px)" srcset={fn.getThumbnail(photo.image.private_hash, 900)}>
srcset="{fn.getThumbnail(photo.image.private_hash, 1200)} 1200w, {fn.getThumbnail(photo.image.private_hash, 1600)} 1600w" <source media="(min-width: 500px)" srcset={fn.getThumbnail(photo.image.private_hash, 600)}>
alt="{photo.name}, {photo.location.name}, {photo.location.country.name}" <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}, {photo.location.name}, {photo.location.country.name}">
</div> </picture>
{/each} {/each}
</div> </div>

4
src/style/molecules/_photo.scss
View File

@@ -43,6 +43,7 @@
// Alignment (left or right for list view) // Alignment (left or right for list view)
.align { .align {
position: relative; position: relative;
width: 100%;
max-width: 1180px; max-width: 1180px;
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -53,6 +54,8 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
z-index: 2; z-index: 2;
display: block;
width: 100%;
border-radius: 0; border-radius: 0;
box-shadow: 0 8px 18px rgba(#715E4E, 0.2); box-shadow: 0 8px 18px rgba(#715E4E, 0.2);
user-select: none; user-select: none;
@@ -87,6 +90,7 @@
a { a {
display: block; display: block;
width: 100%;
text-decoration: none; text-decoration: none;
// Hover // Hover

3
src/style/organisms/_photos.scss
View File

@@ -182,6 +182,9 @@
// Image // Image
&__image { &__image {
&--img {
border-radius: 8px;
}
&--number { &--number {
font-size: rem(96px); font-size: rem(96px);
bottom: -88px; bottom: -88px;