Image with Hugo figure shortcode parameters set using ATTR_HTML

GitInfo Subject                        :: "Add test for multiple #+ATTR_HTML"
GitInfo AuthorName                     :: "Kaushal Modi"

Tags: image

Issue # 17

Setting class parameter

Discussion

Setting alt parameter

Reference

Setting title parameter

Setting image caption

The image caption can be set in two ways.

1. Using the Org #+CAPTION keyword
2. Using #+ATTR_HTML: :caption my caption

The #+CAPTION is available will get the higher precedence. In the below image, caption is set using that:

Some text before image.

Below, the same caption is set using the #+ATTR_HTML method instead:

Some text before image.

Setting image size

Setting :width parameter

The image 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.

Below image is shown 100 pixels wide.

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

NOTE: Support for specifying height parameter to the Hugo figure shortcut was only added recently in hugo PR #4018. So setting this parameter will need hugo v0.31 or later.

The image 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.

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

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

  

• :width 200 :height 100

  

Multiple ATTR_HTML

Below in Org source:

#+HTML: <style>.foo img { border:2px solid black; }</style>
#+ATTR_HTML: :alt Go is fine though.
#+ATTR_HTML: :width 300 :class foo
[[file:https://golang.org/doc/gopher/pkg.png]]

Rendered this:

NOTE: We cannot use :style in #+ATTR_HTML because Hugo does not yet support a style argument in the figure shortcode [Source].

So using #+HTML: <style>.foo img ... </style> and #+ATTR_HTML: :class foo as shown in the workaround above.

Other

Similarly, :link, :attr, :attrlink parameters in #+ATTR_HTML are also supported to set the corresponding parameter in the Hugo figure shortcode.