From 9df23b7c26876b23bdd56a96257fc9a91c56714c Mon Sep 17 00:00:00 2001 From: Kaushal Modi Date: Fri, 27 Oct 2017 15:00:48 -0400 Subject: [PATCH] Support specifying image height in #+ATTR_HTML This feature will work in hugo v0.31 and later versions. It was implemented in https://github.com/gohugoio/hugo/pull/4018. --- ox-hugo.el | 3 +- test/site/content-org/all-posts.org | 42 ++++++++++++++-- .../posts/figure-shortcode-and-attr-html.md | 50 +++++++++++++++++-- 3 files changed, 88 insertions(+), 7 deletions(-) diff --git a/ox-hugo.el b/ox-hugo.el index 73748cee..6d717fae 100644 --- a/ox-hugo.el +++ b/ox-hugo.el @@ -956,7 +956,8 @@ and rewrite link paths to make blogging more seamless." (attr . ,(plist-get attr :attr)) (attrlink . ,(plist-get attr :attrlink)) (alt . ,(plist-get attr :alt)) - (width . ,(plist-get attr :width)))) + (width . ,(plist-get attr :width)) + (height . ,(plist-get attr :height)))) (figure-param-str "")) (dolist (param figure-params) (let ((name (car param)) diff --git a/test/site/content-org/all-posts.org b/test/site/content-org/all-posts.org index 2085a3e4..e74a85d9 100644 --- a/test/site/content-org/all-posts.org +++ b/test/site/content-org/all-posts.org @@ -152,6 +152,7 @@ Some text before image. [[/images/org-mode-unicorn-logo.png]] Some more text, after image. *** Setting image size +**** Setting =:width= parameter The image [[https://www.w3schools.com/tags/att_img_width.asp][width]] can be specified in *pixels* using the =:width= parameter. *The height of the image will be resized proportionally.* @@ -163,12 +164,47 @@ Below image is shown 100 pixels wide. #+ATTR_HTML: :width 100 [[/images/org-mode-unicorn-logo.png]] -Below image is shown 1000 pixels width! Now the size of this image is -200px × 200px. But the image will still show up in 1000px × 1000px -size, but obviously heavily pixelated! +Below image is shown with a width of 1000 pixels! Now the size of this +image is 200px × 200px. But the image will still show up in 1000px × +1000px size, but obviously heavily pixelated! #+ATTR_HTML: :width 1000 [[/images/org-mode-unicorn-logo.png]] +**** Setting =:height= parameter +*NOTE*: Support for specifying =height= parameter to the Hugo =figure= + shortcut was only added recently in [[https://github.com/gohugoio/hugo/pull/4018][hugo PR #4018]]. So setting this + parameter will need *hugo v0.31* or later. + +----- + +The image [[https://www.w3schools.com/tags/att_img_height.asp][height]] can be specified in *pixels* using the =:height= +parameter. *The weight of the image will be resized proportionally.* + +Below image is shown 50 pixels tall. +#+ATTR_HTML: :height 50 +[[/images/org-mode-unicorn-logo.png]] + +Below image is shown 100 pixels tall. +#+ATTR_HTML: :height 100 +[[/images/org-mode-unicorn-logo.png]] + +Below image is shown with a height of 1000 pixels! Now the size of +this image is 200px × 200px. But the image will still show up in +1000px × 1000px size, but obviously heavily pixelated! + +#+ATTR_HTML: :height 1000 +[[/images/org-mode-unicorn-logo.png]] +**** Setting both =:width= and =:height= +The *NOTE* above applies here too.. needs *hugo v0.31* or later. + +The figure sizes below are intentionally set /mis-proportionally/ just +for testing. +- =:width 100 :height 200= + #+ATTR_HTML: :width 100 :height 200 + [[/images/org-mode-unicorn-logo.png]] +- =:width 200 :height 100= + #+ATTR_HTML: :width 200 :height 100 + [[/images/org-mode-unicorn-logo.png]] *** Other Similarly, =:link=, =:attr=, =:attrlink= parameters in =#+ATTR_HTML= are also supported to set the corresponding parameter in the Hugo diff --git a/test/site/content/posts/figure-shortcode-and-attr-html.md b/test/site/content/posts/figure-shortcode-and-attr-html.md index eb4f7737..3b5b63e0 100644 --- a/test/site/content/posts/figure-shortcode-and-attr-html.md +++ b/test/site/content/posts/figure-shortcode-and-attr-html.md @@ -51,6 +51,9 @@ Some more text, after image. ## Setting image size {#setting-image-size} + +### Setting `:width` parameter {#setting-width-parameter} + The image [width](https://www.w3schools.com/tags/att_img_width.asp) can be specified in **pixels** using the `:width` parameter. **The height of the image will be resized proportionally.** @@ -62,13 +65,54 @@ Below image is shown 100 pixels wide. {{
}} -Below image is shown 1000 pixels width! Now the size of this image is -200px × 200px. But the image will still show up in 1000px × 1000px -size, but obviously heavily pixelated! +Below image is shown with a width of 1000 pixels! Now the size of this +image is 200px × 200px. But the image will still show up in 1000px × +1000px size, but obviously heavily pixelated! {{
}} +### Setting `:height` parameter {#setting-height-parameter} + +**NOTE**: Support for specifying `height` parameter to the Hugo `figure` + shortcut was only added recently in [hugo PR #4018](https://github.com/gohugoio/hugo/pull/4018). So setting this + parameter will need **hugo v0.31** or newer. + +--- + +The image [height](https://www.w3schools.com/tags/att_img_height.asp) can be specified in **pixels** using the `:height` +parameter. **The weight of the image will be resized proportionally.** + +Below image is shown 50 pixels tall. + +{{
}} + +Below image is shown 100 pixels tall. + +{{
}} + +Below image is shown with a height of 1000 pixels! Now the size of +this image is 200px × 200px. But the image will still show up in +1000px × 1000px size, but obviously heavily pixelated! + +{{
}} + + +### Setting both `:width` and `:height` {#setting-both-width-and-height} + +The **NOTE** above applies here too.. needs **hugo v0.31** or newer. + +The figure sizes below are intentionally set _mis-proportionally_ just +for testing. + +- `:width 100 :height 200` + + {{
}} +- `:width 200 :height 100` + + {{
}} + + ## Other {#other} Similarly, `:link`, `:attr`, `:attrlink` parameters in `#+ATTR_HTML`