new: lazyload image shortcodes

7 files changed, 111 insertions, 101 deletions

diff --git a/README.md b/README.md
index 2637f44..979e4e9 100644
--- a/README.md
+++ b/README.md
@@ -6,8 +6,6 @@ Fuji is a minimal Hugo theme with full dark mode support and GitHub Primer markd
 
 [English](https://github.com/amzrk2/hugo-theme-fuji#readme) | [简体中文](https://github.com/amzrk2/hugo-theme-fuji/blob/master/README_CN.md)
 
-> Note that there will be major changes in the image lazyload shortcode, meaning that you can set **different aspect ratios** for images to generate lazyload placeholders. Once this feature is complete, this theme will enter the **maintenance stage**, and no new features will be added. Future support for the new Hugo version will still be available.
-
 > I am currently working on my new Hugo site with **a brand new theme**, and are planning to port the theme to a similar blog theme, you can preview it at <https://amzrk2.cc>. If you like this new theme, please give the [**theme repository**](https://github.com/amzrk2/amzrk2-ng) a star and I'll do my best to speed up the development process.
 
 Supported languages: `cs`, `en`, `ja`, `nl`, `pt-pt`, `zh-hans`, `zh-hant`. Check the i18n folder to add more languages.
@@ -151,8 +149,6 @@ Don't forget to add `math = true` in your front matter or `config.toml`.
 
 ### 📷 Image zoom and lazyload settings
 
-> Note that there will be major changes in the image lazyload shortcode, meaning that you can set **different aspect ratios** for images to generate lazyload placeholders. Once this feature is complete, this theme will enter the **maintenance stage**, and no new features will be added.
-
 Zoomable, not lazyloaded:
 
 ```markdown
@@ -163,28 +159,41 @@ Zoomable, lazyloaded:
 
 <!-- prettier-ignore -->
 ```html
-{{< img-lazy "Alt text" "test/example.png" >}}
-{{< img-lazy "row" "Alt text" "test/example.png" >}}
-{{< img-lazy "col" "Alt text" "test/example.png" >}}
+{{< img-lazy "16x9" "Alt text here" "test/example.png" >}}
 ```
 
 Not zoomable, not lazyloaded, optional ext link:
 
 <!-- prettier-ignore -->
 ```html
-{{< img-nz "Alt text" "test/example.png" "https://example.com" >}}
+{{< img-nz "Alt text here" "test/example.png" >}}
 ```
 
 Not zoomable, lazyloaded, optional ext link:
 
 <!-- prettier-ignore -->
 ```html
-{{< img-nz-lazy "Alt text" "test/example.png" "https://example.com" >}}
-{{< img-nz-lazy "row" "Alt text" "test/example.png" "https://example.com" >}}
-{{< img-nz-lazy "col" "Alt text" "test/example.png" "https://example.com" >}}
+{{< img-nz-lazy "16x9" "Alt text here" "test/example.png" >}}
 ```
 
-`img-lazy` will show a 16x9 placeholder before image is loaded, so `img-lazy-row` will show a 32x9 placeholder and `img-lazy-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`.
+Available image aspect ratios:
+
+- 40x9
+- 32x9
+- 21x9
+- 18x9
+- 16x9
+- 16x10
+- 3x2
+- 4x3
+- 1x1
+- 3x4
+- 2x3
+- 10x16
+- 9x16
+- 9x18
+- 9x21
+- 9x32
 
 ### ⚓ Markdown render hook
 
diff --git a/README_CN.md b/README_CN.md
index c0bacfd..480c8db 100644
--- a/README_CN.md
+++ b/README_CN.md
@@ -6,8 +6,6 @@
 
 [English](https://github.com/amzrk2/hugo-theme-fuji#readme) | [简体中文](https://github.com/amzrk2/hugo-theme-fuji/blob/master/README_CN.md)
 
-> 图片懒加载使用的 shortcode 近期将会大改，可以为懒加载的图片设置**不同的长宽比**，主题将会根据设置的属性生成对应的占位来防止页面跳动。这个功能完成之后主题将会进入维护阶段，将不会再添加新 feature，只进行对应 Hugo 版本更新的适配和维护。
-
 > 最近我正在为我的个人站点构建一个全新的 Hugo 主题，并且正在计划把新主题移植为通用的博客主题，你可以在 <https://amzrk2.cc> 预览新的主题。如果你喜欢这个主题的话，请给 [**新主题的 repo**](https://github.com/amzrk2/amzrk2-ng) 加颗星，我会尽力加快新主题的开发。
 
 支持的 i18n 语言：`cs`, `en`, `ja`, `nl`, `pt-pt`, `zh-hans`, `zh-hant`。i18n 文件夹内为所有语言文件。
@@ -149,8 +147,6 @@ Don't forget to add `math = true` in your front matter or `config.toml`.
 
 ### 📷 图片放大的设置和 lazyload
 
-> 图片懒加载使用的 shortcode 近期将会大改，可以为懒加载的图片设置**不同的长宽比**，主题将会根据设置的属性生成对应的占位来防止页面跳动。这个功能完成之后主题将会进入维护阶段，将不会再添加新 feature，只进行对应 Hugo 版本更新的适配和维护。
-
 可放大，非 lazyload：
 
 ```markdown
@@ -161,28 +157,41 @@ Don't forget to add `math = true` in your front matter or `config.toml`.
 
 <!-- prettier-ignore -->
 ```html
-{{< img-lazy "Alt text" "test/example.png" >}}
-{{< img-lazy "row" "Alt text" "test/example.png" >}}
-{{< img-lazy "col" "Alt text" "test/example.png" >}}
+{{< img-lazy "16x9" "Alt text here" "test/example.png" >}}
 ```
 
 不可放大，非 lazyload，可选外链：
 
 <!-- prettier-ignore -->
 ```html
-{{< img-nz "Alt text" "test/example.png" "https://example.com" >}}
+{{< img-nz "Alt text here" "test/example.png" >}}
 ```
 
 不可放大，lazyload，可选外链：
 
 <!-- prettier-ignore -->
 ```html
-{{< img-nz-lazy "Alt text" "test/example.png" "https://example.com" >}}
-{{< img-nz-lazy "row" "Alt text" "test/example.png" "https://example.com" >}}
-{{< img-nz-lazy "col" "Alt text" "test/example.png" "https://example.com" >}}
+{{< img-nz-lazy "16x9" "Alt text here" "test/example.png" >}}
 ```
 
-`img-lazy` 提供 16:9 的占位 svg，`img-lazy-row` 提供 32:9 的占位 svg，`img-lazy-col` 提供 8:9 的占位 svg。你也可以在 `config.toml` 里面自定义想要的占位图片和比例。
+可用的占位符比例:
+
+- 40x9
+- 32x9
+- 21x9
+- 18x9
+- 16x9
+- 16x10
+- 3x2
+- 4x3
+- 1x1
+- 3x4
+- 2x3
+- 10x16
+- 9x16
+- 9x18
+- 9x21
+- 9x32
 
 ### ⚓ Markdown 钩子
 
diff --git a/assets/scss/_image.scss b/assets/scss/_image.scss
new file mode 100644
index 0000000..938340e
--- /dev/null
+++ b/assets/scss/_image.scss
@@ -0,0 +1,52 @@
+.image-wrapper {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  background-color: var(--color-divider);
+  border-radius: 3px;
+  max-width: 98%;
+  margin: 0 0.25rem 0.5rem 0.25rem;
+
+  img {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    overflow: hidden;
+  }
+}
+
+// common aspect ratios
+// 32x9  -  28.125%
+// 21x9  -  42.85714286%
+// 18x9  -  50%
+// 16x9  -  56.25%
+// 16x10 -  62.5%
+// 3x2   -  66.66666667%
+// 4x3   -  75%
+// 1x1   -  100%
+$ratios: (
+  '40x9': 9 / 40 * 100%,
+  '32x9': 9 / 32 * 100%,
+  '21x9': 9 / 21 * 100%,
+  '18x9': 9 / 18 * 100%,
+  '16x9': 9 / 16 * 100%,
+  '16x10': 10 / 16 * 100%,
+  '3x2': 2 / 3 * 100%,
+  '4x3': 3 / 4 * 100%,
+  '1x1': 100%,
+  '3x4': 4 / 3 * 100%,
+  '2x3': 3 / 2 * 100%,
+  '10x16': 16 / 10 * 100%,
+  '9x16': 16 / 9 * 100%,
+  '9x18': 18 / 9 * 100%,
+  '9x21': 21 / 9 * 100%,
+  '9x32': 32 / 9 * 100%,
+);
+@each $key, $value in $ratios {
+  .ratio-#{$key} {
+    padding-bottom: $value;
+  }
+}
diff --git a/assets/scss/fuji.scss b/assets/scss/fuji.scss
index 3c59ebe..fa29589 100644
--- a/assets/scss/fuji.scss
+++ b/assets/scss/fuji.scss
@@ -25,3 +25,6 @@
 // theme
 @import '_fuji-theme/_base';
 @import '_fuji-theme/_style';
+
+// lazy image placeholder
+@import '_image';
diff --git a/layouts/shortcodes/img-lazy.html b/layouts/shortcodes/img-lazy.html
index bac255b..eed9b0e 100644
--- a/layouts/shortcodes/img-lazy.html
+++ b/layouts/shortcodes/img-lazy.html
@@ -1,22 +1,5 @@
-{{ if len .Params | eq 2 }}
-<img
-  class="lazyload img-zoomable"
-  src="{{ .Site.Params.lazyPlaceholder | relURL }}"
-  data-src="{{ index .Params 1 | relURL | safeURL }}"
-  alt="{{ index .Params 0 }}"
-/>
-{{ else if len .Params | eq 3 }}{{ if eq (index .Params 0) "row" }}
-<img
-  class="lazyload img-zoomable"
-  src="{{ .Site.Params.lazyPlaceholderRow | relURL }}"
-  data-src="{{ index .Params 2 | relURL | safeURL }}"
-  alt="{{ index .Params 1 }}"
-/>
-{{ else if eq (index .Params 0) "col" }}
-<img
-  class="lazyload img-zoomable"
-  src="{{ .Site.Params.lazyPlaceholderCol | relURL }}"
-  data-src="{{ index .Params 2 | relURL | safeURL }}"
-  alt="{{ index .Params 1 }}"
-/>
-{{ else }}{{ end }}{{ else }}{{ end }}
+{{- if len .Params | eq 3 -}}
+<p><div class="image-wrapper ratio-{{ index .Params 0 }}">
+  <img class="lazyload img-zoomable" data-src="{{ index .Params 2 | relURL | safeURL }}" alt="{{ index .Params 1 }}" />
+</div></p>
+{{- end -}}
\ No newline at end of file
diff --git a/layouts/shortcodes/img-nz-lazy.html b/layouts/shortcodes/img-nz-lazy.html
index 8a46329..bba88b6 100644
--- a/layouts/shortcodes/img-nz-lazy.html
+++ b/layouts/shortcodes/img-nz-lazy.html
@@ -1,49 +1,5 @@
-{{ if len .Params | eq 2 }}
-<img
-  class="lazyload"
-  src="{{ .Site.Params.lazyPlaceholder | relURL }}"
-  data-src="{{ index .Params 1 | relURL | safeURL }}"
-  alt="{{ index .Params 0 }}"
-/>
-{{ else if len .Params | eq 3 }}{{ if eq (index .Params 0) "row" }}
-<img
-  class="lazyload"
-  src="{{ .Site.Params.lazyPlaceholderRow | relURL }}"
-  data-src="{{ index .Params 2 | relURL | safeURL }}"
-  alt="{{ index .Params 1 }}"
-/>
-{{ else if eq (index .Params 0) "col" }}
-<img
-  class="lazyload"
-  src="{{ .Site.Params.lazyPlaceholderCol | relURL }}"
-  data-src="{{ index .Params 2 | relURL | safeURL }}"
-  alt="{{ index .Params 1 }}"
-/>
-{{ else }}
-<a href="{{ index .Params 2 }}" target="_blank">
-  <img
-    class="lazyload"
-    src="{{ .Site.Params.lazyPlaceholder | relURL }}"
-    data-src="{{ index .Params 1 | relURL | safeURL }}"
-    alt="{{ index .Params 0 }}"
-  />
-</a>
-{{ end }}{{ else if len .Params | eq 4 }}{{ if eq (index .Params 0) "row" }}
-<a href="{{ index .Params 3 }}" target="_blank">
-  <img
-    class="lazyload"
-    src="{{ .Site.Params.lazyPlaceholderRow | relURL }}"
-    data-src="{{ index .Params 2 | relURL | safeURL }}"
-    alt="{{ index .Params 1 }}"
-  />
-</a>
-{{ else if eq (index .Params 0) "col" }}
-<a href="{{ index .Params 3 }}" target="_blank">
-  <img
-    class="lazyload"
-    src="{{ .Site.Params.lazyPlaceholderCol | relURL }}"
-    data-src="{{ index .Params 2 | relURL | safeURL }}"
-    alt="{{ index .Params 1 }}"
-  />
-</a>
-{{ else }}{{ end }}{{ else }}{{ end }}
+{{- if len .Params | eq 3 -}}
+<p><div class="image-wrapper ratio-{{ index .Params 0 }}">
+  <img class="lazyload" data-src="{{ index .Params 2 | relURL | safeURL }}" alt="{{ index .Params 1 }}" />
+</div></p>
+{{- end -}}
\ No newline at end of file
diff --git a/layouts/shortcodes/img-nz.html b/layouts/shortcodes/img-nz.html
index 2e4b3af..175dc5b 100644
--- a/layouts/shortcodes/img-nz.html
+++ b/layouts/shortcodes/img-nz.html
@@ -1,7 +1,5 @@
-{{ if (index .Params 2) }}
-<a href="{{ index .Params 2 }}" target="_blank">
+{{- if len .Params | eq 2 -}}
+<p>
   <img src="{{ index .Params 1 | relURL | safeURL }}" alt="{{ index .Params 0 }}" />
-</a>
-{{ else }}
-<img src="{{ index .Params 1 | relURL | safeURL }}" alt="{{ index .Params 0 }}" />
-{{ end }}
+</p>
+{{- end -}}
\ No newline at end of file