From 4ed06823920334eeea2e9e00c0fc45c3e2978888 Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Wed, 30 Apr 2025 15:48:21 +0800
Subject: chore: deal with image lazyloading

- lazyload post banner image
- lazyload book cover
- tidy up lazyload attributes in image shortcode
---
 layouts/library/single.html             | 6 +++++-
 layouts/partials/components/banner.html | 6 +++++-
 layouts/shortcodes/img.html             | 7 ++++++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/layouts/library/single.html b/layouts/library/single.html
index 26a6f02f..6eb32a94 100644
--- a/layouts/library/single.html
+++ b/layouts/library/single.html
@@ -3,7 +3,11 @@
         <div class="book-page-header">
             <div class="book-cover"
                 style="view-transition-name: book-{{ .File.UniqueID }}">
-                <img src="{{ .Params.cover }}" />
+                <img
+                    class="lazy"
+                    src="{{ .Params.cover }}!thumbnail"
+                    data-src="{{ .Params.cover }}"
+                />
             </div>
             <h1 class="book-title">{{ .Title }}</h1>
             {{- $rating := .Params.rating -}}
diff --git a/layouts/partials/components/banner.html b/layouts/partials/components/banner.html
index 58fb54da..94600d4f 100644
--- a/layouts/partials/components/banner.html
+++ b/layouts/partials/components/banner.html
@@ -1,6 +1,10 @@
 {{ with .Params.banner }}
 <div class="post-banner">
-    <img src="{{ . }}">
+    <img
+        class="lazy"
+        src="{{ . }}!thumbnail"
+        data-src="{{ . }}"
+    >
 </div>
 <style>
 .post-banner img {
diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html
index cb2d2571..10005506 100644
--- a/layouts/shortcodes/img.html
+++ b/layouts/shortcodes/img.html
@@ -2,7 +2,12 @@
 <figure {{ with .Get "class" }}class="{{ . }}"{{ end }}>
 {{ with .Get "link" }}<a href="{{ . }}">{{ end }}
     <a href="{{ .Get "src" }}" data-fancybox {{ if isset .Params "title" }} data-caption="{{.Get "title" }}" {{ end }}>
-        <img class="lazy" data-src="{{ .Get "src" }}" src="{{ .Get "src" }}!thumbnail" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" }}{{ end }}"{{ end }} />
+        <img
+            class="lazy"
+            data-src="{{ .Get "src" }}"
+            src="{{ .Get "src" }}!thumbnail"
+            {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" }}{{ end }}"{{ end }}
+        />
     </a>
     {{ if .Get "link" }}</a>{{ end }}
     {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr") }}
-- 
cgit v1.2.3