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 project configurat'n, th' image effects default t'

Default Values

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": ""
   }
}

Configurat'n

Opt'n Ye can change these sett'ns 'n yer project configurat'n an' add arbitrary custom effects as boolean values (like bg-white 'n th' below snippet). Ye can also give a default size fer yer images wit' height an' width.

hugo.

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

[params]
  [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
  dataurl: false
  height: ''
  inlinecontent: false
  lazy: false
  lightbox: true
  rounded: true
  shadow: false
  width: ''

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

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

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" loading="lazy" alt="Minion" class="bg-white border lightbox rounded">

Styl'n Effects

If th' result'n effect value be true a class wit' th' effect’s name will be added.

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

For th' above custom effect ye could add th' follow'n style:

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