Rockingcool/paige-hugo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Consolidate figure designs

Browse Source
This commit is contained in:
Will Faught
2023-01-14 21:10:46 -08:00
parent c8e955bd36
commit c578d235d2
5 changed files with 129 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
layouts/partials/paige/figure.html
View File

@@ -48,26 +48,28 @@
{{ end }}
{{ end }}
{{ $margins := "" }}
{{ $margin := "" }}
{{ if $float }}
{{ if eq $float "start" }}
{{ $margins = "me-4" }}
{{ $margin = "me-4" }}
{{ else if eq $float "end" }}
{{ $margins = "ms-4" }}
{{ $margin = "ms-4" }}
{{ else }}
{{ errorf "invalid float: %q" $float }}
{{ end }}
{{ end }}
<figure class="align-items-center d-flex flex-column {{ with $float }} float-{{ . }} {{ end }} {{ with $margins }} {{ . }} {{ end }} paige-figure">
{{ with $style }}
<div class="align-items-center d-flex flex-column justify-content-center" style="{{ . | safeCSS }}">
{{ end }}
<div class="{{ if $caption }} mb-2 {{ end }} mw-100">{{ $content }}</div>
{{ with $caption }}
<figcaption class="figure-caption">{{ . }}</figcaption>
{{ end }}
{{ if $style }}
</div>
{{ end }}
<figure class="{{ with $float }} float-{{ . }} {{ $margin }} {{ end }} align-items-center d-flex flex-column justify-content-center paige-figure" {{ if $float }} {{ with $style }} style="{{ . | safeCSS }}" {{ end }} {{ end }}>
<div class="align-items-center d-flex flex-column justify-content-center {{ if and $float $height }} h-100 {{ end }}" {{ if not $float }} {{ with $style }} style="{{ . | safeCSS }}" {{ end }} {{ end }}>
{{ if $float }}
<div class="d-table">
{{ end }}
<div {{ if $caption }} class="mb-2" {{ end }}>{{ $content }}</div>
{{ with $caption }}
<figcaption class="figure-caption text-center" {{ if $float }} style="caption-side: bottom; display: table-caption" {{ end }}>{{ . }}</figcaption>
{{ end }}
{{ if $float }}
</div>
{{ end }}
</div>
</figure>

55
layouts/partials/paige/image-figure.html
View File

@@ -7,6 +7,7 @@
{{ $maxwidth := .maxwidth }}
{{ $method := .method }}
{{ $options := .options }}
{{ $packed := .packed }}
{{ $page := .page }}
{{ $resource := .resource }}
{{ $src := .src }}
@@ -14,14 +15,9 @@
{{ $title := .title }}
{{ $width := .width }}
{{ $class := "img-fluid" }}
{{ if $caption }}
{{ $class = "figure-img img-fluid" }}
{{ end }}
{{ $content := partial "paige/img.html" (dict
"alt" $alt
"class" $class
"class" "img-fluid"
"method" $method
"options" $options
"page" $page
@@ -79,15 +75,8 @@
{{ end }}
{{ end }}
{{ if $table }}
<figure class="d-table mb-0 paige-figure text-center">
{{ $content }}
{{ with $caption }}
<figcaption class="figure-caption" style="caption-side: bottom; display: table-caption">{{ . }}</figcaption>
{{ end }}
</figure>
{{ else if $float }}
{{ $margin := "" }}
{{ $margin := "" }}
{{ if $float }}
{{ if eq $float "start" }}
{{ $margin = "me-4" }}
{{ else if eq $float "end" }}
@@ -95,25 +84,19 @@
{{ else }}
{{ errorf "invalid float: %q" $float }}
{{ end }}
<figure class="d-table float-{{ $float }} {{ $margin }} paige-figure text-center" {{ with $style }} style="{{ . | safeCSS }}" {{ end }}>
{{ $content }}
{{ with $caption }}
<figcaption class="figure-caption" style="caption-side: bottom; display: table-caption">{{ . }}</figcaption>
{{ end }}
</figure>
{{ else }}
<figure class="paige-figure text-center">
{{ with $style }}
<div class="align-items-center d-flex flex-column">
<div style="{{ . }}">
{{ end }}
{{ $content }}
{{ with $caption }}
<figcaption class="figure-caption">{{ . }}</figcaption>
{{ end }}
{{ if $style }}
</div>
</div>
{{ end }}
</figure>
{{ end }}
<figure class="{{ if $float }} float-{{ $float }} {{ $margin }} {{ else if $packed }} mb-0 {{ end }} align-items-center d-flex flex-column justify-content-center paige-figure" {{ if $float }} {{ with $style }} style="{{ . | safeCSS }}" {{ end }} {{ end }}>
<div class="align-items-center d-flex flex-column justify-content-center {{ if and $float $height }} h-100 {{ end }}" {{ if not $float }} {{ with $style }} style="{{ . | safeCSS }}" {{ end }} {{ end }}>
{{ if or $float $table }}
<div class="d-table">
{{ end }}
<div {{ if $caption }} class="mb-2" {{ end }}>{{ $content }}</div>
{{ with $caption }}
<figcaption class="figure-caption text-center" {{ if or $float $table }} style="caption-side: bottom; display: table-caption" {{ end }}>{{ . }}</figcaption>
{{ end }}
{{ if or $float $table }}
</div>
{{ end }}
</div>
</figure>

56
layouts/shortcodes/paige/gallery.html
View File

@@ -25,6 +25,7 @@
"maxwidth" $maxwidth
"method" $method
"options" $options
"packed" true
"page" .Page
"resource" $resource
"src" $image
@@ -51,48 +52,49 @@
<figure>
{{ if eq $type "grid" }}
<div class="container-fluid {{ if $caption }} figure-img {{ end }} px-0">
<div class="container-fluid {{ if $caption }} mb-2 {{ end }} 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 }}
{{ . }}
{{ else }}
{{ range $resources }}
{{ partial "paige/image-figure.html" (dict
"height" $height
"link" .RelPermalink
"maxheight" $maxheight
"maxwidth" $maxwidth
"method" $method
"options" $options
"page" $.Page
"resource" .
"table" true
"width" $width
<div class="col">
{{ partial "paige/a.html" (dict
"content" (partial "paige/img.html" (dict
"class" "img-fluid"
"height" $height
"maxheight" $maxheight
"maxwidth" $maxwidth
"method" $method
"options" $options
"resource" .
"width" $width
))
"href" .RelPermalink
) }}
</div>
{{ 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">
<div class="align-items-{{ $align }} column-gap-3 d-flex flex-wrap justify-content-{{ $justify }} {{ if $caption }} mb-2 {{ end }} row-gap-3">
{{ with $inner }}
{{ . }}
{{ else }}
{{ range $resources }}
{{ partial "paige/image-figure.html" (dict
"height" $height
"link" .RelPermalink
"maxheight" $maxheight
"maxwidth" $maxwidth
"method" $method
"options" $options
"page" $.Page
"resource" .
"table" true
"width" $width
{{ partial "paige/a.html" (dict
"content" (partial "paige/img.html" (dict
"class" "img-fluid"
"height" $height
"maxheight" $maxheight
"maxwidth" $maxwidth
"method" $method
"options" $options
"resource" .
"width" $width
))
"href" .RelPermalink
) }}
{{ end }}
{{ end }}

42
layouts/shortcodes/paige/quote.html
View File

@@ -51,29 +51,37 @@
{{ end }}
{{ end }}
{{ $margins := "" }}
{{ $margin := "" }}
{{ if $float }}
{{ if eq $float "start" }}
{{ $margins = "me-4" }}
{{ $margin = "me-4" }}
{{ else if eq $float "end" }}
{{ $margins = "ms-4" }}
{{ $margin = "ms-4" }}
{{ else }}
{{ errorf "invalid float: %q" $float }}
{{ end }}
{{ end }}
<figure class="align-items-center d-flex flex-column {{ with $float }} float-{{ . }} {{ end }} {{ with $margins }} {{ . }} {{ end }} paige-figure">
{{ with $style }}
<div class="align-items-center d-flex flex-column justify-content-center" style="{{ . | safeCSS }}">
{{ end }}
<blockquote class="blockquote {{ if $caption }} mb-2 {{ else if not $cite }} mb-0 {{ end }} text-{{ $align }}">{{ $content }}</blockquote>
{{ with $caption }}
<figcaption class="figure-caption">{{ . }}</figcaption>
{{ end }}
{{ with $cite }}
<figcaption class="blockquote-footer figure-caption mb-0 text-{{ $align }}">{{ . }}</figcaption>
{{ end }}
{{ if $style }}
</div>
{{ end }}
<figure class="{{ with $float }} float-{{ . }} {{ $margin }} {{ end }} align-items-center d-flex flex-column justify-content-center paige-figure" {{ if $float }} {{ with $style }} style="{{ . | safeCSS }}" {{ end }} {{ end }}>
<div class="align-items-center d-flex flex-column justify-content-center {{ if and $float $height }} h-100 {{ end }}" {{ if not $float }} {{ with $style }} style="{{ . | safeCSS }}" {{ end }} {{ end }}>
{{ if $float }}
<div class="d-table">
{{ end }}
{{ if $caption }}
<div class="mb-2">
{{ end }}
<blockquote class="blockquote {{ if not $cite }} mb-0 {{ end }} text-{{ $align }}">{{ $content }}</blockquote>
{{ if $caption }}
</div>
{{ end }}
{{ with $caption }}
<figcaption class="figure-caption text-center" {{ if $float }} style="caption-side: bottom; display: table-caption" {{ end }}>{{ . }}</figcaption>
{{ end }}
{{ with $cite }}
<figcaption class="blockquote-footer figure-caption mb-0 text-{{ $align }}">{{ . }}</figcaption>
{{ end }}
{{ if $float }}
</div>
{{ end }}
</div>
</figure>