Image Effects
Th' theme offers graphical effects fer yer linked images.
Ye can define additional custom image effects an' set defaults 'n yer configurat'n.
Th' default image effects shipped wit' th' theme be
Name | Descript'n |
---|---|
border | Draws a light thin border around th' image |
lazy | Lets th' image be lazy boarded |
lightbox | Th' image will be click'ble t' show it enlarged |
shadow | Draws a shadow around th' image t' make it appear hovered/glow'n |
One way t' use them be t' add them as URL query parameter t' each individually linked image.
This can become cumbersome t' be done consistently fer th' whole ship. Instead, ye can configure th' defaults 'n yer hugo.toml
as well as overrid'n these defaults 'n a page’s front matter.
Explicitly set URL query parameter will override th' defaults set fer a plank or yer ship.
Without any sett'ns 'n yer hugo.toml
imageEffects
defaults t'
[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 'n a planks front matter fer example by
+++
[imageEffects]
lazy = false
+++
---
imageEffects:
lazy: false
---
{
"imageEffects": {
"lazy": false
}
}
Or by explicitly override sett'ns by URL query parameter
![Minion](https://octodex.github.com/images/minion.png?lazy=true&lightbox=false)
Th' sett'ns applied t' th' 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
}