feat(shortcodes): add support for image gallery in page bundle
To use:
1. Create a gallery album folder in page bundle
2. Add images to album folder
3. Paste `{{< gallery album="<ALBUM FOLDER>" >}}` in your page content
Close #786
No files matched your search
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 21 KiB |
@@ -30,44 +30,46 @@ summary = "Create a beautifully simple website or blog in under 10 minutes."
|
||||
# Options: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight
|
||||
focal_point = ""
|
||||
|
||||
# Set captions for image gallery.
|
||||
|
||||
[[gallery_item]]
|
||||
album = "1"
|
||||
image = "https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-default.png"
|
||||
album = "gallery"
|
||||
image = "theme-default.png"
|
||||
caption = "Default"
|
||||
|
||||
[[gallery_item]]
|
||||
album = "1"
|
||||
image = "https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-ocean.png"
|
||||
album = "gallery"
|
||||
image = "theme-ocean.png"
|
||||
caption = "Ocean"
|
||||
|
||||
[[gallery_item]]
|
||||
album = "1"
|
||||
image = "https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-forest.png"
|
||||
album = "gallery"
|
||||
image = "theme-forest.png"
|
||||
caption = "Forest"
|
||||
|
||||
[[gallery_item]]
|
||||
album = "1"
|
||||
image = "https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-dark.png"
|
||||
album = "gallery"
|
||||
image = "theme-dark.png"
|
||||
caption = "Dark"
|
||||
|
||||
[[gallery_item]]
|
||||
album = "1"
|
||||
image = "https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-apogee.png"
|
||||
album = "gallery"
|
||||
image = "theme-apogee.png"
|
||||
caption = "Apogee"
|
||||
|
||||
[[gallery_item]]
|
||||
album = "1"
|
||||
image = "https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-1950s.png"
|
||||
album = "gallery"
|
||||
image = "theme-1950s.png"
|
||||
caption = "1950s"
|
||||
|
||||
[[gallery_item]]
|
||||
album = "1"
|
||||
image = "https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-coffee-playfair.png"
|
||||
album = "gallery"
|
||||
image = "theme-coffee-playfair.png"
|
||||
caption = "Coffee theme with Playfair font"
|
||||
|
||||
[[gallery_item]]
|
||||
album = "1"
|
||||
image = "https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-cupcake.png"
|
||||
album = "gallery"
|
||||
image = "theme-cupcake.png"
|
||||
caption = "Cupcake"
|
||||
+++
|
||||
|
||||
|
||||
@@ -1,7 +1,28 @@
|
||||
{{ $.Scratch.Set "album" "1" }}
|
||||
{{ with .Get "album" }}{{ $.Scratch.Set "album" . }}{{ end }}
|
||||
{{ $album := "gallery" }}
|
||||
{{ with .Get "album" }}{{ $album = . }}{{ end }}
|
||||
<div class="gallery">
|
||||
{{ range (where $.Page.Params.gallery_item "album" ($.Scratch.Get "album")) }}
|
||||
|
||||
{{/* Attempt to automatically load gallery images from page bundle */}}
|
||||
{{ $images := ($.Page.Resources.ByType "image").Match (printf "%s/*" $album) }}
|
||||
{{ with $images }}
|
||||
{{ range $images }}
|
||||
{{/* Check if the user set a caption for this image */}}
|
||||
{{ $filename := .Name }}
|
||||
{{ $caption := "" }}
|
||||
{{ if $.Page.Params.gallery_item }}
|
||||
{{ range (where $.Page.Params.gallery_item "album" $album) }}
|
||||
{{if eq (printf "%s/%s" $album .image) $filename}}{{ with .caption }}{{ $caption = . }}{{end}}{{end}}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<a data-fancybox="gallery-{{$album}}" href="{{ .RelPermalink }}" {{ with $caption }}data-caption="{{.}}"{{ end }}>
|
||||
<img src="{{ .RelPermalink }}" alt="">
|
||||
</a>
|
||||
{{end}}
|
||||
|
||||
{{else}}
|
||||
{{/* Load gallery images from the `static/img/` media library or internet */}}
|
||||
|
||||
{{ range (where $.Page.Params.gallery_item "album" $album) }}
|
||||
{{/* Set image path. */}}
|
||||
{{ $.Scratch.Set "src" .image }}
|
||||
{{ if gt (len .image) 4 }}
|
||||
@@ -10,7 +31,8 @@
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<a data-fancybox="gallery{{ with .album }}-{{.}}{{ end }}" {{ with .caption }}data-caption="{{.}}"{{ end }} href="{{$.Scratch.Get "src"}}">
|
||||
<img alt="" src="{{$.Scratch.Get "src"}}">
|
||||
<img src="{{$.Scratch.Get "src"}}" alt="">
|
||||
</a>
|
||||
{{ end }}
|
||||
{{end}}
|
||||
</div>
|
||||