Optional lazy image instead of global set

7 files changed, 28 insertions, 10 deletions

diff --git a/README.md b/README.md
index 01d4502..3caba0a 100644
--- a/README.md
+++ b/README.md
@@ -53,18 +53,28 @@ $ hugo --minify
 
 ## Advance configration
 
-You can create the files below in your site to adjust the markdown render hook, see [Hugo's Official Docs](https://gohugo.io/getting-started/configuration-markup#markdown-render-hooks).
+### Lazyload images
 
-You can use ```layouts/_default/_markup/render-link.html``` to decide whether or not links in the markdown content will open in new tab:
+Lazyload images in posts, for example in ```content/post/test.md```:
 
-```html
-<a href="{{ .Destination | safeURL }}"{{ with .Title }} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text | safeHTML }}</a>
+```go-html-template
+{{< lazyimg "This is alt text" "/img/sample.png" >}}
+{{< lazyimg-row "This is alt text" "/img/sample.png" >}}
+{{< lazyimg-col "This is alt text" "/img/sample.png" >}}
 ```
 
-You can use ```layouts/_default/_markup/render-image.html``` to change the lazyload placeholder:
+```lazyimg``` will show a 16x9 placeholder before image is loaded, so ```lazyimg-row``` will show a 32x9 placeholder and ```lazyimg-col``` will show a 8x9 placeholder. You can choose different aspect ratios you want for different images. The placeholder image can be set in site's ```config.toml```.
+
+Note that if you use the origin markdown syntax to add images such as ```![This is alt text](/img/sample.png)```, it will not become a lazy image.
+
+### Markdown render hook
+
+You can create the files below in your site to adjust the markdown render hook, see [Hugo's Official Docs](https://gohugo.io/getting-started/configuration-markup#markdown-render-hooks).
+
+You can use ```layouts/_default/_markup/render-link.html``` to decide whether or not links in the markdown content will open in new tab:
 
 ```html
-<p><img class="lazy" src="https://cdn.jsdelivr.net/gh/amzrk2/poal-jsdelivr@1.0.0/lazyload/dsr_loading.svg" data-src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} /></p>
+<a href="{{ .Destination | safeURL }}"{{ with .Title }} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}>{{ .Text | safeHTML }}</a>
 ```
 
 ## Update the theme
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index fd7113c..51e802e 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -54,8 +54,14 @@ paginate = 10
   disqusComment = false
   disqusShortname = "[ENTER YOUR DISQUS SHORTNAME HERE]"
 
-  # Custom lazyload thumbnail
-  cdnLazyloadSRC = "https://cdn.jsdelivr.net/gh/amzrk2/poal-jsdelivr@1.0.0/lazyload/dsr_loading.svg"
+  # Custom lazyload placeholder
+  # 16:9
+  cdnLazyPlaceholder = "https://cdn.jsdelivr.net/gh/amzrk2/poal-jsdelivr@1.1.0/lazyload/dsrca_loading_480x270.svg"
+  # 32:9
+  cdnLazyPlaceholderRow = "https://cdn.jsdelivr.net/gh/amzrk2/poal-jsdelivr@1.1.0/lazyload/dsrca_loading_960x270.svg"
+  # 8:9
+  cdnLazyPlaceholderCol = "https://cdn.jsdelivr.net/gh/amzrk2/poal-jsdelivr@1.1.0/lazyload/dsrca_loading_480x540.svg"
+
   # Custom css & js CDN
   # cdnIntersectionObserverJS = "https://cdn.jsdelivr.net/npm/intersection-observer@0.7.0/intersection-observer.min.js" # Optional
   cdnVanillaLazyloadJS = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.1.1/dist/lazyload.min.js"
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
deleted file mode 100644
index 5242d97..0000000
--- a/layouts/_default/_markup/render-image.html
+++ /dev/null
@@ -1 +0,0 @@
-<p><img class="lazy" src="https://cdn.jsdelivr.net/gh/amzrk2/poal-jsdelivr@1.0.0/lazyload/dsr_loading.svg" data-src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} /></p>
\ No newline at end of file
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index 61f2868..8b84596 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -32,6 +32,6 @@
 {{ with .Site.Params.bgmImageChart }}
 <div id="widget-bgm">
     <h5>{{ i18n "sidebarBangumiChart" }}</h5>
-    <img class="lazy" src="{{ $.Site.Params.cdnLazyloadSRC }}" data-src="https://bgm.tv/chart/img/{{ . }}" />
+    <img class="lazy" src="{{ $.Site.Params.cdnLazyPlaceholder }}" data-src="https://bgm.tv/chart/img/{{ . }}" />
 </div>
 {{ end }}
\ No newline at end of file
diff --git a/layouts/shortcodes/lazyimg-col.html b/layouts/shortcodes/lazyimg-col.html
new file mode 100644
index 0000000..0192ba5
--- /dev/null
+++ b/layouts/shortcodes/lazyimg-col.html
@@ -0,0 +1 @@
+<p><img class="lazy" src="{{ .Site.Params.cdnLazyPlaceholderCol }}" data-src="{{ index .Params 1 }}" alt="{{ index .Params 0 }}" /></p>
\ No newline at end of file
diff --git a/layouts/shortcodes/lazyimg-row.html b/layouts/shortcodes/lazyimg-row.html
new file mode 100644
index 0000000..dd07f93
--- /dev/null
+++ b/layouts/shortcodes/lazyimg-row.html
@@ -0,0 +1 @@
+<p><img class="lazy" src="{{ .Site.Params.cdnLazyPlaceholderRow }}" data-src="{{ index .Params 1 }}" alt="{{ index .Params 0 }}" /></p>
\ No newline at end of file
diff --git a/layouts/shortcodes/lazyimg.html b/layouts/shortcodes/lazyimg.html
new file mode 100644
index 0000000..a23a15e
--- /dev/null
+++ b/layouts/shortcodes/lazyimg.html
@@ -0,0 +1 @@
+<p><img class="lazy" src="{{ .Site.Params.cdnLazyPlaceholder }}" data-src="{{ index .Params 1 }}" alt="{{ index .Params 0 }}" /></p>
\ No newline at end of file