Image Effects

This page shows you, how to configure custom image effects on top of existing ones.

This setting can also be overridden by your front matter.

If you don’t configure anything in your hugo.toml, the image effects default to

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

Configuration

Option You can change these settings in your hugo.toml and add arbitrary custom effects as boolean values (like bg-white in the 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 in

[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

With this configuration in effect, the following URL

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

would result in

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

Styling Effects

If the resulting effect value is

• true: add a class with the effect’s name
• false: add a class with the effect’s name and a “no” prefix

Styles for default effects are contained in the theme. Add styles for your custom effects to layouts/partials/content-header.html.

For the above example you could add styles for both boolean cases:

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