Add maxheight, maxwidth params

README.md

@@ -586,6 +586,8 @@ The `paige/image` shortcode provides a figure with a centered image.
     caption="My caption"
     height="10rem"
     link="https://github.com/willfaught/paige"
+    maxheight="10rem"
+    maxwidth="10rem"
     method="resize"
     options="550x webp picture Lanczos"
     src="me.jpg"
@@ -604,6 +606,10 @@ Parameters:
     <dd>Optional. Image height in pixels.</dd>
     <dt><code>link</code></dt>
     <dd>Optional. URL. Image link.</dd>
+    <dt><code>maxheight</code></dt>
+    <dd>Optional. Maximum image height.</dd>
+    <dt><code>maxwidth</code></dt>
+    <dd>Optional. Maximum image width.</dd>
     <dt><code>method</code></dt>
     <dd>Optional. Hugo image processing method. Must be <code>crop</code>, <code>fill</code>, <code>fit</code>, or <code>resize</code>. Must be specified with <code>options</code>. See <a href="https://gohugo.io/content-management/image-processing/#image-processing-methods">Image Processing Methods</a>.</dd>
     <dt><code>options</code></dt>
@@ -631,6 +637,8 @@ The `paige/gallery` shortcode provides a figure with a centered list of images.
     height="10rem"
     images="*.jpg"
     justify="center"
+    maxheight="10rem"
+    maxwidth="10rem"
     method="resize"
     options="550x webp picture Lanczos"
     type="list"
@@ -655,13 +663,17 @@ Parameters:
     <dt><code>caption</code></dt>
     <dd>Optional. Markdown. Descriptive text that appears centered below the images.</dd>
     <dt><code>height</code></dt>
-    <dd>Optional. Height of the image or images.</dd>
+    <dd>Optional. Height of the image or images in pixels.</dd>
     <dt><code>image</code></dt>
     <dd>Optional. Page, site, or remote image glob. Only used in the inner content of this shortcode.</dd>
     <dt><code>images</code></dt>
     <dd>Optional. Unnamed argument. Page, site, or remote images glob. Defaults to all image page resources.</dd>
     <dt><code>justify</code></dt>
     <dd>Optional. Flexbox main axis space distribution. Must be <code>start</code>, <code>center</code>, <code>end</code>, etc. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content"><code>justify-content</code></a>.</dd>
+    <dt><code>maxheight</code></dt>
+    <dd>Optional. Maximum height of the image or images.</dd>
+    <dt><code>maxwidth</code></dt>
+    <dd>Optional. Maximum width of the image or images.</dd>
     <dt><code>method</code></dt>
     <dd>Optional. Hugo image processing method. Must be <code>crop</code>, <code>fill</code>, <code>fit</code>, or <code>resize</code>. Default is <code>resize</code>. Must be specified with <code>options</code>. See <a href="https://gohugo.io/content-management/image-processing/#image-processing-methods">Image Processing Methods</a>.</dd>
     <dt><code>options</code></dt>
@@ -669,7 +681,7 @@ Parameters:
     <dt><code>type</code></dt>
     <dd>Optional. Type of layout. Must be <code>grid</code> or <code>list</code>. Default is <code>list</code>.</dd>
     <dt><code>width</code></dt>
-    <dd>Optional. Width of the image or images.</dd>
+    <dd>Optional. Width of the image or images in pixels.</dd>
 </dl>
 
 ## Customization

layouts/partials/paige/image-figure.html

@@ -2,6 +2,8 @@
 {{ $caption := .caption }}
 {{ $height := .height }}
 {{ $link := .link }}
+{{ $maxheight := .maxheight }}
+{{ $maxwidth := .maxwidth }}
 {{ $method := .method }}
 {{ $options := .options }}
 {{ $page := .page }}
@@ -20,6 +22,8 @@
     "alt" $alt
     "class" $class
     "height" $height
+    "maxheight" $maxheight
+    "maxwidth" $maxwidth
     "method" $method
     "options" $options
     "page" $page

layouts/partials/paige/img.html

@@ -51,4 +51,52 @@
     {{ $src = $resource.RelPermalink }}
 {{ end }}
 
+{{ if and (or $height $maxheight) (not (or $maxwidth $width)) }}
+    {{ $width = "auto" }}
+{{ end }}
+
+{{ if and (or $maxwidth $width) (not (or $height $maxheight)) }}
+    {{ $height = "auto" }}
+{{ end }}
+
+{{ if $height }}
+    {{ with printf "height: %v" $height }}
+        {{ if $style }}
+            {{ $style = printf "%v; %v" $style . }}
+        {{ else }}
+            {{ $style = . }}
+        {{ end }}
+    {{ end }}
+{{ end }}
+
+{{ if $maxheight }}
+    {{ with printf "max-height: %v" $maxheight }}
+        {{ if $style }}
+            {{ $style = printf "%v; %v" $style . }}
+        {{ else }}
+            {{ $style = . }}
+        {{ end }}
+    {{ end }}
+{{ end }}
+
+{{ if $maxwidth }}
+    {{ with printf "max-width: %v" $maxwidth }}
+        {{ if $style }}
+            {{ $style = printf "%v; %v" $style . }}
+        {{ else }}
+            {{ $style = . }}
+        {{ end }}
+    {{ end }}
+{{ end }}
+
+{{ if $width }}
+    {{ with printf "width: %v" $width }}
+        {{ if $style }}
+            {{ $style = printf "%v; %v" $style . }}
+        {{ else }}
+            {{ $style = . }}
+        {{ end }}
+    {{ end }}
+{{ end }}
+
 <img {{ with $alt }} alt="{{ . }}" {{ end }} {{ with $class }} class="{{ . }}" {{ end }} crossorigin="{{ $crossorigin }}" {{ with $fetchpriority }} fetchpriority="{{ . }}" {{ end }} {{ with $intrinsicheight }} height="{{ . }}" {{ end }} loading="{{ $loading }}" referrerpolicy="{{ $referrerpolicy }}" src="{{ $src }}" {{ with $style }} style="{{ . | safeCSS }}" {{ end }} {{ with $title }} title="{{ . }}" {{ end }} {{ with $intrinsicwidth }} width="{{ . }}" {{ end }}>

layouts/shortcodes/paige/gallery.html

@@ -4,6 +4,8 @@
 {{ $image := .Get "image" }}
 {{ $images := .Get 0 | default (.Get "images") }}
 {{ $justify := .Get "justify" | default "center" }}
+{{ $maxheight := .Get "maxheight" }}
+{{ $maxwidth := .Get "maxwidth" }}
 {{ $method := .Get "method" | default "resize" }}
 {{ $options := .Get "options" | default "550x webp picture Lanczos" }}
 {{ $type := .Get "type" | default "rows" }}
@@ -17,13 +19,17 @@
 
     {{ partial "paige/image-figure.html" (dict
         "caption" $caption
+        "height" $height
         "link" $resource.RelPermalink
+        "maxheight" $maxheight
+        "maxwidth" $maxwidth
         "method" $method
         "options" $options
         "page" .Page
         "resource" $resource
         "src" $image
         "table" true
+        "width" $width
     ) }}
 {{ else }}
     {{ $inner := chomp .Inner }}
@@ -52,29 +58,39 @@
                     {{ else }}
                         {{ range $resources }}
                             {{ partial "paige/image-figure.html" (dict
+                                "height" $height
                                 "link" .RelPermalink
+                                "maxheight" $maxheight
+                                "maxwidth" $maxwidth
                                 "method" $method
                                 "options" $options
                                 "resource" .
                                 "table" true
+                                "width" $width
                             ) }}
                         {{ end }}
                     {{ end }}
                 </div>
             </div>
         {{ else if eq $type "rows" }}
+            {{ if not (or $height $maxheight) }}
+                {{ $maxheight = $maxheight | default "10rem" }}
+            {{ end }}
             <div class="align-items-{{ $align }} column-gap-3 d-flex{{ with $caption }} figure-img{{ end }} flex-wrap justify-content-{{ $justify }} row-gap-3">
                 {{ with $inner }}
                     {{ . }}
                 {{ else }}
                     {{ range $resources }}
                         {{ partial "paige/image-figure.html" (dict
-                            "height" "10rem"
+                            "height" $height
                             "link" .RelPermalink
+                            "maxheight" $maxheight
+                            "maxwidth" $maxwidth
                             "method" $method
                             "options" $options
                             "resource" .
                             "table" true
+                            "width" $width
                         ) }}
                     {{ end }}
                 {{ end }}

layouts/shortcodes/paige/image.html

@@ -2,6 +2,8 @@
 {{ $caption := .Get "caption" }}
 {{ $height := .Get "height" }}
 {{ $link := .Get "link" }}
+{{ $maxheight := .Get "maxheight" }}
+{{ $maxwidth := .Get "maxwidth" }}
 {{ $method := .Get "method" }}
 {{ $options := .Get "options" }}
 {{ $src := .Get 0 | default (.Get "src") }}
@@ -13,6 +15,8 @@
     "caption" $caption
     "height" $height
     "link" $link
+    "maxheight" $maxheight
+    "maxwidth" $maxwidth
     "method" $method
     "options" $options
     "src" $src