Shortcodes

Here are some of my customizations/shortcodes

• bgbox

• bgtext

• child-pages

• compare

  Compare two images side-by-side or with the two images on top of each other exposed with a slider

  Parameters

  left_alt

  string (optional) — Left image source ALT text

  left_caption

  string (optional) — Left image caption text

  left_credit

  string (optional) — Left image credit text

  left_credit_align

  string (optional) — default: left — left | center | right

  left_credit_bg

  string (optional) — default: rgba(0,0,0,0.55) — CSS color value

  left_credit_color

  string (optional) — CSS color value

  left_src

  string (required) — Left image source

  mode

  string (optional) — default: side — side | slider

  right_alt

  string (optional) — Right image source ALT text

  right_caption

  string (optional) — Right image caption text

  right_credit

  string (optional) — Right image credit text

  right_credit_align

  string (optional) — default: right — left | center | right

  right_credit_bg

  string (optional) — default: rgba(0,0,0,0.55) — CSS color value

  right_credit_color

  string (optional) — CSS color value

  right_src

  string (required) — Right image source

  slider_aspect

  string (optional) — Aspect ratio of the slider (width/height)

  slider_height

  string (optional) — Height of the slider (px)

  slider_label_left

  string (optional) — Label for the left image

  slider_label_right

  string (optional) — Label for the right image

  slider_pos

  string (optional) — default: 50 — Position of the slider handle (%)

  Usage

  Hugo Copy

  '{{< compare
      left_src="..."
      left_alt="..."
      left_credit="..."
      left_credit_align="..."
      left_credit_bg="..."
      left_credit_color="..."
      left_caption="..."
      right_src="..."
      right_alt="..."
      right_credit="..."
      right_credit_align="..."
      right_credit_bg="..."
      right_credit_color="..."
      right_caption="..."
      >}}'
  

  Hugo Copy

  '{{< compare
      left_src="..."
      left_alt="..."
      left_credit="..."
      left_credit_align="..."
      left_credit_bg="..."
      left_credit_color="..."
      left_caption="..."
      right_src="..."
      right_alt="..."
      right_credit="..."
      right_credit_align="..."
      right_credit_bg="..."
      right_credit_color="..."
      right_caption="..."
      mode="slider"
      slider_pos="50"
      slider_label_left="..."
      slider_label_right="..."
      slider_height="..."
      slider_aspect="..." >}}'
  

• css-vars

  Inspector that lists all CSS custom properties (variables) and their computed values, updating live on theme toggle.

  Parameters

  prefix

  string (optional) — Only list variables that start with this prefix. Use `--theme-` to focus on theme vars.

  scope

  string (optional) — default: root (root, body, or a CSS selector like `#app`) — Which element's computed styles to inspect.

  search

  bool (optional) — default: true — Show a client-side filter box above the list.

  Usage

  Hugo Copy

  {{< css-vars >}}
  {{< css-vars prefix="--theme-" >}}
  {{< css-vars scope="body" >}}
  {{< css-vars prefix="--" search="false" >}}
  

• photo

• pullquote

  A pullquote with a quotation mark and a citation.

  Parameters

  align

  string (optional) — default: center — The alignment of the quote

  author

  string (optional) — default: none — The author of the quote

  variant

  string (optional) — default: ink (sun, ink, sky, mint, rose) — The color variant of the quote

  width

  string (optional) — default: none — The maximum width of the quote

  Usage

  Hugo Copy

  {{< pullquote author="John Berger" align="left" variant="ink" width="30ch" >}}
  To understand a thing is to be liberated from it.
  {{< /pullquote >}}
  

• release-banner

  Show latest Git tag and date from data/version.json, styled with your bgbox palette.

  Parameters

  style

  string (optional) — default: soft-amber — bgbox color token, e.g. sky, mint, rose…

  Usage

  Hugo Copy

  {{< release-banner >}}

  Hugo Copy

  {{< release-banner style="sky" >}}

• sc-index

• sc-usage

• sidecaption