From a39b97bd33c847e9099c249af0e3d2eb9a309c83 Mon Sep 17 00:00:00 2001
From: Campbell Alden <campbell.alden@bibo.com.ph>
Date: Wed, 31 Aug 2022 18:14:08 +0900
Subject: [PATCH] PUBLISH: Lazy load summary images

---
 docs/genres/comedy/index.html  |  2 +-
 docs/genres/drama/index.html   |  4 +--
 docs/genres/index.html         | 54 +++++++++++++++++-----------------
 docs/genres/romance/index.html |  4 +--
 docs/index.html                |  4 +--
 layouts/_default/summary.html  |  2 +-
 6 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/docs/genres/comedy/index.html b/docs/genres/comedy/index.html
index 335cae9..47bdcd2 100644
--- a/docs/genres/comedy/index.html
+++ b/docs/genres/comedy/index.html
@@ -42,7 +42,7 @@
     <div class="cards">
       <div class="card">
   <div class="card-image">
-    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
   </div>
   <section class="card-content">
     <header>
diff --git a/docs/genres/drama/index.html b/docs/genres/drama/index.html
index 93854a3..bd48e52 100644
--- a/docs/genres/drama/index.html
+++ b/docs/genres/drama/index.html
@@ -42,7 +42,7 @@
     <div class="cards">
       <div class="card">
   <div class="card-image">
-    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" />
   </div>
   <section class="card-content">
     <header>
@@ -63,7 +63,7 @@
 </div>
 <div class="card">
   <div class="card-image">
-    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
   </div>
   <section class="card-content">
     <header>
diff --git a/docs/genres/index.html b/docs/genres/index.html
index 77bff5d..8e122be 100644
--- a/docs/genres/index.html
+++ b/docs/genres/index.html
@@ -49,7 +49,7 @@
           
             <div class="card">
   <div class="card-image">
-    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
   </div>
   <section class="card-content">
     <header>
@@ -72,7 +72,7 @@
           
             <div class="card">
   <div class="card-image">
-    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" />
   </div>
   <section class="card-content">
     <header>
@@ -105,30 +105,7 @@
           
             <div class="card">
   <div class="card-image">
-    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
-  </div>
-  <section class="card-content">
-    <header>
-      <h3 class="subtitle">The French Dispatch</h3>
-    </header>
-    <div style="text-align: justify;">Authors for a New Yorker-esque magazine report on a small town in France</div>
-    <div class="cluster spacing:between">
-      <div class="cluster s1 align:center">
-        <img src="https://caalden.github.io/film/imdb-logo-small.png" class="icon" alt="imbd logo">
-        <span class="numbers">7.2</span>
-      </div>
-      <div>
-        <a class="button" href="/film/reviews/the-french-dispatch/">
-          Read review
-        </a>
-    </div>
-  </div>
-</div>
-
-          
-            <div class="card">
-  <div class="card-image">
-    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" />
   </div>
   <section class="card-content">
     <header>
@@ -149,6 +126,29 @@
 </div>
 
           
+            <div class="card">
+  <div class="card-image">
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">The French Dispatch</h3>
+    </header>
+    <div style="text-align: justify;">Authors for a New Yorker-esque magazine report on a small town in France</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        <img src="https://caalden.github.io/film/imdb-logo-small.png" class="icon" alt="imbd logo">
+        <span class="numbers">7.2</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/the-french-dispatch/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
+          
         </div>
       </section>
     
@@ -161,7 +161,7 @@
           
             <div class="card">
   <div class="card-image">
-    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
   </div>
   <section class="card-content">
     <header>
diff --git a/docs/genres/romance/index.html b/docs/genres/romance/index.html
index da517dc..e283995 100644
--- a/docs/genres/romance/index.html
+++ b/docs/genres/romance/index.html
@@ -42,7 +42,7 @@
     <div class="cards">
       <div class="card">
   <div class="card-image">
-    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" />
   </div>
   <section class="card-content">
     <header>
@@ -63,7 +63,7 @@
 </div>
 <div class="card">
   <div class="card-image">
-    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
   </div>
   <section class="card-content">
     <header>
diff --git a/docs/index.html b/docs/index.html
index 555dd32..3b053cf 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -81,7 +81,7 @@
         
            <div class="card">
   <div class="card-image">
-    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.jpg alt="No Reservations" />
   </div>
   <section class="card-content">
     <header>
@@ -102,7 +102,7 @@
 </div>
 <div class="card">
   <div class="card-image">
-    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.jpg alt="The French Dispatch" />
   </div>
   <section class="card-content">
     <header>
diff --git a/layouts/_default/summary.html b/layouts/_default/summary.html
index 00395d6..232057a 100644
--- a/layouts/_default/summary.html
+++ b/layouts/_default/summary.html
@@ -1,6 +1,6 @@
 <div class="card">
   <div class="card-image">
-    <img class="card-image" src={{ .Params.image }} alt="{{- .Title -}}" />
+    <img loading="lazy" class="card-image" src={{ .Params.image }} alt="{{- .Title -}}" />
   </div>
   <section class="card-content">
     <header>