Add maxheight, maxwidth params

3 years ago · c3051e027f
parent 02a80777e9
commit c3051e027f
5 changed files with 87 additions and 3 deletions
--- a/README.md
+++ b/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
--- a/layouts/partials/paige/image-figure.html
+++ b/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
--- a/layouts/partials/paige/img.html
+++ b/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 }}>
--- a/layouts/shortcodes/paige/gallery.html
+++ b/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 }}
--- a/layouts/shortcodes/paige/image.html
+++ b/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