From 71ae6d1e825fdb782328653f121651dc515b29e9 Mon Sep 17 00:00:00 2001
From: amzrk2
Date: Mon, 20 Apr 2020 19:08:56 +0800
Subject: Optional lazy image instead of global set

---
 README.md | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

(limited to 'README.md')

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
-- 
cgit v1.2.3