From c60d110d121dd9adf9e5f5aca94818a48370b2f2 Mon Sep 17 00:00:00 2001
From: Gianmarco Gargiulo <me@gianmarco.gg>
Date: Mon, 14 Aug 2023 01:40:15 +0200
Subject: [PATCH] Enabled lazy loading for the additional footer pins and for
 the post card thumbnails

---
 .../hugo-casper3/layouts/_default/baseof.html | 132 +++++++++---------
 .../layouts/partials/post-card.html           |   4 +-
 2 files changed, 68 insertions(+), 68 deletions(-)

diff --git a/themes/hugo-casper3/layouts/_default/baseof.html b/themes/hugo-casper3/layouts/_default/baseof.html
index e49767a..2d6b6c1 100644
--- a/themes/hugo-casper3/layouts/_default/baseof.html
+++ b/themes/hugo-casper3/layouts/_default/baseof.html
@@ -70,57 +70,57 @@
             <div class="site-footer-content inner mobile-hide">
                 <a href="https://jellyfin.org">
                     <figure>
-                <img src="/pins/jellyfin.gif"></img>
+                <img src="/pins/jellyfin.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a>
                     <figure>
-                <img src="/pins/amd_powered.gif"></img>
+                <img src="/pins/amd_powered.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://grapheneos.org">
                     <figure>
-                <img src="/pins/grapheneos.gif"></img>
+                <img src="/pins/grapheneos.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://gimp.org">
                     <figure>
-                <img src="/pins/gimp.gif"></img>
+                <img src="/pins/gimp.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a rel="me" href="https://mastodon.uno/@gianmarcogg03">
                     <figure>
-                <img src="/pins/mastodon.gif"></img>
+                <img src="/pins/mastodon.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://nextcloud.com">
                     <figure>
-                <img src="/pins/nextcloud.gif"></img>
+                <img src="/pins/nextcloud.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://librewolf.net">
                     <figure>
-                <img src="/pins/firefox.gif"></img>
+                <img src="/pins/firefox.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://geti2p.net">
                     <figure>
-                <img src="/pins/i2p.gif"></img>
+                <img src="/pins/i2p.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://gnu.org">
                     <figure>
-                <img src="/pins/jobsritchie.gif"></img>
+                <img src="/pins/jobsritchie.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a>
                     <figure>
-                <img src="/pins/google_stand.gif"></img>
+                <img src="/pins/google_stand.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://librewolf.net">
                     <figure>
-                <img src="/pins/chrmevil.gif"></img>
+                <img src="/pins/chrmevil.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 </div>
@@ -132,57 +132,57 @@
             <div class="site-footer-content inner mobile-hide">
                 <a href="https://joinmastodon.org">
                     <figure>
-                <img src="/pins/f_ckfb.gif"></img>
+                <img src="/pins/f_ckfb.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://mumble.info">
                     <figure>
-                <img src="/pins/discord-no-way.gif"></img>
+                <img src="/pins/discord-no-way.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="/pgp.txt">
                     <figure>
-                <img src="/pins/pgp-now.gif"></img>
+                <img src="/pins/pgp-now.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="/contact">
                     <figure>
-                <img src="/pins/xmpp.gif"></img>
+                <img src="/pins/xmpp.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="/donate">
                     <figure>
-                <img src="/pins/monero-now.gif"></img>
+                <img src="/pins/monero-now.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://librewolf.net">
                     <figure>
-                <img src="/pins/anythingbutchrome.gif"></img>
+                <img src="/pins/anythingbutchrome.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="/rss.xml">
                     <figure>
-                <img src="/pins/rss.gif"></img>
+                <img src="/pins/rss.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://archlinux.org">
                     <figure>
-                <img src="/pins/win10no.gif"></img>
+                <img src="/pins/win10no.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a>
                     <figure>
-                <img src="/pins/seedyourtorrents.gif"></img>
+                <img src="/pins/seedyourtorrents.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://kde.org">
                     <figure>
-                <img src="/pins/knbutton.gif"></img>
+                <img src="/pins/knbutton.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://landchad.net">
                     <figure>
-                <img src="/pins/landchad.gif"></img>
+                <img src="/pins/landchad.gif" loading="lazy"></img>
                     </figure>
                 </a>
             </div>
@@ -194,57 +194,57 @@
             <div class="site-footer-content inner mobile-hide">
                 <a>
                     <figure>
-                <img src="/pins/tiktok.gif"></img>
+                <img src="/pins/tiktok.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://fedidb.org">
                     <figure>
-                <img src="/pins/fediverse.gif"></img>
+                <img src="/pins/fediverse.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://dreaming.gianmarco.gg">
                     <figure>
-                <img src="/pins/dreams.gif"></img>
+                <img src="/pins/dreams.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="/socials">
                     <figure>
-                <img src="/pins/soulseek.gif"></img>
+                <img src="/pins/soulseek.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a>
                     <figure>
-                <img src="/pins/winxp.gif"></img>
+                <img src="/pins/winxp.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="http://npzqzzlftquidpczleveobajpkgjvszhny23eqot733ea34mxovxgiqd.onion/">
                     <figure>
-                <img src="/pins/tor.gif"></img>
+                <img src="/pins/tor.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a>
                     <figure>
-                <img src="/pins/mafumafu.gif"></img>
+                <img src="/pins/mafumafu.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://keepassxc.org">
                     <figure>
-                <img src="/pins/keepassxc.gif"></img>
+                <img src="/pins/keepassxc.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a>
                     <figure>
-                <img src="/pins/im-sad.gif"></img>
+                <img src="/pins/im-sad.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a>
                     <figure>
-                <img src="/pins/floppy.gif"></img>
+                <img src="/pins/floppy.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://gohugo.io">
                     <figure>
-                <img src="/pins/ih8squarespace.gif"></img>
+                <img src="/pins/ih8squarespace.gif" loading="lazy"></img>
                     </figure>
                 </a>
             </div>
@@ -256,57 +256,57 @@
             <div class="site-footer-content inner mobile-hide">
                 <a href="https://fsf.org">
                     <figure>
-                <img src="/pins/ihatems.gif"></img>
+                <img src="/pins/ihatems.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a>
                     <figure>
-                <img src="/pins/kawaiibutton.gif"></img>
+                <img src="/pins/kawaiibutton.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a>
                     <figure>
-                <img src="/pins/ppc.gif"></img>
+                <img src="/pins/ppc.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a>
                     <figure>
-                <img src="/pins/bestviewedcomp.gif"></img>
+                <img src="/pins/bestviewedcomp.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://gnu.org">
                     <figure>
-                <img src="/pins/gnu.gif"></img>
+                <img src="/pins/gnu.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://lbry.org">
                     <figure>
-                <img src="/pins/lbry.gif"></img>
+                <img src="/pins/lbry.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://kernel.org">
                     <figure>
-                <img src="/pins/linuxnow.gif"></img>
+                <img src="/pins/linuxnow.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://openbsd.org">
                     <figure>
-                <img src="/pins/openbsdart.gif"></img>
+                <img src="/pins/openbsdart.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a>
                     <figure>
-                <img src="/pins/fspeech.gif"></img>
+                <img src="/pins/fspeech.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://defectivebydesign.org">
                     <figure>
-                <img src="/pins/itoddler.gif"></img>
+                <img src="/pins/itoddler.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a>
                     <figure>
-                <img src="/pins/ralseismokingadart.gif"></img>
+                <img src="/pins/ralseismokingadart.gif" loading="lazy"></img>
                     </figure>
                 </a>
             </div>
@@ -318,57 +318,57 @@
             <div class="site-footer-content inner mobile-hide">
                 <a href="https://demorianesimo.org">
                     <figure>
-                <img src="/pins/demorbtn.gif"></img>
+                <img src="/pins/demorbtn.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://matrix.org">
                     <figure>
-                <img src="/pins/matrix.gif"></img>
+                <img src="/pins/matrix.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://archlinux.org">
                     <figure>
-                <img src="/pins/archlinux.gif"></img>
+                <img src="/pins/archlinux.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a>
                     <figure>
-                <img src="/pins/3dot5mmfc-button.gif"></img>
+                <img src="/pins/3dot5mmfc-button.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://silk.ms">
                     <figure>
-                <img src="/pins/silkms.gif"></img>
+                <img src="/pins/silkms.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a>
                     <figure>
-                <img src="/pins/desktopviewing.gif"></img>
+                <img src="/pins/desktopviewing.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a>
                     <figure>
-                <img src="/pins/srgb-now.png"></img>
+                <img src="/pins/srgb-now.png" loading="lazy"></img>
                     </figure>
                 </a>
                 <a>
                     <figure>
-                <img src="/pins/contains-java.png"></img>
+                <img src="/pins/contains-java.png" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://gianmarco.gg/memes/ubuntu-is-stable">
                     <figure>
-                <img src="/pins/frees.gif"></img>
+                <img src="/pins/frees.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://godotengine.org">
                     <figure>
-                <img src="/pins/godot.gif"></img>
+                <img src="/pins/godot.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a>
                     <figure>
-                <img src="/pins/2001.gif"></img>
+                <img src="/pins/2001.gif" loading="lazy"></img>
                     </figure>
                 </a>
             </div>
@@ -380,57 +380,57 @@
             <div class="site-footer-content inner mobile-hide">
                 <a>
                     <figure>
-                <img src="/pins/antinft.gif"></img>
+                <img src="/pins/antinft.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://ublockorigin.com/">
                     <figure>
-                <img src="/pins/ublock-now.png"></img>
+                <img src="/pins/ublock-now.png" loading="lazy"></img>
                     </figure>
                 </a>
                 <a>
                     <figure>
-                <img src="/pins/tired.gif"></img>
+                <img src="/pins/tired.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://yesterweb.org/no-to-web3/">
                     <figure>
-                <img src="/pins/web3.gif"></img>
+                <img src="/pins/web3.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a>
                     <figure>
-                <img src="/pins/raspberryheaven.png"></img>
+                <img src="/pins/raspberryheaven.png" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://yesterweb.org">
                     <figure>
-                <img src="/pins/yesterweb.gif"></img>
+                <img src="/pins/yesterweb.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a>
                     <figure>
-                <img src="/pins/kromernow.png"></img>
+                <img src="/pins/kromernow.png" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://saintpepsi.bandcamp.com">
                     <figure>
-                <img src="/pins/saintpepsi.gif"></img>
+                <img src="/pins/saintpepsi.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a>
                     <figure>
-                <img src="/pins/y2k.png"></img>
+                <img src="/pins/y2k.png" loading="lazy"></img>
                     </figure>
                 </a>
                 <a href="https://static.gianmarco.gg/gcpm.png">
                     <figure>
-                <img src="/pins/piracy.gif"></img>
+                <img src="/pins/piracy.gif" loading="lazy"></img>
                     </figure>
                 </a>
                 <a>
                     <figure>
-                <img src="/pins/timmerda.gif"></img>
+                <img src="/pins/timmerda.gif" loading="lazy"></img>
                     </figure>
                 </a>
             </div>
diff --git a/themes/hugo-casper3/layouts/partials/post-card.html b/themes/hugo-casper3/layouts/partials/post-card.html
index d61c222..82d3902 100644
--- a/themes/hugo-casper3/layouts/partials/post-card.html
+++ b/themes/hugo-casper3/layouts/partials/post-card.html
@@ -6,11 +6,11 @@
 
         {{ if .context.Param "thumbnail" }}
             <a class="post-card-image-link" href="{{ .context.RelPermalink }}">
-                <img class="post-card-image" src="{{ .context.Param "thumbnail" }}" alt="{{ .context.Title }}"/>
+                <img class="post-card-image" src="{{ .context.Param "thumbnail" }}" alt="{{ .context.Title }}" loading="lazy"/>
             </a>
         {{ else }}
             <a class="post-card-image-link" href="{{ .context.RelPermalink }}">
-                <img class="post-card-image" src="/images/nothumb.svg" alt="{{ .context.Title }}"/>
+                <img class="post-card-image" src="/images/nothumb.svg" alt="{{ .context.Title }}" loading="lazy"/>
             </a>
         {{ end }}