diff --git a/ox-hugo.el b/ox-hugo.el index 3c847f75..6e2a45bf 100644 --- a/ox-hugo.el +++ b/ox-hugo.el @@ -949,7 +949,8 @@ and rewrite link paths to make blogging more seamless." (class . ,(plist-get attr :class)) (attr . ,(plist-get attr :attr)) (attrlink . ,(plist-get attr :attrlink)) - (alt . ,(plist-get attr :alt)))) + (alt . ,(plist-get attr :alt)) + (width . ,(plist-get attr :width)))) (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 97b889bb..7a27f6cb 100644 --- a/test/site/content-org/all-posts.org +++ b/test/site/content-org/all-posts.org @@ -154,6 +154,24 @@ Some text before image. #+ATTR_HTML: :caption A unicorn! [[/images/org-mode-unicorn-logo.png]] Some more text, after image. +*** Setting image size +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.* + +Below image is shown 50 pixels wide. +#+ATTR_HTML: :width 50 +[[/images/org-mode-unicorn-logo.png]] + +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! + +#+ATTR_HTML: :width 1000 +[[/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 5fcf237f..eb4f7737 100644 --- a/test/site/content/posts/figure-shortcode-and-attr-html.md +++ b/test/site/content/posts/figure-shortcode-and-attr-html.md @@ -49,6 +49,26 @@ Some text before image. Some more text, after image. +## Setting image size {#setting-image-size} + +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.** + +Below image is shown 50 pixels wide. + +{{
}} + +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! + +{{
}} + + ## Other {#other} Similarly, `:link`, `:attr`, `:attrlink` parameters in `#+ATTR_HTML`