From 3badc0c1d639198e2cd853cb764f2474253d84a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Fri, 14 Feb 2020 12:38:48 +0100
Subject: [PATCH] Load different images sizes depending on the screen size

Use responsive images `<picture>` to load different sizes
---
 src/molecules/Photo.svelte       | 15 +++++++--------
 src/organisms/Carousel.svelte    | 14 +++++++-------
 src/style/molecules/_photo.scss  |  4 ++++
 src/style/organisms/_photos.scss |  3 +++
 4 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/molecules/Photo.svelte b/src/molecules/Photo.svelte
index 87e6723..71b7690 100644
--- a/src/molecules/Photo.svelte
+++ b/src/molecules/Photo.svelte
@@ -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>
diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte
index 8c5015a..cb23f82 100644
--- a/src/organisms/Carousel.svelte
+++ b/src/organisms/Carousel.svelte
@@ -55,17 +55,17 @@
         <div class="gallery">
             <div class="gallery__images">
                 {#each photos as photo, index}
-                <div class="gallery__images--photo"
+                <picture class="gallery__images--photo"
                     class:prev={index === 0}
                     class:active={index === 1}
                     class:next={index === 2}
                 >
-                    <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"
-                        alt="{photo.name}, {photo.location.name}, {photo.location.country.name}"
-                    />
-                </div>
+                    <source media="(min-width: 968px)" srcset={fn.getThumbnail(photo.image.private_hash, 1400)}>
+                    <source media="(min-width: 800px)" srcset={fn.getThumbnail(photo.image.private_hash, 900)}>
+                    <source media="(min-width: 500px)" srcset={fn.getThumbnail(photo.image.private_hash, 600)}>
+                    <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}">
+                </picture>
                 {/each}
             </div>
 
diff --git a/src/style/molecules/_photo.scss b/src/style/molecules/_photo.scss
index 05ed674..aa45745 100644
--- a/src/style/molecules/_photo.scss
+++ b/src/style/molecules/_photo.scss
@@ -43,6 +43,7 @@
         // Alignment (left or right for list view)
         .align {
             position: relative;
+            width: 100%;
             max-width: 1180px;
             margin: 0;
             padding: 0;
@@ -53,6 +54,8 @@
             overflow: hidden;
             position: relative;
             z-index: 2;
+            display: block;
+            width: 100%;
             border-radius: 0;
             box-shadow: 0 8px 18px rgba(#715E4E, 0.2);
             user-select: none;
@@ -87,6 +90,7 @@
 
         a {
             display: block;
+            width: 100%;
             text-decoration: none;
 
             // Hover
diff --git a/src/style/organisms/_photos.scss b/src/style/organisms/_photos.scss
index 13436ee..086da6e 100644
--- a/src/style/organisms/_photos.scss
+++ b/src/style/organisms/_photos.scss
@@ -182,6 +182,9 @@
 
             // Image
             &__image {
+                &--img {
+                    border-radius: 8px;
+                }
                 &--number {
                     font-size: rem(96px);
                     bottom: -88px;