.Kind (page): .Type (posts) / .Layout ()
Bundle: n/a (regular page)
[ categories | projects | tags | search ]
Hugo Sandbox

This is an unofficial Hugo sandbox site to try to replicate possible bugs in hugo.

It is updated automatically after each commit to the hugo-sandbox repo. It was last updated on Oct 09, 2018 14:48 UTC.


This page was created/modified in commit 669d193 "Copy ox-hugo test site" on 2017-11-02.
Markdown source of this page

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!


Content

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.

A unicorn!

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!

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.

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://hugo-sandbox.netlify.com/posts/figure-shortcode-and-attr-html/"
RelPermalink "/posts/figure-shortcode-and-attr-html/"
RSSLink ""
Data
KeyTypeValue
Pageshugolib.Pages
NextPageHyphens and spaces in tags
PrevPageIndented source block
NextInSectionHyphens and spaces in tags
PrevInSectionIndented source block

Page Params (Debug)

KeyTypeValue
draftbool false
iscjklanguagebool false
lastmodtime.Time 2017-11-02 10:12:52 -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.50-DEV (commit d5d50e2f, using Chroma commit d5ca12b) .

[Back to Hugo Sandbox home]