Add image processing examples

content/about/new-in-032/index.md

@@ -102,13 +102,6 @@ Type here is `page` for pages, else the main type in the MIME type, so `image`,
 
 ## Image Processing
 
-{{% note %}}
-There is a known issue with image processing in shortcodes. See https://github.com/gohugoio/hugo/issues/4202
-
-
-We will fix in a day or two.
-{{% /note %}}
-
 The `image` resource implements the methods `Resize`, `Fit` and `Fill`:
 
 Resize
@@ -126,6 +119,35 @@ Image operations in Hugo currently **do not preserve EXIF data** as this is not
 {{% /note %}}
 
 
+### Image Processing Examples
+
+_The photo of the sunset used in the examples below is Copyright [Bjørn Erik Pedersen](https://commons.wikimedia.org/wiki/User:Bep) (Creative Commons Attribution-Share Alike 4.0 International license)_
+
+
+{{< imgproc sunset Resize "300x" >}}
+
+{{< imgproc sunset Fill "90x120 left" >}}
+
+{{< imgproc sunset Fill "90x120 right" >}}
+
+{{< imgproc sunset Fit "90x90" >}}
+
+{{< imgproc sunset Resize "300x q10" >}}
+
+
+This is the shortcode used in the examples above:
+
+
+{{< code file="layouts/shortcodes/imgproc.html" >}}
+{{< readfile file="layouts/shortcodes/imgproc.html" >}}   
+{{< /code >}}
+
+And it is used like this:
+
+```html
+{{</* imgproc sunset Resize "300x" */>}}
+```
+
 ### Image Processing Options
 
 In addition to the dimensions (e.g. `200x100`) where either height or width can be omitted, Hugo supports a set of additional image options:

layouts/shortcodes/imgproc.html

@@ -0,0 +1,19 @@
+{{ $original := .Page.Resources.GetByPrefix (.Get 0) }}
+{{ $command := .Get 1 }}
+{{ $options := .Get 2 }}
+{{ if eq $command "Fit"}}
+{{ .Scratch.Set "image" ($original.Fit $options) }}
+{{ else if eq $command "Resize"}}
+{{ .Scratch.Set "image" ($original.Resize $options) }}
+{{ else if eq $command "Fill"}}
+{{ .Scratch.Set "image" ($original.Fill $options) }}
+{{ else }}
+{{ errorf "Invalid image processing command: Must be one of fit, fill or resize."}}
+{{ end }}
+{{ $image := .Scratch.Get "image" }}
+<figure style="width: {{ add $image.Width 3 }}px; padding: 3px; background-color: #cccc">
+	<img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
+	<figcaption>
+	<small>.{{ $command }} "{{ $options }}"</small>
+	</figcaption>
+</figure>