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" />}}
{{< res-figure "." "img/pixabay/penguin-11*" />}} {{< res-figure "." "img/pixabay/penguin-11*" "Fit" "200x200" />}} {{< res-figure "." "img/pixabay/penguin-11*" "Fill" "200x200" />}}
{{< res-figure "." "img/pixabay/penguin-27*" />}} {{< res-figure "." "img/pixabay/penguin-27*" "Fit" "200x200" />}} {{< res-figure "." "img/pixabay/penguin-27*" "Fill" "200x200" />}}
{{< res-figure "." "img/pixabay/penguin-96*" />}} {{< res-figure "." "img/pixabay/penguin-96*" "Fit" "200x200" />}} {{< res-figure "." "img/pixabay/penguin-96*" "Fill" "200x200" />}}
{{< 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" />}}
{{< 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" />}}
Nullam eu ante vel est convallis dignissim. Fusce suscipit, wisi nec facilisis facilisis, est dui fermentum leo, quis tempor ligula erat quis odio. Nunc porta vulputate tellus. Nunc rutrum turpis sed pede. Sed bibendum. Aliquam posuere. Nunc aliquet, augue nec adipiscing interdum, lacus tellus malesuada massa, quis varius mi purus non odio. Nullam eu ante vel est convallis dignissim. Fusce suscipit, wisi nec facilisis facilisis, est dui fermentum leo, quis tempor ligula erat quis odio. Nunc porta vulputate tellus. Nunc rutrum turpis sed pede. Sed bibendum. Aliquam posuere. Nunc aliquet, augue nec adipiscing interdum, lacus tellus malesuada massa, quis varius mi purus non odio. Pellentesque condimentum, magna ut suscipit hendrerit, ipsum augue ornare nulla, non luctus diam neque sit amet urna.
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. Pellentesque condimentum, magna ut suscipit hendrerit, ipsum augue ornare nulla, non luctus diam neque sit amet urna. Curabitur vulputate vestibulum lorem. Fusce sagittis, libero non molestie mollis, magna orci ultrices dolor, at vulputate neque nulla lacinia eros.
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. 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;
}