Add format param

README.md

@@ -456,6 +456,7 @@ The `paige/gallery` shortcode provides a figure with a collection of images.
 ```
 {{< paige/gallery
     align="center"
+    format="webp"
     height="10rem"
     images="*.jpg"
     justify="center"
@@ -481,6 +482,8 @@ Parameters:
 <dl>
     <dt><code>align</code></dt>
     <dd>Optional. String. Cross axis alignment. Must be <code>baseline</code>, <code>center</code>, <code>end</code>, <code>start</code>, or <code>stretch</code>. Must not be used when nested.</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>height</code></dt>
     <dd>Optional. String. CSS value. Image height.</dd>
     <dt><code>images</code></dt>
@@ -508,6 +511,7 @@ The `paige/hero` shortcode provides a hero section.
 ```
 {{< paige/hero
     alt="My alt"
+    format="webp"
     header="My header"
     height="10rem"
     image="https://github.com/willfaught/paige"
@@ -528,6 +532,8 @@ 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>
@@ -576,6 +582,7 @@ The `paige/image` shortcode provides a figure with an image.
 ```
 {{< paige/image
     alt="My alt" >}}
+    format="webp"
     height="10rem"
     link="https://github.com/willfaught/paige"
     maxheight="10rem"
@@ -595,6 +602,8 @@ 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>height</code></dt>
     <dd>Optional. String. CSS value. Image height.</dd>
     <dt><code>link</code></dt>

layouts/partials/paige/img.html

@@ -5,6 +5,7 @@
 {{ $crossorigin := $params.crossorigin | default "anonymous" }}
 {{ $fetchpriority := $params.fetchpriority }}
 {{ $fingerprint := $params.fingerprint | default true }}
+{{ $format := $params.format }}
 {{ $height := $params.height }}
 {{ $loading := $params.loading | default "lazy" }}
 {{ $maxheight := $params.maxheight }}
@@ -31,6 +32,11 @@
 {{ end }}
 
 {{ with $resource }}
+    {{ if and (not $method) (not $options) $format }}
+        {{ $method = "resize" }}
+        {{ $options = printf "%dx%d %s" $resource.Width $resource.Height $format }}
+    {{ end }}
+
     {{ if and $method $options }}
         {{ if eq $method "crop" }}
             {{ $resource = $resource.Crop $options }}

layouts/shortcodes/paige/gallery.html

@@ -1,4 +1,5 @@
 {{ $align := .Get "align" | default "center" }}
+{{ $format := .Get "format" }}
 {{ $height := .Get "height" }}
 {{ $images := .Get 0 | default (.Get "images") }}
 {{ $justify := .Get "justify" | default "center" }}
@@ -44,6 +45,7 @@
                             {{ partial "paige/a.html" (dict
                                 "content" (partial "paige/img.html" (dict
                                     "class" "img-fluid"
+                                    "format" $format
                                     "height" $height
                                     "maxheight" $maxheight
                                     "maxwidth" $maxwidth
@@ -68,6 +70,7 @@
                     {{ partial "paige/a.html" (dict
                         "content" (partial "paige/img.html" (dict
                             "class" "img-fluid"
+                            "format" $format
                             "height" $height
                             "maxheight" $maxheight
                             "maxwidth" $maxwidth

layouts/shortcodes/paige/hero.html

@@ -1,5 +1,6 @@
 {{ $alt := .Get "alt" }}
 {{ $content := .Inner | replaceRE "^\n" "" | replaceRE "\n$" "" | markdownify }}
+{{ $format := .Get "format" }}
 {{ $header := .Get "header" | markdownify }}
 {{ $height := .Get "height" }}
 {{ $image := .Get "image" }}
@@ -29,6 +30,7 @@
                 "class" $imageclass
                 "height" $height
                 "fetchpriority" "high"
+                "format" $format
                 "loading" "eager"
                 "maxheight" $maxheight
                 "maxwidth" $maxwidth

layouts/shortcodes/paige/image.html

@@ -1,4 +1,5 @@
 {{ $alt := .Get "alt" }}
+{{ $format := .Get "format" }}
 {{ $height := .Get "height" }}
 {{ $link := .Get "link" }}
 {{ $maxheight := .Get "maxheight" }}
@@ -16,6 +17,7 @@
 {{ $content := partial "paige/img.html" (dict
     "alt" $alt
     "class" "img-fluid"
+    "format" $format
     "height" $height
     "maxheight" $maxheight
     "maxwidth" $maxwidth