From 1995c515918640041442c6fa377e2a0e108feacb Mon Sep 17 00:00:00 2001
From: Eduardo Gomez <eduardo@newsadoo.com>
Date: Tue, 29 Oct 2019 10:20:52 +0100
Subject: [PATCH] Load smaller pictures to make blogs faster

---
 index.hbs                    | 4 ++--
 package.json                 | 2 +-
 page-authors.hbs             | 2 +-
 partials/header.hbs          | 2 +-
 partials/loop.hbs            | 4 ++--
 src/js/app.js                | 6 +++++-
 src/sass/common/_global.scss | 4 ++--
 7 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/index.hbs b/index.hbs
index 28a5fd46e..9d8df93f6 100644
--- a/index.hbs
+++ b/index.hbs
@@ -40,13 +40,13 @@ into the {body} of the default.hbs template --}}
                     {{/if}}
                     <div class="m-featured-article__picture">
                       {{#if feature_image}}
-                      <div class="lozad" data-background-image="{{feature_image}}"></div>
+                      <div class="lozad" data-background-image="{{img_url feature_image size="l"}}"></div>
                       {{/if}}
                     </div>
                     <div class="m-featured-article__meta">
                       <a href="{{primary_author.url}}" class="m-featured-article__author js-tooltip" aria-label="Authors" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}">
                         {{#if primary_author.profile_image}}
-                        <div style="background-image: url({{primary_author.profile_image}});"></div>
+                        <div style="background-image: url({{img_url primary_author.profile_image size="xs"}});"></div>
                         {{else}}
                         <div style="background-image: url({{asset "images/default-avatar-square-small.jpg"}});"></div>
                         {{/if}}
diff --git a/package.json b/package.json
index 24e2f9335..558b50081 100644
--- a/package.json
+++ b/package.json
@@ -54,5 +54,5 @@
     "desktop": "assets/screenshot-desktop.jpg",
     "mobile": "assets/screenshot-mobile.jpg"
   },
-  "version": "0.5.6"
+  "version": "0.5.7"
 }
diff --git a/page-authors.hbs b/page-authors.hbs
index 10c1179f2..f08191b45 100644
--- a/page-authors.hbs
+++ b/page-authors.hbs
@@ -28,7 +28,7 @@ into the {body} of the default.hbs template --}}
             {{#foreach authors}}
             <article class="m-article-card as-author">
               {{#if profile_image}}
-              <div class="m-article-card__picture lozad" data-background-image="{{profile_image}}">
+              <div class="m-article-card__picture lozad" data-background-image="{{img_url profile_image size="m"}}">
                 {{else}}
                 <div class="m-article-card__picture lozad" data-background-image="{{asset "images/default-avatar-rectangle.jpg"}}">
                   {{/if}}
diff --git a/partials/header.hbs b/partials/header.hbs
index 6b1e69c4d..e99ea9e62 100644
--- a/partials/header.hbs
+++ b/partials/header.hbs
@@ -65,7 +65,7 @@ This header template is shared across all the pages.
                           <a href="{{url}}" class="m-recent-article">
                             <div class="m-recent-article__picture">
                               {{#if feature_image}}
-                              <div class="lozad" data-background-image="{{img_url feature_image size="m"}}"></div>
+                              <div class="lozad" data-background-image="{{img_url feature_image size="s"}}"></div>
                               {{else}}
                               <div class="no-image lozad" data-background-image="{{asset "images/no-image.png"}}"></div>
                               {{/if}}
diff --git a/partials/loop.hbs b/partials/loop.hbs
index c83da5298..8cdeb79ec 100644
--- a/partials/loop.hbs
+++ b/partials/loop.hbs
@@ -6,7 +6,7 @@
   {{/is}}
   {{#if feature_image}}
     <article class="m-article-card {{post_class}}">
-      <div class="m-article-card__picture lozad" data-background-image="{{feature_image}}">
+      <div class="m-article-card__picture lozad" data-background-image="{{img_url feature_image size="m"}}">
   {{else}}
     <article class="m-article-card no-picture {{post_class}}">
       <div class="m-article-card__picture">
@@ -14,7 +14,7 @@
       <a href="{{url}}" class="m-article-card__picture-link" aria-label="Article"></a>
       <a href="{{primary_author.url}}" class="m-article-card__author js-tooltip" aria-label="Authors" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}">
         {{#if primary_author.profile_image}}
-          <div style="background-image: url({{primary_author.profile_image}});"></div>
+          <div style="background-image: url({{img_url primary_author.profile_image size="xs"}});"></div>
         {{else}}
           <div style="background-image: url({{asset "images/default-avatar-square-small.jpg"}});"></div>
         {{/if}}
diff --git a/src/js/app.js b/src/js/app.js
index fc13f8883..51647eb76 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -205,7 +205,11 @@ $(document).ready(() => {
     $('[data-aos]').addClass('no-aos-animation')
   }
 
-  const observer = lozad()
+  const observer = lozad('.lozad', {
+    loaded: (el) => {
+      el.classList.add('loaded')
+    }
+  })
   observer.observe()
 
   tippy('.js-tooltip')
diff --git a/src/sass/common/_global.scss b/src/sass/common/_global.scss
index 80e8912e5..875a1d5d8 100644
--- a/src/sass/common/_global.scss
+++ b/src/sass/common/_global.scss
@@ -59,8 +59,8 @@ fieldset {
   z-index: 5;
 }
 
-div[data-loaded="true"],
-img[data-loaded="true"] {
+div.lozad.loaded,
+img.lozad.loaded {
   opacity: 0;
   @include animation('fadeIn 0.5s forwards');
   @include keyframes(fadeIn) {