diff options
| author | Joe Mooring <joe.mooring@veriphor.com> | 2023-10-27 20:19:39 -0700 |
|---|---|---|
| committer | Bjørn Erik Pedersen <bjorn.erik.pedersen@gmail.com> | 2023-10-29 10:16:37 +0100 |
| commit | 3ed28e4bfe2d333fdf1ca2434b57cfc10c3d9791 (patch) | |
| tree | 165df55f1f5090b98423be2d8c1d7e78ad7bee41 /docs | |
| parent | db14238ba323279b28e7ad4cfff5aa10909ccd18 (diff) | |
resources/images: Create padding image filter
Closes #11599
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/content/en/functions/images/index.md | 28 |
1 files changed, 27 insertions, 1 deletions
diff --git a/docs/content/en/functions/images/index.md b/docs/content/en/functions/images/index.md index a71c2b61c..f886caa72 100644 --- a/docs/content/en/functions/images/index.md +++ b/docs/content/en/functions/images/index.md @@ -104,7 +104,6 @@ The following example will add the text `Hugo rocks!` to the image with the spec You can load a custom font if needed. Load the font as a Hugo `Resource` and set it as an option: ```go-html-template - {{ $font := resources.GetRemote "https://github.com/google/fonts/raw/main/apache/roboto/static/Roboto-Black.ttf" }} {{ $img := resources.Get "/images/background.png" }} {{ $img = $img.Filter (images.Text "Hugo rocks!" (dict @@ -112,6 +111,33 @@ You can load a custom font if needed. Load the font as a Hugo `Resource` and set ))}} ``` +## Padding + +Padding creates a filter that resizes the image canvas without resizing the image. The last argument is the canvas color, expressed as an RGB or RGBA [hexadecimal color]. The default value is `ffffffff` (opaque white). The preceding arguments are the padding values, in pixels, using the CSS [shorthand property] syntax. Negative padding values will crop the image. + +[hexadecimal color]: https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color +[shorthand property]: https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box + +{{% funcsig %}} +images.Padding V1 [V2] [V3] [V4] [COLOR] +{{% /funcsig %}} + +This example resizes the image to 300px wide, converts it to the WebP format, adds 20px vertical padding and 50px horizontal padding, then sets the canvas color to dark green with 33% opacity. + +```go-html-template +{{ $img := resources.Get "images/a.jpg" }} +{{ $filters := slice + (images.Process "resize 300x webp") + (images.Padding 20 50 "#0705") +}} +{{ $img = $img.Filter $filters }} +``` + +To add a 2px gray border to an image: + +```go-html-template +{{ $img = $img.Filter (images.Padding 2 "#777") }} +``` ## Brightness |