Add maxheight, maxwidth params

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