.Kind (page): .Type (posts) / .Layout ()
Bundle: n/a (regular page)
[ categories | tags | search ]
ox-hugo Test Site

This is the test site for the ox-hugo package for Emacs/Org-mode.

It is updated automatically after each commit to the ox-hugo repo. It was last updated on Apr 03, 2020 02:29 UTC.


This page was created/modified in commit 04e1f3f "Finishing commit ddd68c115006fa531ac87c12475dc6f99f83ccf8" on 2019-09-04.
Markdown source of this page

Image with Hugo figure shortcode parameters set using ATTR_HTML

tags: image


Description/Summary

Figure captions with markup.

Content

ox-hugo Issue #17

Setting class parameter

Discussion

Setting alt parameter

Reference

Org-mode Unicorn Logo

Setting title parameter

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 1: A unicorn! “Something in double quotes”

Figure 1: A unicorn! “Something in double quotes”

Some more text, after image.

Figure 2: The same figure again, testing a link too!

Figure 2: The same figure again, testing a link too!

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

Some text before image.

Figure 3: A unicorn!

Figure 3: 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.

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.

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:

Org mode logo

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.


Page (Debug)

Page VariableValue
Name "Image with Hugo figure shortcode parameters set using ATTR_HTML"
Title "Image with Hugo figure shortcode parameters set using ATTR_HTML"
ResourceType "page"
Kind "page"
Section "posts"
Draft false
Type "posts"
Layout ""
Permalink "https://ox-hugo.scripter.co/test/posts/figure-shortcode-and-attr-html/"
RelPermalink "/posts/figure-shortcode-and-attr-html/"
Data
page.Data{} (type:page.Data)
NextPageHyphens and spaces in tags
PrevPageIndented equations block
NextInSectionHyphens and spaces in tags
PrevInSectionIndented equations block

Page Params (Debug)

KeyTypeValue
descriptionstring "Figure captions with markup."
draftbool false
iscjklanguagebool false
lastmodtime.Time 2019-09-04 21:34:09 -0400 -0400
tags[]string "image"
titlestring "Image with Hugo figure shortcode parameters set using ATTR_HTML"

File Object (Debug)

FileInfo VariableValue
UniqueID "1772c28759eb5fcdd000e4d0a73771d9"
BaseFileName "figure-shortcode-and-attr-html"
TranslationBaseName "figure-shortcode-and-attr-html"
Lang "en"
Section "posts"
LogicalName "figure-shortcode-and-attr-html.md"
Dir "posts/"
Ext "md"
Path "posts/figure-shortcode-and-attr-html.md"

This site is generated using the ox-hugo package for Emacs/Org-mode + hugo-bare-min-theme + Hugo 0.59.0-DEV (commit 5276f1e9, using Chroma commit 26f03cb) .
[Test Site home | ox-hugo home]