Support specifying the image width in #+ATTR_HTML

Known issue as of Hugo v0.30: The Hugo figure shortcode does not
support specifying the height parameter! So ox-hugo will support only
the width parameter for now.

figure shortcode in Hugo source:
b6f2e3b438/tpl/tplimpl/template_embedded.go (L22-L37)

https://discourse.gohugo.io/t/can-i-find-out-the-image-size/2196/12?u=kaushalmodi
master
Kaushal Modi 9 years ago
parent d330e1631b
commit 4a476d906f
  1. 3
      ox-hugo.el
  2. 18
      test/site/content-org/all-posts.org
  3. 20
      test/site/content/posts/figure-shortcode-and-attr-html.md

@ -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))

@ -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

@ -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.
{{<figure src="/images/org-mode-unicorn-logo.png" width="50">}}
Below image is shown 100 pixels wide.
{{<figure src="/images/org-mode-unicorn-logo.png" width="100">}}
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!
{{<figure src="/images/org-mode-unicorn-logo.png" width="1000">}}
## Other {#other}
Similarly, `:link`, `:attr`, `:attrlink` parameters in `#+ATTR_HTML`

Loading…
Cancel
Save