Image Effects

The theme offers graphical effects for your linked images.

You can define additional custom image effects and set defaults in your configuration.

The default image effects shipped with the theme are

Name	Description
border	Draws a light thin border around the image
lazy	Lets the image be lazy loaded
lightbox	The image will be clickable to show it enlarged
shadow	Draws a shadow around the image to make it appear hovered/glowing

One way to use them is to add them as URL query parameter to each individually linked image.

This can become cumbersome to be done consistently for the whole site. Instead, you can configure the defaults in your hugo.toml as well as overriding these defaults in a page’s front matter.

Explicitly set URL query parameter will override the defaults set for a page or your site.

Without any settings in your hugo.toml imageEffects defaults to

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

Front Matter This can be overridden in a pages front matter for example by

+++
[imageEffects]
  lazy = false
+++

---
imageEffects:
  lazy: false
---

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

Or by explicitly override settings by URL query parameter

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

The settings applied to the above image would be

border = true
lazy = true
lightbox = false
shadow = false

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

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