Add gallery type filled-rows

README.md

@@ -482,7 +482,7 @@ Parameters:
     <dt><code>process</code></dt>
     <dd>Optional. String. 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, for the displayed image. If no method is specified, resize is used. If no image dimensions are specified, the originals are used. If it is <code>default</code>, the <a href="https://gohugo.io/content-management/image-processing/#processing-options">default options</a> are used.</dd>
     <dt><code>type</code></dt>
-    <dd>Optional. String. Type of layout. Must be <code>grid</code> or <code>rows</code> (default).</dd>
+    <dd>Optional. String. Type of layout. Must be <code>filled-rows</code>, <code>grid</code>, or <code>rows</code> (default).</dd>
     <dt><code>width</code></dt>
     <dd>Optional. String. CSS value. Image width.</dd>
 </dl>

exampleSite/content/shortcodes/gallery/index.md

@@ -309,6 +309,18 @@ Result:
 
 Code:
 
+```go-text-template
+{{</* paige/gallery images="*.jpg" maxheight="10rem" type="filled-rows" /*/>}}
+```
+
+Result:
+
+{{< paige/gallery images="*.jpg" maxheight="10rem" type="filled-rows" />}}
+
+---
+
+Code:
+
 ```go-text-template
 {{</* paige/gallery images="*.jpg" type="grid" /*/>}}
 ```

layouts/partials/paige/image.html

@@ -16,21 +16,13 @@
 {{ $sizes := $params.sizes }}
 {{ $src := $params.src }}
 {{ $srcset := $params.srcset }}
+{{ $style := $params.style }}
 {{ $title := $params.title }}
 {{ $width := $params.width }}
 
 {{ $intrinsicheight := "" }}
 {{ $intrinsicwidth := "" }}
 
-{{ if $class }}
-    {{ $class = split $class " " }}
-{{ else }}
-    {{ $class = slice }}
-{{ end }}
-
-{{ $class = $class | append "img-fluid" | uniq | sort }}
-{{ $class = delimit $class " " }}
-
 {{ if and (or $height $maxheight) (not (or $maxwidth $width)) }}
     {{ $width = "auto" }}
 {{ end }}
@@ -39,7 +31,23 @@
     {{ $height = "auto" }}
 {{ end }}
 
-{{ $style := slice }}
+{{ if $style }}
+    {{ $mapped := slice }}
+
+    {{ range split $style ";" }}
+        {{ $s := . | strings.TrimLeft " " | strings.TrimRight " " }}
+
+        {{ if not $s }}
+            {{ continue }}
+        {{ end }}
+
+        {{ $mapped = $mapped | append $s }}
+    {{ end }}
+
+    {{ $style = $mapped }}
+{{ else }}
+    {{ $style = slice }}
+{{ end }}
 
 {{ if $height }}
     {{ $style = $style | append (print "height: " $height) }}
@@ -57,7 +65,7 @@
     {{ $style = $style | append (print "width: " $width) }}
 {{ end }}
 
-{{ $style = delimit $style "; " }}
+{{ $style = delimit ($style | uniq | sort) "; " }}
 
 {{ if and (not $resource) $src }}
     {{ $resource = partial "paige/resource.html" $src }}
@@ -277,4 +285,4 @@
     {{ $content = partial "paige/a.html" (dict "content" $content "href" $link) }}
 {{ end }}
 
-<div class="paige-image">{{ $content }}</div>
+<span class="paige-image">{{ $content }}</span>

layouts/shortcodes/paige/gallery.html

@@ -37,7 +37,30 @@
 {{ end }}
 
 <div class="paige-gallery">
-    {{ if eq $type "grid" }}
+    {{ if eq $type "filled-rows" }}
+        <div class="align-items-{{ $align }} column-gap-3 d-flex flex-wrap justify-content-{{ $justify }} row-gap-3">
+            {{ with $inner }}
+                {{ . }}
+            {{ else }}
+                {{ range $resources }}
+                    {{ partial "paige/image.html" (dict
+                        "breakpoints" $breakpoints
+                        "densities" $densities
+                        "fetchpriority" $fetchpriority
+                        "height" $height
+                        "linked" $linked
+                        "loading" $loading
+                        "maxheight" $maxheight
+                        "maxwidth" $maxwidth
+                        "process" $process
+                        "resource" .
+                        "style" "flex: 1 1 auto; object-fit: cover"
+                        "width" $width
+                    ) }}
+                {{ end }}
+            {{ end }}
+        </div>
+    {{ else if eq $type "grid" }}
         <div class="container-fluid overflow-hidden px-0">
             <div class="align-items-{{ $align }} gx-3 gy-3 justify-content-{{ $justify }} row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 row-cols-xxl-6">
                 {{ with $inner }}
@@ -56,6 +79,7 @@
                                 "maxwidth" $maxwidth
                                 "process" $process
                                 "resource" .
+                                "style" "height: auto; max-width: 100%"
                                 "width" $width
                             ) }}
                         </div>
@@ -80,6 +104,7 @@
                         "maxwidth" $maxwidth
                         "process" $process
                         "resource" .
+                        "style" "height: auto; max-width: 100%"
                         "width" $width
                     ) }}
                 {{ end }}