Image Effects

This plank shows ye, how t' configure custom image effects on top o' exist'n ones.

This sett'n can also be overridden by yer front matter.

If ye don’t configure anyth'n 'n yer hugo.toml, th' image effects default t'

Default Values

[imageEffects]
  border = false
  lazy = true
  lightbox = true
  shadow = false

imageEffects:
  border: false
  lazy: true
  lightbox: true
  shadow: false

{
   "imageEffects": {
      "border": false,
      "lazy": true,
      "lightbox": true,
      "shadow": false
   }
}

Configurat'n

Opt'n Ye can change these sett'ns 'n yer hugo.toml an' add arbitrary custom effects as boolean values (like bg-white 'n th' below snippet).

[params]
  [params.imageEffects]
    bg-white = true
    border = true
    lazy = false

params:
  imageEffects:
    bg-white: true
    border: true
    lazy: false

{
   "params": {
      "imageEffects": {
         "bg-white": true,
         "border": true,
         "lazy": false
      }
   }
}

This would result 'n

[imageEffects]
  bg-white = true
  border = true
  lazy = false
  lightbox = true
  shadow = false

imageEffects:
  bg-white: true
  border: true
  lazy: false
  lightbox: true
  shadow: false

{
   "imageEffects": {
      "bg-white": true,
      "border": true,
      "lazy": false,
      "lightbox": true,
      "shadow": false
   }
}

Example

Wit' this configurat'n 'n effect, th' follow'n URL

![Minion](https://octodex.github.com/images/minion.png)

would result 'n

<img src="https://octodex.github.com/images/minion.png" load'n="lazy" alt="Minion" class="bg-white border nolazy lightbox noshadow">

Styl'n Effects

If th' result'n effect value be

• true: add a class wit' th' effect’s name
• false: add a class wit' th' effect’s name an' a “no” prefix

Styles fer default effects be contained 'n th' theme. Add styles fer yer custom effects t' layouts/partials/content-header.html.

For th' above example ye could add styles fer both boolean cases:

<style>
img.bg-white {
  background-color: white;
}
img.nobg-white {
  background-color: transparent;
}
</style>