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

Overhaul figures

Browse Source
master
Will Faught 3 years ago
parent fd81ccccd5
commit cf823d7d63
13 changed files with 622 additions and 146 deletions
Show Stats Download Patch File Download Diff File

318
exampleSite/content/blog/gallery-shortcodes/index.md
Unescape Escape View File

@ -1,70 +1,304 @@
---
title: "Gallery Shortcodes"
date: "2023-01-01"
description: "Demonstration of the `paige/gallery` and `paige/gallery/item` shortcodes."
description: Demonstration of the gallery shortcode.
title: Gallery Shortcode
---
## `paige/gallery` shortcode
See the images in the example site to understand how the below file patterns work.
Resize the viewport as narrow and wide as you can to see the responsiveness.
### Grid display
## Rows layout
{{< paige/gallery images="1*" caption="1 image" />}}
{{< paige/gallery images="2*" caption="2 images" />}}
{{< paige/gallery images="3*" caption="3 images" />}}
{{< paige/gallery images="4*" caption="4 images" />}}
{{< paige/gallery images="5*" caption="5 images" />}}
{{< paige/gallery images="6*" caption="6 images" />}}
{{< paige/gallery caption="All images" />}}
Code:
### List display
```go-text-template
{{</* paige/gallery images="1*.jpg" caption="1 image" /*/>}}
```
{{< paige/gallery images="1*" caption="1 image" display="list" />}}
{{< paige/gallery images="2*" caption="2 images" display="list" />}}
{{< paige/gallery images="3*" caption="3 images" display="list" />}}
{{< paige/gallery images="4*" caption="4 images" display="list" />}}
{{< paige/gallery images="5*" caption="5 images" display="list" />}}
{{< paige/gallery images="6*" caption="6 images" display="list" />}}
{{< paige/gallery caption="All images" display="list" />}}
Result:
## `paige/gallery/item` shortcode
{{< paige/gallery images="1*.jpg" caption="1 image" type="grid" />}}
---
Code:
```go-text-template
{{</* paige/gallery images="2*.jpg" caption="2 images" /*/>}}
```
Result:
{{< paige/gallery images="2*.jpg" caption="2 images" type="grid" />}}
---
Code:
```go-text-template
{{</* paige/gallery images="3*.jpg" caption="3 images" /*/>}}
```
Result:
{{< paige/gallery images="3*.jpg" caption="3 images" type="grid" />}}
---
Code:
```go-text-template
{{</* paige/gallery images="4*.jpg" caption="4 images" /*/>}}
```
Result:
{{< paige/gallery images="4*.jpg" caption="4 images" type="grid" />}}
---
Code:
```go-text-template
{{</* paige/gallery images="5*.jpg" caption="5 images" /*/>}}
```
Result:
{{< paige/gallery images="5*.jpg" caption="5 images" type="grid" />}}
---
Code:
```go-text-template
{{</* paige/gallery images="6*.jpg" caption="6 images" /*/>}}
```
Result:
{{< paige/gallery images="6*.jpg" caption="6 images" type="grid" />}}
---
Code:
```go-text-template
{{</* paige/gallery images="*.jpg" caption="All images" /*/>}}
```
Result:
{{< paige/gallery images="*.jpg" caption="All images" type="grid" />}}
## Grid layout
Code:
```go-text-template
{{</* paige/gallery images="1*.jpg" caption="1 image" type="grid" /*/>}}
```
Result:
{{< paige/gallery images="1*" caption="1 image" type="grid" />}}
---
Code:
```go-text-template
{{</* paige/gallery images="2*.jpg" caption="2 images" type="grid" /*/>}}
```
Result:
{{< paige/gallery images="2*" caption="2 images" type="grid" />}}
---
Code:
```go-text-template
{{</* paige/gallery images="3*.jpg" caption="3 images" type="grid" /*/>}}
```
Result:
{{< paige/gallery images="3*" caption="3 images" type="grid" />}}
---
Code:
```go-text-template
{{</* paige/gallery images="4*.jpg" caption="4 images" type="grid" /*/>}}
```
Result:
{{< paige/gallery images="4*" caption="4 images" type="grid" />}}
---
Code:
```go-text-template
{{</* paige/gallery images="5*.jpg" caption="5 images" type="grid" /*/>}}
```
Result:
{{< paige/gallery images="5*" caption="5 images" type="grid" />}}
---
Code:
```go-text-template
{{</* paige/gallery images="6*.jpg" caption="6 images" type="grid" /*/>}}
```
Result:
{{< paige/gallery images="6*" caption="6 images" type="grid" />}}
---
Code:
```go-text-template
{{</* paige/gallery images="*.jpg" caption="All images" type="grid" /*/>}}
```
Result:
{{< paige/gallery images="*.jpg" caption="All images" type="grid" />}}
## Customization
Code:
```go-text-template
{{</* paige/gallery caption="1 image" */>}}
{{</* paige/gallery image="*-1*.jpg" caption="Image 1" /*/>}}
{{</* /paige/gallery */>}}
```
Result:
{{< paige/gallery caption="1 image" >}}
{{< paige/gallery/item image="*-1*" caption="Image 1" >}}
{{< paige/gallery image="*-1*.jpg" caption="Image 1" />}}
{{< /paige/gallery >}}
---
Code:
```go-text-template
{{</* paige/gallery caption="2 images" */>}}
{{</* paige/gallery image="*-2*.jpg" caption="Image 1" /*/>}}
{{</* paige/gallery image="*-3*.jpg" caption="Image 2" /*/>}}
{{</* /paige/gallery */>}}
```
Result:
{{< paige/gallery caption="2 images" >}}
{{< paige/gallery/item image="*-2*" caption="Image 1" >}}
{{< paige/gallery/item image="*-3*" caption="Image 2" >}}
{{< paige/gallery image="*-2*.jpg" caption="Image 1" />}}
{{< paige/gallery image="*-3*.jpg" caption="Image 2" />}}
{{< /paige/gallery >}}
---
Code:
```go-text-template
{{</* paige/gallery caption="3 images" */>}}
{{</* paige/gallery image="*-4*.jpg" caption="Image 1" /*/>}}
{{</* paige/gallery image="*-5*.jpg" caption="Image 2" /*/>}}
{{</* paige/gallery image="*-6*.jpg" caption="Image 3" /*/>}}
{{</* /paige/gallery */>}}
```
Result:
{{< paige/gallery caption="3 images" >}}
{{< paige/gallery/item image="*-4*" caption="Image 1" >}}
{{< paige/gallery/item image="*-5*" caption="Image 2" >}}
{{< paige/gallery/item image="*-6*" caption="Image 3" >}}
{{< paige/gallery image="*-4*.jpg" caption="Image 1" />}}
{{< paige/gallery image="*-5*.jpg" caption="Image 2" />}}
{{< paige/gallery image="*-6*.jpg" caption="Image 3" />}}
{{< /paige/gallery >}}
---
Code:
```go-text-template
{{</* paige/gallery caption="4 images" */>}}
{{</* paige/gallery image="*-7*.jpg" caption="Image 1" /*/>}}
{{</* paige/gallery image="*-8*.jpg" caption="Image 2" /*/>}}
{{</* paige/gallery image="*-9*.jpg" caption="Image 3" /*/>}}
{{</* paige/gallery image="*-10.jpg*" caption="Image 4" /*/>}}
{{</* /paige/gallery */>}}
```
Result:
{{< paige/gallery caption="4 images" >}}
{{< paige/gallery/item image="*-7*" caption="Image 1" >}}
{{< paige/gallery/item image="*-8*" caption="Image 2" >}}
{{< paige/gallery/item image="*-9*" caption="Image 3" >}}
{{< paige/gallery/item image="*-10*" caption="Image 4" >}}
{{< paige/gallery image="*-7*.jpg" caption="Image 1" />}}
{{< paige/gallery image="*-8*.jpg" caption="Image 2" />}}
{{< paige/gallery image="*-9*.jpg" caption="Image 3" />}}
{{< paige/gallery image="*-10.jpg*" caption="Image 4" />}}
{{< /paige/gallery >}}
---
Code:
```go-text-template
{{</* paige/gallery caption="5 images" */>}}
{{</* paige/gallery image="*-11*.jpg" caption="Image 1" /*/>}}
{{</* paige/gallery image="*-12*.jpg" caption="Image 2" /*/>}}
{{</* paige/gallery image="*-13*.jpg" caption="Image 3" /*/>}}
{{</* paige/gallery image="*-14*.jpg" caption="Image 4" /*/>}}
{{</* paige/gallery image="*-15*.jpg" caption="Image 5" /*/>}}
{{</* /paige/gallery */>}}
```
Result:
{{< paige/gallery caption="5 images" >}}
{{< paige/gallery/item image="*-11*" caption="Image 1" >}}
{{< paige/gallery/item image="*-12*" caption="Image 2" >}}
{{< paige/gallery/item image="*-13*" caption="Image 3" >}}
{{< paige/gallery/item image="*-14*" caption="Image 4" >}}
{{< paige/gallery/item image="*-15*" caption="Image 5" >}}
{{< paige/gallery image="*-11*.jpg" caption="Image 1" />}}
{{< paige/gallery image="*-12*.jpg" caption="Image 2" />}}
{{< paige/gallery image="*-13*.jpg" caption="Image 3" />}}
{{< paige/gallery image="*-14*.jpg" caption="Image 4" />}}
{{< paige/gallery image="*-15*.jpg" caption="Image 5" />}}
{{< /paige/gallery >}}
---
Code:
```go-text-template
{{</* paige/gallery caption="6 images" */>}}
{{</* paige/gallery image="*-16*.jpg" caption="Image 1" /*/>}}
{{</* paige/gallery image="*-17*.jpg" caption="Image 2" /*/>}}
{{</* paige/gallery image="*-18*.jpg" caption="Image 3" /*/>}}
{{</* paige/gallery image="*-19*.jpg" caption="Image 4" /*/>}}
{{</* paige/gallery image="*-20*.jpg" caption="Image 5" /*/>}}
{{</* paige/gallery image="*-21*.jpg" caption="Image 6" /*/>}}
{{</* /paige/gallery */>}}
```
Result:
{{< paige/gallery caption="6 images" >}}
{{< paige/gallery/item image="*-16*" caption="Image 1" >}}
{{< paige/gallery/item image="*-17*" caption="Image 2" >}}
{{< paige/gallery/item image="*-18*" caption="Image 3" >}}
{{< paige/gallery/item image="*-19*" caption="Image 4" >}}
{{< paige/gallery/item image="*-20*" caption="Image 5" >}}
{{< paige/gallery/item image="*-21*" caption="Image 6" >}}
{{< paige/gallery image="*-16*.jpg" caption="Image 1" />}}
{{< paige/gallery image="*-17*.jpg" caption="Image 2" />}}
{{< paige/gallery image="*-18*.jpg" caption="Image 3" />}}
{{< paige/gallery image="*-19*.jpg" caption="Image 4" />}}
{{< paige/gallery image="*-20*.jpg" caption="Image 5" />}}
{{< paige/gallery image="*-21*.jpg" caption="Image 6" />}}
{{< /paige/gallery >}}
Photos by [Lanty](https://unsplash.com/@photos_by_lanty).
<div class="text-center">Photos by <a href="https://unsplash.com/@photos_by_lanty">Lanty</a>.</div>

6
layouts/partials/paige/a.html
Unescape Escape View File

@ -0,0 +1,6 @@
{{ $class := .class }}
{{ $content := .content }}
{{ $href := .href }}
{{ $style := .style }}
<a {{ with $class }} {{ . }} {{ end }} {{ with $href }} href="{{ . }}" {{ end }} {{ with $style }} {{ . | safeCSS }} {{ end }}>{{ $content }}</a>

15
layouts/partials/paige/figure.html
Unescape Escape View File

@ -0,0 +1,15 @@
{{ $caption := .caption | markdownify }}
{{ $captionclass := .captionclass | default "figure-caption" }}
{{ $captionstyle := .captionstyle }}
{{ $class := .class | default "align-items-center d-flex flex-column justify-content-center paige-figure" }}
{{ $content := .content | markdownify }}
{{ $contentclass := .contentclass }}
{{ $contentstyle := .contentstyle }}
{{ $style := .style | default .Page.Params.paige.figure.style | default .Page.Site.Params.paige.figure.style }}
<figure {{ with $class }} class="{{ . }}" {{ end }} {{ with $style }} style="{{ . | safeCSS }}" {{ end }}>
<div {{ with $contentclass }} class="{{ . }}" {{ end }} {{ with $contentstyle }} style="{{ . | safeCSS }}" {{ end }}>{{ $content }}</div>
{{ with $caption }}
<figcaption {{ with $captionclass }} class="{{ . }}" {{ end }} {{ with $captionstyle }} style="{{ . | safeCSS }}" {{ end }}>{{ . }}</figcaption>
{{ end }}
</figure>

27
layouts/partials/paige/func-resource.html
Unescape Escape View File

@ -0,0 +1,27 @@
{{ $page := .page }}
{{ $url := .url }}
{{ $resource := "" }}
{{ with $page.Resources.GetMatch $url }}
{{ $resource = . }}
{{ else }}
{{ with $page.Resources.Get (relLangURL $url) }}
{{ $resource = . }}
{{ else }}
{{ with resources.GetMatch $url }}
{{ $resource = . }}
{{ else }}
{{ with resources.Get (relLangURL $url) }}
{{ $resource = . }}
{{ else }}
{{ with resources.GetRemote $url }}
{{ $resource = . }}
{{ end }}
{{ end }}
{{ end }}
{{ end }}
{{ end }}
{{ if not $resource }}
{{ errorf "invalid resource: %q" $url }}
{{ end }}
{{ return $resource }}

26
layouts/partials/paige/gallery-item.html
Unescape Escape View File

@ -1,26 +0,0 @@
{{ $image := .image }}
{{ $caption := .caption }}
{{ $method := .method }}
{{ $options := .options }}
{{ $thumbnail := $image }}
{{ with $image }}
{{ if eq $method "crop" }}
{{ $thumbnail = .Crop $options }}
{{ else if eq $method "fill" }}
{{ $thumbnail = .Fill $options }}
{{ else if eq $method "fit" }}
{{ $thumbnail = .Fit $options }}
{{ else if eq $method "resize" }}
{{ $thumbnail = .Resize $options }}
{{ end }}
{{ end }}
<figure class="d-table mb-0">
<a href="{{ $image.RelPermalink }}">
<img class="{{ if $caption }}figure-img {{ end }}img-fluid" loading="lazy" src="{{ $thumbnail.RelPermalink }}">
</a>
{{ with $caption }}
<figcaption class="figure-caption text-center" style="display: table-caption; caption-side: bottom">{{ . }}</figcaption>
{{ end }}
</figure>

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

@ -0,0 +1,55 @@
{{ $alt := .alt }}
{{ $caption := .caption }}
{{ $captionclass := .captionclass }}
{{ $captionstyle := .captionstyle }}
{{ $class := .class }}
{{ $contentclass := .contentclass }}
{{ $contentstyle := .contentstyle }}
{{ $height := .height }}
{{ $imageclass := .imageclass | default "img-fluid" }}
{{ $imagestyle := .imagestyle }}
{{ $link := .link }}
{{ $method := .method }}
{{ $options := .options }}
{{ $page := .page }}
{{ $resource := .resource }}
{{ $src := .src }}
{{ $style := .style }}
{{ $title := .title }}
{{ $width := .width }}
{{ if and (not $contentclass) $caption }}
{{ $contentclass = "figure-img" }}
{{ end }}
{{ $content := partial "paige/img.html" (dict
"alt" $alt
"class" $imageclass
"height" $height
"method" $method
"options" $options
"page" $page
"resource" $resource
"src" $src
"style" $imagestyle
"title" $title
"width" $width
) }}
{{ if $link }}
{{ $content = partial "paige/a.html" (dict
"content" $content
"href" $link
) }}
{{ end }}
{{ partial "paige/figure.html" (dict
"caption" $caption
"captionclass" $captionclass
"captionstyle" $captionstyle
"class" $class
"content" $content
"contentclass" $contentclass
"contentstyle" $contentstyle
"style" $style
) }}

38
layouts/partials/paige/img.html
Unescape Escape View File

@ -0,0 +1,38 @@
{{ $alt := .alt }}
{{ $class := .class }}
{{ $height := .height }}
{{ $loading := .loading | default "lazy" }}
{{ $method := .method }}
{{ $options := .options }}
{{ $page := .page }}
{{ $referrerpolicy := .referrerpolicy | default "no-referrer" }}
{{ $resource := .resource }}
{{ $src := .src }}
{{ $style := .style }}
{{ $title := .title }}
{{ $width := .width }}
{{ if not $resource }}
{{ $resource = partial "paige/func-resource.html" (dict
"page" $page
"url" $src
) }}
{{ end }}
{{ if and $method $options }}
{{ if eq $method "crop" }}
{{ $resource = $resource.Crop $options }}
{{ else if eq $method "fill" }}
{{ $resource = $resource.Fill $options }}
{{ else if eq $method "fit" }}
{{ $resource = $resource.Fit $options }}
{{ else if eq $method "resize" }}
{{ $resource = $resource.Resize $options }}
{{ else }}
{{ errorf "invalid method: %q" $method }}
{{ end }}
{{ end }}
{{ $src = ($resource | fingerprint).RelPermalink }}
<img {{ with $alt }} alt="{{ . }}" {{ end }} {{ with $class }} class="{{ . }}" {{ end }} {{ with $height }} height="{{ . }}" {{ end }} loading="{{ $loading }}" referrerpolicy="{{ $referrerpolicy }}" src="{{ $src }}" {{ with $style }} style="{{ . | safeCSS }}" {{ end }} {{ with $title }} title="{{ . }}" {{ end }} {{ with $width }} width="{{ . }}" {{ end }}>

4
layouts/partials/paige/style.html
Unescape Escape View File

@ -33,6 +33,10 @@ section[class="paige-metadata"] {
}
{{ end }}
.paige-figure > div > div[class="highlight"] > pre, .paige-figure > div > :last-child {
margin-bottom: 0;
}
.paige-header-link {
display: none;
margin-left: 0.5ch;

33
layouts/shortcodes/paige/code.html
Unescape Escape View File

@ -1,6 +1,27 @@
<figure class="align-items-center d-flex flex-column">
{{ highlight (.Inner | replaceRE "^\n" "") (.Get 0 | default (.Get "lang")) (.Get 2 | default (.Get "options")) }}
{{ with (.Get 1 | default (.Get "caption")) }}
<figcaption class="figure-caption">{{ . }}</figcaption>
{{ end }}
</figure>
{{ $caption := .Get "caption" }}
{{ $captionclass := .Get "captionclass" }}
{{ $captionstyle := .Get "captionstyle" }}
{{ $class := .Get "class" }}
{{ $contentclass := .Get "contentclass" | default "mb-2" }}
{{ $contentstyle := .Get "contentstyle" }}
{{ $style := .Get "style" }}
{{ $lang := .Get 0 | default (.Get "lang") }}
{{ $options := .Get "options" }}
{{ if $caption }}
{{ $contentclass = $contentclass | default "mb-2" }}
{{ end }}
{{ $content := highlight (.Inner | replaceRE "^\n" "") $lang $options }}
{{ partial "paige/figure.html" (dict
"caption" $caption
"captionclass" $captionclass
"captionstyle" $captionstyle
"class" $class
"content" $content
"contentclass" $contentclass
"contentstyle" $contentstyle
"style" $style
) }}

24
layouts/shortcodes/paige/figure.html
Unescape Escape View File

@ -0,0 +1,24 @@
{{ $caption := .Get 0 | default (.Get "caption") }}
{{ $captionclass := .Get "captionclass" }}
{{ $captionstyle := .Get "captionstyle" }}
{{ $class := .Get "class" }}
{{ $contentclass := .Get "contentclass" }}
{{ $contentstyle := .Get "contentstyle" }}
{{ $style := .Get "style" }}
{{ if $caption }}
{{ $contentclass = $contentclass | default "mb-2" }}
{{ end }}
{{ $content := .Inner }}
{{ partial "paige/figure.html" (dict
"caption" $caption
"captionclass" $captionclass
"captionstyle" $captionstyle
"class" $class
"content" $content
"contentclass" $contentclass
"contentstyle" $contentstyle
"style" $style
) }}

156
layouts/shortcodes/paige/gallery.html
Unescape Escape View File

@ -1,58 +1,120 @@
{{ $images := .Get "images" }}
{{ $caption := .Get "caption" }}
{{ $method := .Get "method" | default .Page.Params.paige.gallery.method | default .Page.Site.Params.paige.gallery.method | default "resize" }}
{{ $options := .Get "options" | default .Page.Params.paige.gallery.options | default .Page.Site.Params.paige.gallery.options | default "550x webp picture Lanczos" }}
{{ $display := .Get "display" | default .Page.Params.paige.gallery.display | default .Page.Site.Params.paige.gallery.display | default "grid" }}
{{ $captionclass := .Get "captionclass" }}
{{ $captionstyle := .Get "captionstyle" }}
{{ $class := .Get "class" }}
{{ $contentclass := .Get "contentclass" }}
{{ $contentstyle := .Get "contentstyle" }}
{{ $image := .Get "image" }}
{{ $imageclass := .Get "imageclass" }}
{{ $images := .Get 0 | default (.Get "images") }}
{{ $imagestyle := .Get "imagestyle" }}
{{ $innercaptionclass := .Get "innercaptionclass" }}
{{ $innercaptionstyle := .Get "innercaptionstyle" }}
{{ $innerclass := .Get "innerclass" | default "d-table mb-0" }}
{{ $innerstyle := .Get "innerstyle" }}
{{ $method := .Get "method" | default "resize" }}
{{ $options := .Get "options" | default "550x webp picture Lanczos" }}
{{ $style := .Get "style" }}
{{ $type := .Get "type" | default "rows" }}
{{ $inner := chomp .Inner }}
{{ if $image }}
{{ $captionclass = $captionclass | default "figure-caption text-center" }}
{{ $captionstyle = $captionstyle | default "caption-side: bottom; display: table-caption" }}
{{ $resource := partial "paige/func-resource.html" (dict
"page" .Page
"url" $image
) }}
{{ if $inner }}
{{ $display = "list" }}
{{ end }}
{{ $resources := slice }}
{{ with $images }}
{{ $resources = $.Page.Resources.Match . }}
{{ partial "paige/image-figure.html" (dict
"caption" $caption
"captionclass" $captionclass
"captionstyle" $captionstyle
"class" $innerclass
"contentclass" $contentclass
"contentstyle" $contentstyle
"imageclass" $imageclass
"imagestyle" $imagestyle
"link" $resource.RelPermalink
"method" $method
"options" $options
"page" .Page
"resource" $resource
"src" $image
"style" $innerstyle
) }}
{{ else }}
{{ $resources = .Page.Resources.ByType "image" }}
{{ end }}
{{ $inner := chomp .Inner }}
{{ $cols := "col-12 col-md-6 col-lg-4 col-xl-3 col-xxl-2" }}
{{ with len $resources }}
{{ if eq . 1 }}
{{ $cols = "col-12" }}
{{ else if eq . 2 }}
{{ $cols = "col-12 col-md-6" }}
{{ else if eq . 3 }}
{{ $cols = "col-12 col-md-6 col-lg-4" }}
{{ else if eq . 4 }}
{{ $cols = "col-12 col-md-6 col-lg-4 col-xl-3" }}
{{ $resources := slice }}
{{ with $images }}
{{ with $.Page.Resources.Match . }}
{{ $resources = . }}
{{ else }}
{{ $resources = resources.Match . }}
{{ end }}
{{ else }}
{{ with .Page.Resources.ByType "image" }}
{{ $resources = . }}
{{ else }}
{{ $resources = resources.ByType "image" }}
{{ end }}
{{ end }}
{{ end }}
<figure class="align-items-center d-flex flex-column">
{{ if eq $display "grid" }}
<div class="container-fluid{{ if $caption }} figure-img{{ end }} px-0">
<div class="align-items-center gx-3 gy-3 justify-content-center row">
{{ range $resources }}
<div class="{{ $cols }} d-flex justify-content-center">
{{ partial "paige/gallery-item.html" (dict "image" . "method" $method "options" $options) }}
<figure>
{{ if eq $type "grid" }}
<div class="container-fluid{{ if $caption }} figure-img{{ end }} px-0">
<div class="align-items-center gx-3 gy-3 justify-content-center 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
"captionclass" $captionclass
"captionstyle" $captionstyle
"class" $innerclass
"contentclass" $contentclass
"contentstyle" $contentstyle
"imageclass" $imageclass
"imagestyle" $imagestyle
"link" .RelPermalink
"method" $method
"options" $options
"resource" .
"style" $innerstyle
) }}
{{ end }}
{{ end }}
</div>
</div>
{{ else if eq $type "rows" }}
{{ $imagestyle = $imagestyle | default "max-height: 10rem" }}
<div class="align-items-center column-gap-3 d-flex{{ with $caption }} figure-img{{ end }} flex-wrap justify-content-center row-gap-3">
{{ with $inner }}
{{ . }}
{{ else }}
{{ range $resources }}
{{ partial "paige/image-figure.html" (dict
"captionclass" $captionclass
"captionstyle" $captionstyle
"class" $innerclass
"contentclass" $contentclass
"contentstyle" $contentstyle
"imageclass" $imageclass
"imagestyle" $imagestyle
"link" .RelPermalink
"method" $method
"options" $options
"resource" .
"style" $innerstyle
) }}
{{ end }}
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ else if eq $display "list" }}
<div class="align-items-center column-gap-3 d-flex{{ if $caption }} figure-img{{ end }} flex-wrap justify-content-center row-gap-3">
{{ with $inner }}
{{ . }}
{{ else }}
{{ range $resources }}
{{ partial "paige/gallery-item.html" (dict "image" . "method" $method "options" $options) }}
{{ errorf "invalid type: %q" $type }}
{{ end }}
{{ with $caption }}
<figcaption class="figure-caption text-center">{{ . }}</figcaption>
{{ end }}
</div>
{{ end }}
{{ with $caption }}
<figcaption class="figure-caption">{{ . }}</figcaption>
{{ end }}
</figure>
</figure>
{{ end }}

5
layouts/shortcodes/paige/gallery/item.html
Unescape Escape View File

@ -1,5 +0,0 @@
{{ $image := .Page.Resources.GetMatch (.Get 0 | default (.Get "image")) }}
{{ $caption := .Get "caption" }}
{{ $method := .Get "method" | default .Page.Params.paige.gallery.method | default .Page.Site.Params.paige.gallery.method | default "resize" }}
{{ $options := .Get "options" | default .Page.Params.paige.gallery.options | default .Page.Site.Params.paige.gallery.options | default "550x webp picture Lanczos" }}
{{ partial "paige/gallery-item.html" (dict "image" $image "caption" $caption "method" $method "options" $options) }}

61
layouts/shortcodes/paige/image.html
Unescape Escape View File

@ -1,20 +1,41 @@
<figure class="align-items-center d-flex flex-column">
{{ $link := .Get 2 | default (.Get `link`) }}
{{ with $link }}
<a href="{{ . }}">
{{ end }}
{{ $src := .Get 0 | default (.Get `src`) }}
{{ $url := urls.Parse $src }}
{{ if and (not $url.IsAbs) (not (hasPrefix $url.Path "/")) }}
{{ with .Page.Resources.Get $src }}
{{ $src = .RelPermalink }}
{{ end }}
{{ end }}
<img{{ with (.Get 4 | default (.Get `alt`)) }} alt="{{ . }}"{{ end }} class="figure-img img-fluid"{{ with .Get `height` }} height="{{ . }}"{{ end }} loading="lazy" referrerpolicy="no-referrer" src="{{ $src }}"{{ with (.Get 3 | default (.Get `title`)) }} title="{{ . }}"{{ end }}{{ with .Get `width` }} width="{{ . }}"{{ end }}>
{{ if $link }}
</a>
{{ end }}
{{ with (.Get 1 | default (.Get `caption`)) }}
<figcaption class="figure-caption">{{ . }}</figcaption>
{{ end }}
</figure>
{{ $caption := .Get "caption" }}
{{ $captionclass := .Get "captionclass" }}
{{ $captionstyle := .Get "captionstyle" }}
{{ $class := .Get "class" }}
{{ $contentclass := .Get "contentclass" }}
{{ $contentstyle := .Get "contentstyle" }}
{{ $style := .Get "style" }}
{{ $alt := .Get "alt" }}
{{ $height := .Get "height" }}
{{ $imageclass := .Get "imageclass" }}
{{ $imagestyle := .Get "imagestyle" }}
{{ $method := .Get "method" }}
{{ $options := .Get "options" }}
{{ $src := .Get 0 | default (.Get "src") }}
{{ $title := .Get "title" }}
{{ $width := .Get "width" }}
{{ $link := .Get "link" }}
{{ partial "paige/image-figure.html" (dict
"caption" $caption
"captionclass" $captionclass
"captionstyle" $captionstyle
"class" $class
"contentclass" $contentclass
"contentstyle" $contentstyle
"style" $style
"alt" $alt
"height" $height
"imageclass" $imageclass
"imagestyle" $imagestyle
"method" $method
"options" $options
"src" $src
"title" $title
"width" $width
"link" $link
) }}

Write Preview
Loading…
Cancel
Save