Image Effects
Th' theme supports non-standard image effects.
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 |
As described, ye can add this t' th' URL query parameter, but this may be cumbersome t' be done consistently fer th' whole plank.
Instead, ye can configure th' defaults 'n yer hugo.toml
aswell as overrid'n these default 'n th' planks frontmatter.
Explicitly set URL query parameter will override th' defaults 'n effect fer a plank.
Without any sett'ns 'n yer hugo.toml
this defaults t'
[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 'n a planks frontmatter by eg.
+++
[imageEffects]
border = true
+++
---
imageEffects:
border: true
---
{
"imageEffects": {
"border": true
}
}
Or by explicitly override sett'ns by URL query parameter
![Minion](https://octodex.github.com/images/minion.png?lightbox=false&bg-white=true)
Th' sett'ns applied t' th' 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 'n th' follow'n HTML whar' th' parameter be converted t' CSS classes.
<img src="https://octodex.github.com/images/minion.png?lightbox=false&bg-white=true" load'n="lazy" alt="Minion" class="bg-white border lazy nolightbox noshadow">
Extend'n
As ye can see 'n th' above example, th' bg-white
parameter be not initially supported 'n th' themes default sett'ns. Nevertheless ye be free t' define arbitrary parameter by just add'n them t' th' URL query parameter or set them 'n yer hugo.toml
or planks frontmatter.
If no extended parameter like bg-white
'n th' example be set on th' URL, a class="nobg-white"
'n th' HTML will only be generated if a default value was set 'n th' hugo.toml
or planks frontmatter.