Image Effects

The theme supports non-standard image effects.

As described, you can add this to the URL query parameter, but this may be cumbersome to be done consistently for the whole page.

Instead, you can configure the defaults in your hugo.toml as well as overriding these default in the pages frontmatter.

Explicitly set URL query parameter will override the defaults in effect for a page.

Without any settings in your hugo.toml this defaults to

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

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

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

This can be overridden in a pages frontmatter by eg.

+++
[imageEffects]
  border = true
+++

---
imageEffects:
  border: true
---

{
   "imageEffects": {
      "border": true
   }
}

Or by explicitly override settings by URL query parameter

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

The settings applied to the above image would be

bg-white = true
border = true
lazy = true
lightbox = false
shadow = false

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

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

This ends up in the following HTML where the parameter are converted to CSS classes.

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

Extending

As you can see in the above example, the bg-white parameter is not initially supported in the themes default settings. Nevertheless you are free to define arbitrary parameter by just adding them to the URL query parameter or set them in your hugo.toml or pages frontmatter.