Image with Hugo figure shortcode parameters set using ATTR_HTML

Description/Summary

Issue # 17 Setting class parameter Discussion Setting alt parameter Reference Setting title parameter Logo Setting image caption The image caption can be set in two ways. Using the Org #+CAPTION keyword 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. A unicorn! Some more text, after image.

Content

Issue # 17

Setting `class` parameter

Discussion

Setting `alt` parameter

Reference

Setting `title` parameter

Logo

Setting image caption

The image caption can be set in two ways.

Using the Org #+CAPTION keyword
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.

A unicorn!

Some more text, after image.

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

Some text before image.

A unicorn!

Some more text, after 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

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 Variable

Value

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://hugo-sandbox.netlify.com/posts/figure-shortcode-and-attr-html/"

RelPermalink

"/posts/figure-shortcode-and-attr-html/"

Data

page.Data{} (type:page.Data)

Hyphens and spaces in tags

Indented source block

NextInSection

Hyphens and spaces in tags

PrevInSection

Indented source block

Page Params (Debug)

maps.Params{"draft":false, "iscjklanguage":false, "lastmod":time.Date(2017, time.November, 2, 10, 12, 52, 0, time.Location("")), "tags":[]string{"image"}, "title":"Image with Hugo figure shortcode parameters set using ATTR_HTML"} (type:maps.Params)

File Object (Debug)

FileInfo Variable	Value
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"