Image with Hugo figure shortcode parameters set using ATTR_HTML
tags: image
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
Setting class
parameter
Setting alt
parameter
Setting title
parameter
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.
Some more text, after image.
Below, the same caption is set using the #+ATTR_HTML
method instead:
Some text before image.
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 |
| |
NextPage | Hyphens and spaces in tags | |
PrevPage | 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" |