Home  Home  Home  Contact  Contact  Contact  Stuff  Stuff  Stuff
 Blog  Blog  Blog  FAQ  FAQ  FAQ
 Home  Home  Home  Contact  Contact  Contact  Stuff  Stuff  Stuff
 Blog  Blog  Blog  FAQ  FAQ  FAQ

Image Processing (res-figure)

/hugo-theme-w3css-basic.github.io/resources/images/teaserpics/pixabay.com/particles-1373684_640_hu1429823447425971835.jpg

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.

Demo /* Resize 150x 

{{< res-figure "." "img/pixabay/pixabay/*" "Resize" "150x" "%%I%%n%%F" >}}{{< /res-figure />}}
humboldt-penguin-3064468_1920.jpg
Resize '150x'
humboldt-penguin-3064468_1920.jpg
penguin-1196947_1920.jpg
Resize '150x'
penguin-1196947_1920.jpg
penguin-2104173_1920.jpg
Resize '150x'
penguin-2104173_1920.jpg
penguin-2528615_1920.jpg
Resize '150x'
penguin-2528615_1920.jpg
penguin-2753282_1920.jpg
Resize '150x'
penguin-2753282_1920.jpg
penguin-935982_1920.jpg
Resize '150x'
penguin-935982_1920.jpg
penguin-963703_1920.jpg
Resize '150x'
penguin-963703_1920.jpg

Configuration 

Front Matter Resources 

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
      

res-figure Parameters 

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

Caption format 

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 }}

Image processing commands 

See https://gohugo.io/content-management/image-processing/

Showcase 

Demo /penguin-21* 

{{< 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.jpg
Resize '400x'
penguin-2104173_1920
pixabay.com
penguin-2104173_1920.jpg
Fit '200x200'
penguin-2104173_1920
pixabay.com
penguin-2104173_1920.jpg
Fill '200x200'
pixabay.com
Michael Frankenstein
penguin-2104173_1920.jpg
Resize '100x'
penguin-2104173_1920.jpg
penguin-2104173_1920.jpg
Fill '150x200'
penguin-2104173_1920
pixabay.com

Demo /penguin-11* 

{{< 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.jpg
Resize '300x'
penguin-1196947_1920
pixabay.com
penguin-1196947_1920.jpg
Fit '200x200'
penguin-1196947_1920
pixabay.com
penguin-1196947_1920.jpg
Fill '200x200'
penguin-1196947_1920
pixabay.com

Demo /penguin-27* 

{{< 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.jpg
Resize '300x'
penguin-2753282_1920
pixabay.com
penguin-2753282_1920.jpg
Fit '200x200'
penguin-2753282_1920
pixabay.com
penguin-2753282_1920.jpg
Fill '200x200'
penguin-2753282_1920
pixabay.com

Demo /penguin-96* 

{{< 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.jpg
Resize '300x'
penguin-963703_1920
pixabay.com
penguin-963703_1920.jpg
Fit '200x200'
penguin-963703_1920
pixabay.com
penguin-963703_1920.jpg
Fill '200x200'
penguin-963703_1920
pixabay.com

Demo /penguin-25* 

{{< 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.jpg
Resize '300x'
penguin-2528615_1920
pixabay.com
penguin-2528615_1920.jpg
Fit '200x200'
penguin-2528615_1920
pixabay.com
penguin-2528615_1920.jpg
Fill '200x200'
(smartcrop fails)
penguin-2528615_1920.jpg
Fill '200x200 left'
penguin-2528615_1920
pixabay.com

Demo /penguin-93* 

{{< 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.jpg
Resize '300x'
penguin-935982_1920
pixabay.com
penguin-935982_1920.jpg
Fit '200x200'
penguin-935982_1920
pixabay.com
penguin-935982_1920.jpg
Fill '200x200'
(smartcrop fails)
penguin-935982_1920.jpg
Fill '200x200 right'
penguin-935982_1920
pixabay.com

Demo with Text 

Nullam eu ante vel est convallis dignissim.

penguin-1196947_1920.jpg
Resize '300x'
penguin-1196947_1920
pixabay.com
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.

penguin-2528615_1920.jpg
Resize '300x'
penguin-2528615_1920
pixabay.com
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.

penguin-2104173_1920.jpg
Resize '400x'
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.

Demo with inner 

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.

penguin-1196947_1920.jpg
Aenean in sem ac leo mollis blandit. Donec neque quam, dignissim in, mollis nec, sagittis eu, wisi

Donec neque quam, dignissim in, mollis nec, sagittis eu, wisi. Phasellus lacus. Etiam laoreet quam sed arcu. Phasellus at dui in ligula mollis ultricies.

More on Configuration 

Defaults 

Image processing config 

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"

res-figure 

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:

  1. shortcode parameter
  2. front matter resource params
  3. site params
  4. given defaults in shortcode

Styles 

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;
}