ox-hugo/test/site/content/posts/figure-shortcode-and-attr-html.md

+++ title = "Image with Hugo figure shortcode parameters set using ATTR_HTML" tags = ["image"] draft = false +++

ox-hugo 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.

{{

}}

Some more text, after image.

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

Some text before image.

{{

}}

Enter a new line after the image link so that it's in an "Org paragraph" that contains just that image. That tells Org that that #+ATTR_HTML attribute is associated only with that image, and not to the text that follows that image too.

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.