Separate gallery and figure shortcodes
This commit is contained in:
@@ -19,182 +19,182 @@ Resize the viewport as narrow and wide as you can to see the responsiveness.
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="1*.jpg" caption="1 image" /*/>}}
|
||||
{{</* paige/gallery images="1*.jpg" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="1*.jpg" caption="1 image" />}}
|
||||
{{< paige/gallery images="1*.jpg" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="2*.jpg" caption="2 images" /*/>}}
|
||||
{{</* paige/gallery images="2*.jpg" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="2*.jpg" caption="2 images" />}}
|
||||
{{< paige/gallery images="2*.jpg" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="3*.jpg" caption="3 images" /*/>}}
|
||||
{{</* paige/gallery images="3*.jpg" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="3*.jpg" caption="3 images" />}}
|
||||
{{< paige/gallery images="3*.jpg" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="4*.jpg" caption="4 images" /*/>}}
|
||||
{{</* paige/gallery images="4*.jpg" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="4*.jpg" caption="4 images" />}}
|
||||
{{< paige/gallery images="4*.jpg" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="5*.jpg" caption="5 images" /*/>}}
|
||||
{{</* paige/gallery images="5*.jpg" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="5*.jpg" caption="5 images" />}}
|
||||
{{< paige/gallery images="5*.jpg" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="6*.jpg" caption="6 images" /*/>}}
|
||||
{{</* paige/gallery images="6*.jpg" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="6*.jpg" caption="6 images" />}}
|
||||
{{< paige/gallery images="6*.jpg" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="*.jpg" caption="All images" /*/>}}
|
||||
{{</* paige/gallery images="*.jpg" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="*.jpg" caption="All images" />}}
|
||||
{{< paige/gallery images="*.jpg" />}}
|
||||
|
||||
## Grid layout
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="1*.jpg" caption="1 image" type="grid" /*/>}}
|
||||
{{</* paige/gallery images="1*.jpg" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="1*" caption="1 image" type="grid" />}}
|
||||
{{< paige/gallery images="1*" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="2*.jpg" caption="2 images" type="grid" /*/>}}
|
||||
{{</* paige/gallery images="2*.jpg" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="2*" caption="2 images" type="grid" />}}
|
||||
{{< paige/gallery images="2*" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="3*.jpg" caption="3 images" type="grid" /*/>}}
|
||||
{{</* paige/gallery images="3*.jpg" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="3*" caption="3 images" type="grid" />}}
|
||||
{{< paige/gallery images="3*" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="4*.jpg" caption="4 images" type="grid" /*/>}}
|
||||
{{</* paige/gallery images="4*.jpg" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="4*" caption="4 images" type="grid" />}}
|
||||
{{< paige/gallery images="4*" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="5*.jpg" caption="5 images" type="grid" /*/>}}
|
||||
{{</* paige/gallery images="5*.jpg" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="5*" caption="5 images" type="grid" />}}
|
||||
{{< paige/gallery images="5*" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="6*.jpg" caption="6 images" type="grid" /*/>}}
|
||||
{{</* paige/gallery images="6*.jpg" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="6*" caption="6 images" type="grid" />}}
|
||||
{{< paige/gallery images="6*" />}}
|
||||
|
||||
---
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery images="*.jpg" caption="All images" type="grid" /*/>}}
|
||||
{{</* paige/gallery images="*.jpg" /*/>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery images="*.jpg" caption="All images" type="grid" />}}
|
||||
{{< paige/gallery images="*.jpg" />}}
|
||||
|
||||
## Customization
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery caption="1 image" */>}}
|
||||
{{</* paige/gallery */>}}
|
||||
{{</* paige/image src="*-1*.jpg" /*/>}}
|
||||
{{</* /paige/gallery */>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery caption="1 image" >}}
|
||||
{{< paige/gallery >}}
|
||||
{{< paige/image src="*-1*.jpg" >}}
|
||||
{{< /paige/gallery >}}
|
||||
|
||||
@@ -203,7 +203,7 @@ Result:
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery caption="2 images" */>}}
|
||||
{{</* paige/gallery */>}}
|
||||
{{</* paige/image src="*-2*.jpg" /*/>}}
|
||||
{{</* paige/image src="*-3*.jpg" /*/>}}
|
||||
{{</* /paige/gallery */>}}
|
||||
@@ -211,7 +211,7 @@ Code:
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery caption="2 images" >}}
|
||||
{{< paige/gallery >}}
|
||||
{{< paige/image src="*-2*.jpg" >}}
|
||||
{{< paige/image src="*-3*.jpg" >}}
|
||||
{{< /paige/gallery >}}
|
||||
@@ -221,7 +221,7 @@ Result:
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery caption="3 images" */>}}
|
||||
{{</* paige/gallery */>}}
|
||||
{{</* paige/image src="*-4*.jpg" /*/>}}
|
||||
{{</* paige/image src="*-5*.jpg" /*/>}}
|
||||
{{</* paige/image src="*-6*.jpg" /*/>}}
|
||||
@@ -230,7 +230,7 @@ Code:
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery caption="3 images" >}}
|
||||
{{< paige/gallery >}}
|
||||
{{< paige/image src="*-4*.jpg" >}}
|
||||
{{< paige/image src="*-5*.jpg" >}}
|
||||
{{< paige/image src="*-6*.jpg" >}}
|
||||
@@ -241,7 +241,7 @@ Result:
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery caption="4 images" */>}}
|
||||
{{</* paige/gallery */>}}
|
||||
{{</* paige/image src="*-7*.jpg" /*/>}}
|
||||
{{</* paige/image src="*-8*.jpg" /*/>}}
|
||||
{{</* paige/image src="*-9*.jpg" /*/>}}
|
||||
@@ -251,7 +251,7 @@ Code:
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery caption="4 images" >}}
|
||||
{{< paige/gallery >}}
|
||||
{{< paige/image src="*-7*.jpg" >}}
|
||||
{{< paige/image src="*-8*.jpg" >}}
|
||||
{{< paige/image src="*-9*.jpg" >}}
|
||||
@@ -263,7 +263,7 @@ Result:
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery caption="5 images" */>}}
|
||||
{{</* paige/gallery */>}}
|
||||
{{</* paige/image src="*-11*.jpg" /*/>}}
|
||||
{{</* paige/image src="*-12*.jpg" /*/>}}
|
||||
{{</* paige/image src="*-13*.jpg" /*/>}}
|
||||
@@ -274,7 +274,7 @@ Code:
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery caption="5 images" >}}
|
||||
{{< paige/gallery >}}
|
||||
{{< paige/image src="*-11*.jpg" >}}
|
||||
{{< paige/image src="*-12*.jpg" >}}
|
||||
{{< paige/image src="*-13*.jpg" >}}
|
||||
@@ -287,7 +287,7 @@ Result:
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery caption="6 images" */>}}
|
||||
{{</* paige/gallery */>}}
|
||||
{{</* paige/image src="*-16*.jpg" /*/>}}
|
||||
{{</* paige/image src="*-17*.jpg" /*/>}}
|
||||
{{</* paige/image src="*-18*.jpg" /*/>}}
|
||||
@@ -299,7 +299,7 @@ Code:
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery caption="6 images" >}}
|
||||
{{< paige/gallery >}}
|
||||
{{< paige/image src="*-16*.jpg" >}}
|
||||
{{< paige/image src="*-17*.jpg" >}}
|
||||
{{< paige/image src="*-18*.jpg" >}}
|
||||
@@ -308,4 +308,42 @@ Result:
|
||||
{{< paige/image src="*-21*.jpg" >}}
|
||||
{{< /paige/gallery >}}
|
||||
|
||||
<div class="text-center">Photos by <a href="https://unsplash.com/@photos_by_lanty">Lanty</a>.</div>
|
||||
## Figure
|
||||
|
||||
Code:
|
||||
|
||||
```go-text-template
|
||||
{{</* paige/gallery */>}}
|
||||
{{</* paige/figure caption="Image 1" /*/>}}
|
||||
{{</* paige/image src="*-1*.jpg" /*/>}}
|
||||
{{</* /paige/figure */>}}
|
||||
{{</* paige/figure caption="Image 2" /*/>}}
|
||||
{{</* paige/image src="*-2*.jpg" /*/>}}
|
||||
{{</* /paige/figure */>}}
|
||||
{{</* paige/figure caption="Image 3" /*/>}}
|
||||
{{</* paige/image src="*-3*.jpg" /*/>}}
|
||||
{{</* /paige/figure */>}}
|
||||
{{</* paige/figure caption="Image 4" /*/>}}
|
||||
{{</* paige/image src="*-4*.jpg" /*/>}}
|
||||
{{</* /paige/figure */>}}
|
||||
{{</* /paige/gallery */>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< paige/gallery >}}
|
||||
{{< paige/figure caption="Image 1" >}}
|
||||
{{< paige/image src="*-1*.jpg" >}}
|
||||
{{< /paige/figure >}}
|
||||
{{< paige/figure caption="Image 2" >}}
|
||||
{{< paige/image src="*-2*.jpg" >}}
|
||||
{{< /paige/figure >}}
|
||||
{{< paige/figure caption="Image 3" >}}
|
||||
{{< paige/image src="*-3*.jpg" >}}
|
||||
{{< /paige/figure >}}
|
||||
{{< paige/figure caption="Image 4" >}}
|
||||
{{< paige/image src="*-4*.jpg" >}}
|
||||
{{< /paige/figure >}}
|
||||
{{< /paige/gallery >}}
|
||||
|
||||
<p class="text-center">Photos by <a href="https://unsplash.com/@photos_by_lanty">Lanty</a>.</p>
|
||||
|
@@ -1,7 +1,6 @@
|
||||
{{ $params := . }}
|
||||
|
||||
{{ $caption := $params.caption | markdownify }}
|
||||
{{ $compact := $params.compact }}
|
||||
{{ $content := $params.content | markdownify }}
|
||||
{{ $float := $params.float }}
|
||||
{{ $gap := $params.gap }}
|
||||
@@ -17,7 +16,7 @@
|
||||
{{ $table := false }}
|
||||
{{ $widths := slice }}
|
||||
|
||||
{{ if and $caption (or $compact $float) }}
|
||||
{{ if and $caption $float }}
|
||||
{{ $table = true }}
|
||||
{{ end }}
|
||||
|
||||
@@ -54,7 +53,7 @@
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<div class="align-items-{{ $vertical }} d-flex {{ with $float }} float-{{ . }} {{ end }} justify-content-{{ $horizontal }} {{ if $compact }} mb-0 {{ else }} mb-3 {{ end }} {{ with $sidemargin }} {{ . }} {{ end }} overflow-auto paige-figure {{ if $numbered }} paige-figure-numbered {{ end }}">
|
||||
<div class="align-items-{{ $vertical }} d-flex {{ with $float }} float-{{ . }} {{ end }} justify-content-{{ $horizontal }} {{ with $sidemargin }} {{ . }} {{ end }} overflow-auto paige-figure {{ if $numbered }} paige-figure-numbered {{ end }}">
|
||||
<figure class="{{ if $table }} d-table {{ end }} mb-0" {{ with $widths }} style="{{ . | safeCSS }}" {{ end }}>
|
||||
<div class="d-flex justify-content-{{ $horizontal }} text-{{ $horizontal }}">{{ $content }}</div>
|
||||
|
||||
|
@@ -39,6 +39,10 @@ body, html {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.paige-figure {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.paige-figure .highlight .chroma pre, .paige-figure .highlight pre.chroma {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -47,6 +51,14 @@ body, html {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.paige-gallery {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.paige-gallery .paige-figure {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.paige-gallery .paige-image {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
@@ -1,48 +1,33 @@
|
||||
{{ $align := .Get "align" | default "center" }}
|
||||
{{ $caption := .Get "caption" }}
|
||||
{{ $height := .Get "height" }}
|
||||
{{ $images := .Get 0 | default (.Get "images") }}
|
||||
{{ $justify := .Get "justify" | default "center" }}
|
||||
{{ $maxwidth := .Get "maxwidth" }}
|
||||
{{ $method := .Get "method" | default "resize" }}
|
||||
{{ $number := .Get "number" }}
|
||||
{{ $numbered := .Get "numbered" }}
|
||||
{{ $options := .Get "options" | default "550x webp picture Lanczos" }}
|
||||
{{ $type := .Get "type" | default "rows" }}
|
||||
{{ $width := .Get "width" }}
|
||||
|
||||
{{ $inner := chomp .Inner }}
|
||||
{{ $resources := slice }}
|
||||
{{ $showcaption := $caption }}
|
||||
|
||||
{{ with $images }}
|
||||
{{ with $.Page.Resources.Match . }}
|
||||
{{ $resources = . }}
|
||||
{{ if not $inner }}
|
||||
{{ with $images }}
|
||||
{{ with $.Page.Resources.Match . }}
|
||||
{{ $resources = . }}
|
||||
{{ else }}
|
||||
{{ $resources = resources.Match . }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{ $resources = resources.Match . }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{ with .Page.Resources.ByType "image" }}
|
||||
{{ $resources = . }}
|
||||
{{ else }}
|
||||
{{ $resources = resources.ByType "image" }}
|
||||
{{ with .Page.Resources.ByType "image" }}
|
||||
{{ $resources = . }}
|
||||
{{ else }}
|
||||
{{ $resources = resources.ByType "image" }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ if $caption }}
|
||||
{{ if $number }}
|
||||
{{ $caption = printf "%v %v: %v" (i18n "paige_figure") $number $caption }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{ if $number }}
|
||||
{{ $caption = printf "%v %v" (i18n "paige_figure") $number }}
|
||||
{{ $showcaption = true }}
|
||||
{{ else if $numbered }}
|
||||
{{ $showcaption = true }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<figure class="paige-gallery">
|
||||
<div class="paige-gallery">
|
||||
{{ if eq $type "grid" }}
|
||||
<div class="container-fluid 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">
|
||||
@@ -92,7 +77,4 @@
|
||||
{{ else }}
|
||||
{{ errorf "invalid type: %q" $type }}
|
||||
{{ end }}
|
||||
{{ if $showcaption }}
|
||||
<figcaption class="figure-caption mt-2 text-center">{{ $caption }}</figcaption>
|
||||
{{ end }}
|
||||
</figure>
|
||||
</div>
|
||||
|
Reference in New Issue
Block a user