theme: Remove readfile shortcode

content/en/content-management/image-processing/index.md

@@ -401,31 +401,17 @@ See [github.com/disintegration/imaging] for the complete list of resampling filt
 
 _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.jpg" "resize 300x" />}}
+{{< imgproc path="sunset.jpg" spec="resize 480x" alt="A sunset" />}}
 
-{{< imgproc "sunset.jpg" "fill 90x120 left" />}}
+{{< imgproc path="sunset.jpg" spec="fill 120x150 left" alt="A sunset" />}}
 
-{{< imgproc "sunset.jpg" "fill 90x120 right" />}}
+{{< imgproc path="sunset.jpg" spec="fill 120x150 right" alt="A sunset" />}}
 
-{{< imgproc "sunset.jpg" "fit 90x90" />}}
+{{< imgproc path="sunset.jpg" spec="fit 120x120" alt="A sunset" />}}
 
-{{< imgproc "sunset.jpg" "crop 250x250 center" />}}
+{{< imgproc path="sunset.jpg" spec="crop 240x240 center" alt="A sunset" />}}
 
-{{< imgproc "sunset.jpg" "resize 300x q10" />}}
-
-This is the shortcode used to generate the examples above:
-
-{{< readfile file=layouts/shortcodes/imgproc.html highlight=go-html-template >}}
-
-Call the shortcode from your Markdown like this:
-
-```go-html-template
-{{</* imgproc "sunset.jpg" "resize 300x" /*/>}}
-```
-
-{{% note %}}
-Note the self-closing shortcode syntax above. You may call the `imgproc` shortcode with or without **inner content**.
-{{% /note %}}
+{{< imgproc path="sunset.jpg" spec="resize 360x q10" alt="A sunset" />}}
 
 ## Imaging configuration
 
@@ -474,11 +460,11 @@ excludeFields
 includeFields
 : Regular expression matching the EXIF tags to include in the `.Tags` collection. Default is&nbsp;`""`. To include all available tags, set this value to&nbsp;`".*"`.
 
-{{% note %}}
-To improve performance and decrease cache size, Hugo excludes the following tags: `ColorSpace`, `Contrast`, `Exif`, `Exposure[M|P|B]`, `Flash`, `GPS`, `JPEG`, `Metering`, `Resolution`, `Saturation`, `Sensing`, `Sharp`, and `WhiteBalance`.
+  {{% note %}}
+  To improve performance and decrease cache size, Hugo excludes the following tags: `ColorSpace`, `Contrast`, `Exif`, `Exposure[M|P|B]`, `Flash`, `GPS`, `JPEG`, `Metering`, `Resolution`, `Saturation`, `Sensing`, `Sharp`, and `WhiteBalance`.
 
-To control tag availability, change the `excludeFields` or `includeFields` settings as described above.
-{{% /note %}}
+  To control tag availability, change the `excludeFields` or `includeFields` settings as described above.
+  {{% /note %}}
 
 ## Smart cropping of images
 
@@ -486,9 +472,9 @@ By default, Hugo uses the [Smartcrop] library when cropping images with the `Cro
 
 Examples using the sunset image from above:
 
-{{< imgproc "sunset.jpg" "fill 200x200 smart" />}}
+{{< imgproc path="sunset.jpg" spec="fill 200x200 smart" alt="A sunset" />}}
 
-{{< imgproc "sunset.jpg" "crop 200x200 smart" />}}
+{{< imgproc path="sunset.jpg" spec="crop 200x200 smart" alt="A sunset" />}}
 
 ## Image processing performance consideration
 

layouts/shortcodes/imgproc.html

@@ -1,37 +1,40 @@
 {{- /*
-Renders the given image using the given process specification.
+  Renders the given image using the given process specification.
 
-@param {string} (positional parameter 0) The path to the image, relative to the current page. The image must be a page resource.
-@param {string}} (positional parameter 1) The image processing specification.
+  @param {string} path The path to the image, either a page resource or a global resource.
+  @param {string} spec The image processing specification.
+  @param {string} alt The alt attribute of the img element.
 
-@returns template.HTML
+  @returns template.HTML
 
-@example {{< imgproc "sunset.jpg" "resize 300x" />}}
+  @example {{< imgproc path="sunset.jpg" spec="resize 300x" alt="A sunset" /
+>}}
 */}}
-
-{{- with $.Get 0 }}
-  {{- with $i := $.Page.Resources.Get . }}
-    {{- with $spec := $.Get 1 }}
+{{- with $.Get "path" }}
+  {{- with $i := or ($.Page.Resources.Get .) (resources.Get .) }}
+    {{- with $spec := $.Get "spec" }}
       {{- with $i.Process . }}
-        <figure style="padding: 0.25rem; margin: 2rem 0; background-color: #cccc">
-          <img style="max-width: 100%; width: auto; height: auto;" src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
-          <figcaption>
-            <small>
-              {{- with $.Inner }}
-                {{ . }}
-              {{- else }}
-                {{ $spec }}
-              {{- end }}
-            </small>
+        <figure>
+          <img
+            src="{{ .RelPermalink }}"
+            width="{{ .Width }}"
+            height="{{ .Height }}"
+            alt="{{ $.Get `alt` }}" />
+          <figcaption class="not-prose text-sm">
+            {{- with $.Inner }}
+              {{ . }}
+            {{- else }}
+              {{ $spec }}
+            {{- end }}
           </figcaption>
         </figure>
       {{- end }}
     {{- else }}
-      {{- errorf "The %q shortcode requires a positional parameter (1) containing the image processing specification. See %s" $.Name $.Position }}
+      {{- errorf "The %q shortcode requires a 'spec' argument containing the image processing specification. See %s" $.Name $.Position }}
     {{- end }}
   {{- else }}
     {{- errorf "The %q shortcode was unable to find %q. See %s" $.Name . $.Position }}
   {{- end }}
 {{- else }}
-  {{- errorf "The %q shortcode requires a positional parameter (0) indicating the image path, relative to the current page. See %s" $.Name $.Position }}
+  {{- errorf "The %q shortcode requires a 'path' argument indicating the image path. The image must be a page resource or a global resource. See %s" $.Name $.Position }}
 {{- end }}

layouts/shortcodes/readfile.html

@@ -1 +0,0 @@
-TODO readfile.html