From a43b353ca3e2d923ca8f0cdd1aeab70e5b1313a4 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Sat, 19 Sep 2020 14:15:35 +0800 Subject: new: lazyload image shortcodes --- README.md | 33 ++++++++++++++--------- README_CN.md | 33 ++++++++++++++--------- assets/scss/_image.scss | 52 +++++++++++++++++++++++++++++++++++ assets/scss/fuji.scss | 3 +++ layouts/shortcodes/img-lazy.html | 27 ++++--------------- layouts/shortcodes/img-nz-lazy.html | 54 ++++--------------------------------- layouts/shortcodes/img-nz.html | 10 +++---- 7 files changed, 111 insertions(+), 101 deletions(-) create mode 100644 assets/scss/_image.scss 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 . 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: ```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: ```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: ```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 主题，并且正在计划把新主题移植为通用的博客主题，你可以在 预览新的主题。如果你喜欢这个主题的话，请给 [**新主题的 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`. ```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，可选外链： ```html -{{< img-nz "Alt text" "test/example.png" "https://example.com" >}} +{{< img-nz "Alt text here" "test/example.png" >}} ``` 不可放大，lazyload，可选外链： ```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 }} -{{ index .Params 0 }} -{{ else if len .Params | eq 3 }}{{ if eq (index .Params 0) "row" }} -{{ index .Params 1 }} -{{ else if eq (index .Params 0) "col" }} -{{ index .Params 1 }} -{{ else }}{{ end }}{{ else }}{{ end }} +{{- if len .Params | eq 3 -}} +

+ {{ index .Params 1 }} +

+{{- 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 }} -{{ index .Params 0 }} -{{ else if len .Params | eq 3 }}{{ if eq (index .Params 0) "row" }} -{{ index .Params 1 }} -{{ else if eq (index .Params 0) "col" }} -{{ index .Params 1 }} -{{ else }} - - {{ index .Params 0 }} - -{{ end }}{{ else if len .Params | eq 4 }}{{ if eq (index .Params 0) "row" }} - - {{ index .Params 1 }} - -{{ else if eq (index .Params 0) "col" }} - - {{ index .Params 1 }} - -{{ else }}{{ end }}{{ else }}{{ end }} +{{- if len .Params | eq 3 -}} +

+ {{ index .Params 1 }} +

+{{- 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) }} - +{{- if len .Params | eq 2 -}} +

{{ index .Params 0 }} - -{{ else }} -{{ index .Params 0 }} -{{ end }} +

+{{- end -}} \ No newline at end of file -- cgit v1.2.3