res-figure
)
Image page resources can be resized and cropped.
This only works for
images
which are page
resources, not for images
in the /static folder.
This theme provides a shortcode res-figure
for page resource image processing.
{{< res-figure "." "img/pixabay/pixabay/*" "Resize" "150x" "%%I%%n%%F" >}}{{< /res-figure />}}
resources:
- src: img/pixabay/*.jpg
params:
origin: pixabay.com
license: Creative Commons CC0
licenselink: https://pixabay.com/en/service/terms/#usage
caption: "%%I%%n%%B%%n%%O"
- src: img/pixabay/penguin-2104173_1920.jpg
params:
originlink: https://pixabay.com/en/penguin-rockhopper-penguin-zoo-2104173/
attrby: Michael Frankenstein
attrlink: https://pixabay.com/en/users/frankenstein-2135887/
imgcmd: Resize
imgopt: 400x
Argument | Position -1 | Default | What | Remark |
---|---|---|---|---|
path | 0 | "." | path to resource page | |
match | 1 | * | images | in page resource |
cmd | 2 | Resize | command | Fill, Fit or Resize |
opt | 3 | 300x | options | command options |
cap | 4 | %%N | caption format | see below |
Code | What |
---|---|
%%n | newline |
%%f | .Name |
%%F | Filename |
%%B | Basename |
%%T | .Title |
%%N | .Title or Basename |
%%L | license |
%%O | origin |
%%A | attr |
%%I | image info |
res-figure.html
{{- $myCapFileName := replaceRE `.*/` (``) ($myResource.Name) }}
{{- $myCapFileBase := replaceRE `\.[^.]+$` (``) ($myCapFileName) }}
{{- $myCapFileHumanize := humanize $myCapFileBase }}
{{- $myCaption := replaceRE `%%n` (`<br>`) $myCaption }}
{{- $myCaption := replaceRE `%%f` ($myResource.Name) $myCaption }}
{{- $myCaption := replaceRE `%%F` ($myCapFileName) $myCaption }}
{{- $myCaption := replaceRE `%%B` ($myCapFileBase) $myCaption }}
{{- $myCaption := replaceRE `%%T` ($myResource.Title) $myCaption }}
{{- $myCaption := replaceRE `%%N` (cond (eq $myResource.Name $myResource.Title) (humanize $myCapFileBase) (humanize $myResource.Title) ) $myCaption }}
{{- $myCaption := replaceRE `%%L` (cond (not (isset $myResource.Params "licenselink") ) ($myResource.Params.license) (printf "<a href='%s'>%s</a>" $myResource.Params.licenselink $myResource.Params.license) ) $myCaption }}
{{- $myCaption := replaceRE `%%O` (cond (not (isset $myResource.Params "originlink" ) ) ($myResource.Params.origin) (printf "<a href='%s'>%s</a>" $myResource.Params.originlink $myResource.Params.origin) ) $myCaption }}
{{- $myCaption := replaceRE `%%A` (cond (not (isset $myResource.Params "attrlink" ) ) ($myResource.Params.attrby) (printf "<a href='%s'>%s</a>" $myResource.Params.attrlink $myResource.Params.attrby) ) $myCaption }}
{{- $myCaption := replaceRE `%%I` (printf "%s '%s'" $myCommand $myOptions) $myCaption }}
See https://gohugo.io/content-management/image-processing/
{{< res-figure "." "img/pixabay/penguin-21*" />}} {{< res-figure "." "img/pixabay/penguin-21*" "Fit" "200x200" />}} {{< res-figure "." "img/pixabay/penguin-21*" "Fill" "200x200" "%%I%%n%%O%%n%%A" />}} {{< res-figure path="." match="img/pixabay/penguin-21*" opt="100x" cap="%%I%%n%%F" />}} {{< res-figure path="." match="**_/penguin-21" cmd="Fill" opt="150x200" />}}
penguin-2104173_1920
pixabay.com
penguin-2104173_1920
pixabay.com
pixabay.com
Michael Frankenstein
penguin-2104173_1920.jpg
penguin-2104173_1920
pixabay.com
{{< res-figure "." "img/pixabay/penguin-11*" />}} {{< res-figure "." "img/pixabay/penguin-11*" "Fit" "200x200" />}} {{< res-figure "." "img/pixabay/penguin-11*" "Fill" "200x200" />}}
penguin-1196947_1920
pixabay.com
penguin-1196947_1920
pixabay.com
penguin-1196947_1920
pixabay.com
{{< res-figure "." "img/pixabay/penguin-27*" />}} {{< res-figure "." "img/pixabay/penguin-27*" "Fit" "200x200" />}} {{< res-figure "." "img/pixabay/penguin-27*" "Fill" "200x200" />}}
penguin-2753282_1920
pixabay.com
penguin-2753282_1920
pixabay.com
penguin-2753282_1920
pixabay.com
{{< res-figure "." "img/pixabay/penguin-96*" />}} {{< res-figure "." "img/pixabay/penguin-96*" "Fit" "200x200" />}} {{< res-figure "." "img/pixabay/penguin-96*" "Fill" "200x200" />}}
penguin-963703_1920
pixabay.com
penguin-963703_1920
pixabay.com
penguin-963703_1920
pixabay.com
{{< res-figure "." "img/pixabay/penguin-25*" />}} {{< res-figure "." "img/pixabay/penguin-25*" "Fit" "200x200" />}} {{< res-figure "." "img/pixabay/penguin-25*" "Fill" "200x200" "%%I%%n(smartcrop fails)" />}} {{< res-figure "." "img/pixabay/penguin-25*" "Fill" "200x200 left" />}}
penguin-2528615_1920
pixabay.com
penguin-2528615_1920
pixabay.com
(smartcrop fails)
penguin-2528615_1920
pixabay.com
{{< res-figure "." "img/pixabay/penguin-93*" />}} {{< res-figure "." "img/pixabay/penguin-93*" "Fit" "200x200" />}} {{< res-figure "." "img/pixabay/penguin-93*" "Fill" "200x200" "%%I%%n(smartcrop fails)" />}} {{< res-figure "." "img/pixabay/penguin-93*" "Fill" "200x200 right" />}}
penguin-935982_1920
pixabay.com
penguin-935982_1920
pixabay.com
(smartcrop fails)
penguin-935982_1920
pixabay.com
Nullam eu ante vel est convallis dignissim.
penguin-1196947_1920
pixabay.com
Curabitur vulputate vestibulum lorem. Fusce sagittis, libero non molestie
mollis, magna orci ultrices dolor, at vulputate neque nulla lacinia eros. Sed
id ligula quis est convallis tempor. Curabitur lacinia pulvinar nibh. Nam a
sapien.
penguin-2528615_1920
pixabay.com
Pellentesque dapibus suscipit ligula. Donec posuere augue in quam. Etiam vel
tortor sodales tellus ultricies commodo.
penguin-2104173_1920
pixabay.com
Suspendisse potenti. Aenean in sem ac leo mollis blandit. Donec neque quam, dignissim in, mollis nec, sagittis eu, wisi. Phasellus lacus. Etiam laoreet quam sed arcu. Phasellus at dui in ligula mollis ultricies. Integer placerat tristique nisl.
Curabitur vulputate vestibulum lorem. Fusce sagittis, libero non molestie mollis.
Pellentesque dapibus suscipit ligula. Donec posuere augue in quam. Etiam vel tortor sodales tellus ultricies commodo. Suspendisse potenti. Aenean in sem ac leo mollis blandit.
Donec neque quam, dignissim in, mollis nec, sagittis eu, wisi. Phasellus lacus. Etiam laoreet quam sed arcu. Phasellus at dui in ligula mollis ultricies.
config.toml
[imaging]
# https://gohugo.io/content-management/image-processing/
# Default resample filter used for resizing. Default is Box,
# a simple and fast averaging filter appropriate for downscaling.
# See https://github.com/disintegration/imaging
resampleFilter = "box"
# Defatult JPEG quality setting. Default is 75.
quality = 75
# Anchor used when cropping pictures.
# Default is "smart" which does Smart Cropping, using https://github.com/muesli/smartcrop
# Smart Cropping is content aware and tries to find the best crop for each image.
# Valid values are Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight
anchor = "smart"
config.toml
[params.resources]
# used in layouts/shortcodes/res-figure.html
defaultCommand = "Resize"
defaultOptions = "300x"
defaultCaption = "%%N"
res-figure.html
{{- $myDefaultCommand := $.Site.Params.resources.defaultImageCommand | default `Resize` }}
{{- $myDefaultOptions := $.Site.Params.resources.defaultImageOptions | default `300x` }}
{{- $myDefaultCaption := $.Site.Params.resources.defaultImageCaption | default `%%N` }}
{{- if .IsNamedParams }}
{{- $.Scratch.Set `theMatch` (.Get `match`) }}
{{- $.Scratch.Set `theCommand` (.Get `cmd` ) }}
{{- $.Scratch.Set `theOptions` (.Get `opt` ) }}
{{- $.Scratch.Set `theCaption` (.Get `cap` ) }}
{{- else }}
{{- $myPos := 0}} {{ if gt (len .Params) $myPos }} {{$.Scratch.Set `theMatch` (.Get $myPos) }} {{end}}
{{- $myPos := 1}} {{ if gt (len .Params) $myPos }} {{$.Scratch.Set `theCommand` (.Get $myPos) }} {{end}}
{{- $myPos := 2}} {{ if gt (len .Params) $myPos }} {{$.Scratch.Set `theOptions` (.Get $myPos) }} {{end}}
{{- $myPos := 3}} {{ if gt (len .Params) $myPos }} {{$.Scratch.Set `theCaption` (.Get $myPos) }} {{end}}
{{- end }}
{{- $myCommand := ( ($.Scratch.Get `theCommand` ) | default $myResource.Params.imgcmd | default $myDefaultCommand ) }}
{{- $myOptions := ( ($.Scratch.Get `theOptions` ) | default $myResource.Params.imgopt | default $myDefaultOptions ) }}
{{- $myCaption := ( ($.Scratch.Get `theCaption` ) | default $myResource.Params.caption | default $myDefaultCaption ) }}
So the order is:
static/css/w3css-basic.css
/* -------------------------------------------------- */
/* shortcut res-figure */
.res-figure {
display: inline-block;
background: rgba(0, 0, 0, 0.1);
padding: 5px;
}
.res-figcaption {
text-align: center;
font-size: 75%;
padding: 0px;
line-height: 1;
}
.res-figcaption a {
position: relative;
}