From 790cf303769ffc2465bd0026609e4872c0162068 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 7 Dec 2021 00:50:01 +0800 Subject: [PATCH 1/2] Add abbreviation support for image width/height --- _includes/refactor-content.html | 4 ++-- _layouts/post.html | 14 ++++++++++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html index 7e899ff..b5b77b4 100644 --- a/_includes/refactor-content.html +++ b/_includes/refactor-content.html @@ -78,9 +78,9 @@ {% capture _value %}{{ _attr | split: '=' | last | replace: '"', '' }}{% endcapture %} {% case _key %} - {% when 'width' %} + {% when 'width', 'w' %} {% assign _width = _value %} - {% when 'height' %} + {% when 'height', 'h' %} {% assign _height = _value %} {% endcase %} diff --git a/_layouts/post.html b/_layouts/post.html index 222f20a..ef2450e 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -16,8 +16,18 @@ tail_includes: {% endcapture %} {{ page.image.alt | default: + + {% if page.image.width %} + width="{{ page.image.width }}" + {% elsif page.image.w %} + width="{{ page.image.w }}" + {% endif %} + + {% if page.image.height %} + height="{{ page.image.height }}" + {% elsif page.image.h %} + height="{{ page.image.h }}" + {% endif %}> {% endif %}

{{ page.title }}

From 6447ffaf59642d2f515b662451591de6b71eb525 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 7 Dec 2021 00:59:26 +0800 Subject: [PATCH 2/2] Add new feature intro to docs --- _posts/2019-08-08-write-a-new-post.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md index abe698e..68f0358 100644 --- a/_posts/2019-08-08-write-a-new-post.md +++ b/_posts/2019-08-08-write-a-new-post.md @@ -50,7 +50,7 @@ The author information of the post usually does not need to be filled in the _Fr --- author: name: Full Name - url: https://example.com + link: https://example.com --- ``` @@ -114,6 +114,8 @@ image: Except for `alt`, all other options are necessary, especially the `width` and `height`, which are related to user experience and web page loading performance. Later section ["Image size"](#image-size) will also mention this. +Starting from _Chirpy v4.4.0_, the attributes `height` and `width` support abbreviations: `height` → `h`, `width` → `w`. + ### Image caption @@ -134,6 +136,13 @@ In order to prevent the page content layout from shifting when the image is load ``` {: .nolineno} +Starting from _Chirpy v4.4.0_, `height` and `width` support abbreviations (`height` → `h`, `width` → `w`). The following example has the same effect as the above: + +```markdown +![Desktop View](/assets/img/sample/mockup.png){: w="700" h="400" } +``` +{: .nolineno} + ### Image position By default, the image is centered, but you can specify the position by using one of the classes `normal`, `left`, and `right`. For example: