Add gallery type filled-rows

This commit is contained in:
Will Faught
2023-04-25 16:37:03 -07:00
parent 09cd12b96b
commit 99befdc6ca
4 changed files with 59 additions and 14 deletions

View File

@@ -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>

View File

@@ -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 }}