Image with Hugo figure shortcode parameters set using ATTR_HTML

tags: image

Description/Summary

Content

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 Org mode logo
#+attr_html: :width 300 :class foo
[[https://ox-hugo.scripter.co/test/images/org-mode-unicorn-logo.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.

Pathogenic case (manual HTML tag wrappers in Org source) #

It works.. but don’t do it!!

#+begin_export html
<div class="inset">
#+end_export
[[/images/org-mode-unicorn-logo.png]]
#+begin_export html
</div>
#+end_export

Page (Debug)

Page Params (Debug)

File Object (Debug)