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

44
exampleSite/content/blog/figure-shortcode.md
View File

@@ -40,6 +40,42 @@ Don't believe everything you read on the Internet.
Code:
```go-text-template
{{</* paige/figure caption="Abraham Lincoln" */>}}
Michael was having brunch with Sally Sitwell at a restaurant called Skip Church's Bistro. In addition to brunch, the restaurant was known for an item on the menu called the "Skip's Scramble", an omelet that contained everything on the menu. Do not order the Skip's Scramble. You might enjoy this. Oh. Em. Gee. That's amazing. It feels good to be back in a queen! I need a tea to give my dingle less tingle. Teamocil. Heyyyyyy Uncle Father Oscar.
{{</* /paige/figure */>}}
```
Result:
{{< paige/figure caption="Abraham Lincoln" >}}
Michael was having brunch with Sally Sitwell at a restaurant called Skip Church's Bistro. In addition to brunch, the restaurant was known for an item on the menu called the "Skip's Scramble", an omelet that contained everything on the menu. Do not order the Skip's Scramble. You might enjoy this. Oh. Em. Gee. That's amazing. It feels good to be back in a queen! I need a tea to give my dingle less tingle. Teamocil. Heyyyyyy Uncle Father Oscar.
{{< /paige/figure >}}
---
Code:
```go-text-template
{{</* paige/figure caption="Michael was having brunch with Sally Sitwell" float="end" */>}}
Michael was having brunch
{{</* /paige/figure */>}}
Michael was having brunch with Sally Sitwell at a restaurant called Skip Church's Bistro. In addition to brunch, the restaurant was known for an item on the menu called the "Skip's Scramble", an omelet that contained everything on the menu. Do not order the Skip's Scramble. You might enjoy this. Oh. Em. Gee. That's amazing. It feels good to be back in a queen! I need a tea to give my dingle less tingle. Teamocil. Heyyyyyy Uncle Father Oscar.
```
Result:
{{< paige/figure caption="Michael was having brunch with Sally Sitwell at a restaurant called Skip Church's Bistro." width="20%" height="15rem" float="end" >}}
Michael was having brunch with Sally Sitwell
{{< /paige/figure >}}
Michael was having brunch with Sally Sitwell at a restaurant called Skip Church's Bistro. In addition to brunch, the restaurant was known for an item on the menu called the "Skip's Scramble", an omelet that contained everything on the menu. Do not order the Skip's Scramble. You might enjoy this. Oh. Em. Gee. That's amazing. It feels good to be back in a queen! I need a tea to give my dingle less tingle. Teamocil. Heyyyyyy Uncle Father Oscar.
---
Code:
```go-text-template
{{</* paige/figure caption="Abraham Lincoln" float="start" */>}}
Don't believe everything you read on the Internet.
@@ -62,24 +98,24 @@ Code:
```go-text-template
{{</* paige/figure caption="Hickory Dickory Dock" */>}}
<pre style="font-family: inherit; font-size: 1rem">
<div style="white-space: pre">
Hickory dickory dock.
The mouse ran up the clock.
The clock struck one,
The mouse ran down,
Hickory dickory dock.
</pre>
</div>
{{</* /paige/figure */>}}
```
Result:
{{< paige/figure caption="Hickory Dickory Dock" >}}
<pre style="font-family: inherit; font-size: 1rem">
<div style="white-space: pre">
Hickory dickory dock.
The mouse ran up the clock.
The clock struck one,
The mouse ran down,
Hickory dickory dock.
</pre>
</div>
{{< /paige/figure >}}

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>