Image Effects

Th' theme offers effects fer yer linked images.

Ye can define additional custom image effects an' set defaults 'n yer configurat'n.

Th' default image effects shipped wit' th' theme be

Name	Descript'n
border	Draws a light thin border around th' image
dataurl	if th' linked image points t' a resource, it be converted t' a base64 encoded dataurl
inlinecontent	if th' linked image points t' a SVG resource, th' rrrambl'n will be used instead o' an `<img>` element, this be useful fer apply'n additional CSS styles t' th' elements inside o' th' SVG which be otherwise imposs'ble
lazy	Lets th' image be lazy boarded
lightbox	Th' image will be click'ble t' show it enlarged
rounded	Rounds th' corners o' th' image
shadow	Draws a shadow around th' image t' make it appear hovered/glow'n

Besides these, ye can give th' size o' an image.

Name	Descript'n
height	Th' height o' th' image as a CSS value
width	Th' width o' th' image as a CSS value

If only one o' them be given, th' other one follows th' image’s aspect ratio. An image giv'n one o' them ignores both o' th' defaults, so it be not stretched by a default width when ask'n fer a height.

One way t' use them be t' add them as URL query parameter t' each individually linked image.

This can become cumbersome t' be done consistently fer th' whole ship. Instead, ye can configure th' defaults 'n yer project configurat'n as well as overrid'n these defaults 'n a page’s front matter.

Effect Priority

Image effects be applied 'n th' follow'n priority order (lowest t' highest):

Built-in defaults
Site-wide configurat'n 'n yer project configurat'n
Plank front matter configurat'n
URL query parameters
Template caller attributes parameter (highest priority)

Explicitly set URL query parameter will override th' defaults set fer a plank or yer ship. When call'n th' image partial directly from templates, effects passed via th' attributes parameter have th' highest priority an' will override all other sett'ns.

If an effect accepts boolean values, only sett'n th' parameter name without a value 'n th' URL will set it t' true.

Without any sett'ns 'n yer project configurat'n, imageEffects defaults t'

imageEffects:
  border: false
  dataurl: false
  height: ''
  inlinecontent: false
  lazy: true
  lightbox: true
  rounded: true
  shadow: false
  width: ''

[imageEffects]
  border = false
  dataurl = false
  height = ''
  inlinecontent = false
  lazy = true
  lightbox = true
  rounded = true
  shadow = false
  width = ''

{
   "imageEffects": {
      "border": false,
      "dataurl": false,
      "height": "",
      "inlinecontent": false,
      "lazy": true,
      "lightbox": true,
      "rounded": true,
      "shadow": false,
      "width": ""
   }
}

Front Matter This can be overridden 'n a planks front matter fer example by

---
params:
  imageEffects:
    lazy: false
---

+++
[params]
  [params.imageEffects]
    lazy = false
+++

{
   "params": {
      "imageEffects": {
         "lazy": false
      }
   }
}

Or by explicitly override sett'ns by URL query parameter

![Minion](https://octodex.github.com/images/minion.png?lazy=true&lightbox=false)

Th' sett'ns applied t' th' above image would be

imageEffects:
  border: true
  dataurl: false
  height: ''
  inlinecontent: false
  lazy: true
  lightbox: false
  rounded: true
  shadow: false
  width: ''

[imageEffects]
  border = true
  dataurl = false
  height = ''
  inlinecontent = false
  lazy = true
  lightbox = false
  rounded = true
  shadow = false
  width = ''

{
   "imageEffects": {
      "border": true,
      "dataurl": false,
      "height": "",
      "inlinecontent": false,
      "lazy": true,
      "lightbox": false,
      "rounded": true,
      "shadow": false,
      "width": ""
   }
}

Template Usage

When call'n th' image partial directly from templates, ye can pass effect preferences via th' attributes parameter. Effect names can be prefixed wit' no t' dis'ble them.

{{- $attributes := dict "class" "nolightbox border" }}
{{ partial "shortcodes/image.html" (dict "page" . "url" "image.png" "attributes" $attributes) }}

This approach has th' highest priority an' will override all other effect sett'ns, includ'n URL query parameters. Effect classes be processed but not added t' th' final HTML class attribute. Non-effect classes pass through unchanged.

For example, class = "nolightbox custom-img-class" will dis'ble th' lightbox effect an' add custom-img-class t' th' HTML output, but neither lightbox nor nolightbox will appear 'n th' final class attribute.