aaf0c707a2
- new link effects: target download - effects can now be strings besides bools (to allow for custom download attribute on links) - remove "no*" classes form image as they don't make sense for string effects and are cluttering the image class list for newly introduced effects - refactor attribute parsing for later reusage in menu generation, button topbar, etc.
1.8 KiB
+++ categories = ["explanation", "howto"] description = "How to extend image effects" options = ["imageEffects"] title = "Image Effects" weight = 3 +++
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
{{< multiconfig >}} [imageEffects] border = false lazy = true lightbox = true shadow = false {{< /multiconfig >}}
Configuration
{{% badge style="cyan" icon="gears" title=" " %}}Option{{% /badge %}} You can change these settings in your hugo.toml and add arbitrary custom effects as boolean values (like bg-white in the below snippet).
{{< multiconfig file=hugo >}} [params] [params.imageEffects] bg-white = true border = true lazy = false {{< /multiconfig >}}
This would result in
{{< multiconfig >}} [imageEffects] bg-white = true border = true lazy = false lightbox = true shadow = false {{< /multiconfig >}}
Example
With this configuration in effect, the following URL
would result in
<img src="https://octodex.github.com/images/minion.png" loading="lazy" alt="Minion" class="bg-white border lightbox">
Styling Effects
If the resulting effect value is true a class with the effect's name will be added.
Styles for default effects are contained in the theme. Add styles for your custom effects to layouts/partials/content-header.html.
For the above custom effect you could add the following style:
<style>
img.bg-white {
background-color: white;
}
</style>