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

{{< figure src="/images/org-mode-unicorn-logo.png" class="inset" >}}

Discussion

Setting alt parameter

Reference

{{< figure src="/images/org-mode-unicorn-logo.png" alt="Org-mode Unicorn Logo" >}}

Setting title parameter

{{< figure src="/images/org-mode-unicorn-logo.png" title="Logo" >}}

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.

{{< figure src="/images/org-mode-unicorn-logo.png" caption="Figure 1: A unicorn!" >}}

Some more text, after image.

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

Some text before image.

{{< figure src="/images/org-mode-unicorn-logo.png" caption="Figure 2: A unicorn!" >}}

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.

{{< 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 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!

{{< figure src="/images/org-mode-unicorn-logo.png" width="1000" >}}

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.

{{< figure src="/images/org-mode-unicorn-logo.png" height="50" >}}

Below image is shown 100 pixels tall.

{{< figure src="/images/org-mode-unicorn-logo.png" height="100" >}}

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!

{{< figure src="/images/org-mode-unicorn-logo.png" height="1000" >}}

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

  {{< figure src="/images/org-mode-unicorn-logo.png" width="100" height="200" >}}

• :width 200 :height 100

  {{< figure src="/images/org-mode-unicorn-logo.png" 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:

{{< figure src="https://golang.org/doc/gopher/pkg.png" alt="Go is fine though." class="foo" width="300" >}}

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.