Add gallery.html, item.html, gallery-item.html
This commit is contained in:
Will Faught
64
README.md
64
README.md
@@ -239,6 +239,10 @@ paige:
|
||||
utterances: # utteranc.es
|
||||
github_repo: "example/foo"
|
||||
date_format: "2006 January 2" # Hugo date format for page dates
|
||||
gallery: # Inherited by the paige/gallery and paige/gallery/item shortcodes
|
||||
display: "list" # Display images in a grid or list; values are "grid", "list"; default is "grid"
|
||||
method: "resize" # Hugo image processing method; values are "crop", "fill", "fit", "resize"; default is "resize"
|
||||
options: "550x webp picture Lanczos" # Hugo image processing options; default is "550x webp picture Lanczos"
|
||||
hide_theme_comment: true # Don't put a link to this project in a code comment
|
||||
hide_theme_link: true # Don't put a link to this project in the footer
|
||||
math:
|
||||
@@ -275,6 +279,10 @@ authors: [
|
||||
]
|
||||
link: "https://youtu.be/dQw4w9WgXcQ" # The reference for an anchor around the title
|
||||
paige:
|
||||
gallery: # Inherited by the paige/gallery and paige/gallery/item shortcodes
|
||||
display: "list" # Display images in a grid or list; values are "grid", "list"; default is "grid"
|
||||
method: "resize" # Hugo image processing method; values are "crop", "fill", "fit", "resize"; default is "resize"
|
||||
options: "550x webp picture Lanczos" # Hugo image processing options; default is "550x webp picture Lanczos"
|
||||
math: true # Enable math typesetting with KaTeX
|
||||
toc: true # Show a table of contents if there are any headers
|
||||
```
|
||||
@@ -511,6 +519,62 @@ These are the the named parameters with positions:
|
||||
{{< /paige/code >}}
|
||||
```
|
||||
|
||||
### Gallery
|
||||
|
||||
The `paige/gallery` shortcode provides a figure with a set of images and an optional, centered caption.
|
||||
|
||||
```
|
||||
{{< paige/gallery
|
||||
|
||||
// Page resource image file name or pattern; optional; defaults to all images
|
||||
images="birthday*.jpg"
|
||||
|
||||
// Optional
|
||||
caption="My caption"
|
||||
|
||||
// Hugo image processing method; optional; values are "crop", "fill", "fit", "resize"; default is "resize"
|
||||
method="resize"
|
||||
|
||||
// Hugo image processing options; optional; default is "550x webp picture Lanczos"
|
||||
options="550x webp picture Lanczos"
|
||||
|
||||
// Display images in a grid or list; optional; values are "grid", "list"; default is "grid"
|
||||
display="grid"
|
||||
|
||||
/>}}
|
||||
```
|
||||
|
||||
The `paige/gallery/item` shortcode is nested within the `paige/gallery` shortcode to provide a caption and customization per image.
|
||||
The display type is automatically list, and cannot be overridden.
|
||||
|
||||
```
|
||||
{{< paige/gallery caption="My caption" method="resize" options="550x webp picture Lanczos" >}}
|
||||
|
||||
{{< paige/gallery/item
|
||||
|
||||
// Page resource image file name or pattern
|
||||
image="birthday1.jpg"
|
||||
|
||||
// Optional
|
||||
caption="My caption"
|
||||
|
||||
// Optional
|
||||
method="resize"
|
||||
|
||||
// Optional
|
||||
options="550x webp picture Lanczos"
|
||||
|
||||
>}}
|
||||
|
||||
{{< /paige/gallery >}}
|
||||
```
|
||||
|
||||
The `paige/gallery` shortcode must be self-closing if the `paige/gallery/item` shortcode is not used.
|
||||
|
||||
```
|
||||
{{< paige/gallery />}}
|
||||
```
|
||||
|
||||
## Customization
|
||||
|
||||
If `partials/paige/head-last.html` exists in the site, it is included at the end of the head tag.
|
||||
|
||||
26
layouts/partials/paige/gallery-item.html
Normal file
26
layouts/partials/paige/gallery-item.html
Normal file
@@ -0,0 +1,26 @@
|
||||
{{ $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>
|
||||
58
layouts/shortcodes/paige/gallery.html
Normal file
58
layouts/shortcodes/paige/gallery.html
Normal file
@@ -0,0 +1,58 @@
|
||||
{{ $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" }}
|
||||
|
||||
{{ $inner := chomp .Inner }}
|
||||
|
||||
{{ if $inner }}
|
||||
{{ $display = "list" }}
|
||||
{{ end }}
|
||||
|
||||
{{ $resources := slice }}
|
||||
{{ with $images }}
|
||||
{{ $resources = $.Page.Resources.Match . }}
|
||||
{{ else }}
|
||||
{{ $resources = .Page.Resources.ByType "image" }}
|
||||
{{ end }}
|
||||
|
||||
{{ $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" }}
|
||||
{{ 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 }}">
|
||||
{{ partial "paige/gallery-item.html" (dict "image" . "method" $method "options" $options) }}
|
||||
</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) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ with $caption }}
|
||||
<figcaption class="figure-caption">{{ . }}</figcaption>
|
||||
{{ end }}
|
||||
</figure>
|
||||
5
layouts/shortcodes/paige/gallery/item.html
Normal file
5
layouts/shortcodes/paige/gallery/item.html
Normal file
@@ -0,0 +1,5 @@
|
||||
{{ $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) }}
|
||||
@@ -31,12 +31,14 @@ tags = [
|
||||
"bootstrap",
|
||||
"contact",
|
||||
"dark",
|
||||
"gallery",
|
||||
"hero",
|
||||
"landing",
|
||||
"light",
|
||||
"minimal",
|
||||
"multilingual",
|
||||
"personal",
|
||||
"portfolio",
|
||||
"responsive"
|
||||
]
|
||||
|
||||
|
||||
Reference in New Issue
Block a user