Change hero param format to process

README.md

@@ -413,7 +413,7 @@ Parameters:
 The `paige/hero` shortcode provides a hero section.
 
 ```
-{{< paige/hero alt="" format="" header="" height="" image="" imageclass="" maxheight="" maxwidth="" title="" width="" >}} {{< /paige/hero >}}
+{{< paige/hero alt="" header="" height="" image="" imageclass="" maxheight="" maxwidth="" process="" title="" width="" >}} {{< /paige/hero >}}
 ```
 
 Inner content: Optional. String. Markdown. The body.
@@ -423,8 +423,6 @@ Parameters:
 <dl>
     <dt><code>alt</code></dt>
     <dd>Optional. String. Plain text. Image alt.</dd>
-    <dt><code>format</code></dt>
-    <dd>Optional. String. Image format. Must be <code>bmp</code>, <code>gif</code>, <code>jpg</code>, <code>png</code>, <code>tiff</code>, or <code>webp</code>. Must not be used with <code>method</code> or <code>options</code>.</dd>
     <dt><code>header</code></dt>
     <dd>Optional. String. Markdown. The header.</dd>
     <dt><code>height</code></dt>
@@ -437,6 +435,8 @@ Parameters:
     <dd>Optional. String. CSS value. Image maximum height. Default is <code>20rem</code>.</dd>
     <dt><code>maxwidth</code></dt>
     <dd>Optional. String. CSS value. Image maximum width.</dd>
+    <dt><code>process</code></dt>
+    <dd>Optional. String or boolean. If a string, it is the Hugo image processing <a href="https://gohugo.io/content-management/image-processing/#image-processing-methods">methods</a> and <a href="https://gohugo.io/content-management/image-processing/#image-processing-options">options</a>, mixed together. If no method is specified, resize is used. If no image dimensions are given, the originals are used. If a boolean that is true, the Hugo image processing method resize is used, and the default Hugo image processing options are used.</dd>
     <dt><code>stretch</code></dt>
     <dd>Optional. Boolean. Whether to stretch the image fully horizontally.</dd>
     <dt><code>title</code></dt>

exampleSite/content/_index.md

@@ -15,10 +15,10 @@ title: "Paige"
 
 {{< paige/hero
     alt="Landscape"
-    format="webp"
     header="An advanced Hugo theme"
     image="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296"
     imageclass="rounded-4 shadow"
+    process="webp"
     stretch=true >}}
 Paige is designed to put your content front and center, avoiding the typical clutter. The look is seamless and smooth, scalable and readable, portable and efficient. The layout is minimal and responsive, using verticality and white space to focus and delineate parts of the page. The implementation is flexible and extensible. It's a versatile canvas that serves most web needs.
 {{< /paige/hero >}}

layouts/shortcodes/paige/hero.html

@@ -1,6 +1,5 @@
 {{ $alt := .Get "alt" }}
 {{ $content := .Inner | replaceRE "^\n" "" | replaceRE "\n$" "" | markdownify }}
-{{ $format := .Get "format" }}
 {{ $header := .Get "header" | markdownify }}
 {{ $height := .Get "height" }}
 {{ $image := .Get "image" }}
@@ -8,6 +7,7 @@
 {{ $maxheight := .Get "maxheight" | default "20rem" }}
 {{ $maxwidth := .Get "maxwidth" }}
 {{ $page := .Page }}
+{{ $process := .Get "process" }}
 {{ $stretch := .Get "stretch" }}
 {{ $title := .Get "title" }}
 {{ $width := .Get "width" }}
@@ -29,12 +29,12 @@
                 "alt" $alt
                 "class" $imageclass
                 "fetchpriority" "high"
-                "format" $format
                 "height" $height
                 "loading" "eager"
                 "maxheight" $maxheight
                 "maxwidth" $maxwidth
                 "page" $page
+                "process" $process
                 "src" .
                 "title" $title
                 "width" $width