mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-05 20:14:41 +00:00
George Cushen
33ebd99049
See https://discord.com/channels/722225264733716590/738924091511144489/1406144559188283494 See https://gohugo.io/templates/new-templatesystem-overview/
61 lines
2.3 KiB
HTML
61 lines
2.3 KiB
HTML
{{/* Gallery Shortcode for Hugo Blox Builder. */}}
|
|
{{/* Load gallery images from media library. */}}
|
|
{{/* https://github.com/HugoBlox/hugo-blox-builder */}}
|
|
|
|
{{/*
|
|
Docs: https://docs.hugoblox.com/content/writing-markdown-latex/#image-gallery
|
|
|
|
Parameters
|
|
----------
|
|
album : default "gallery"
|
|
Album folder in `assets/media/albums/` to load images from.
|
|
order : default "asc"
|
|
Sort images by title ascending (asc) or descending (desc).
|
|
resize_options : default "750x750"
|
|
Resize options passed to Hugo `.Fit` function (https://gohugo.io/content-management/image-processing/).
|
|
*/}}
|
|
|
|
{{/* For gallery nested in landing page sections */}}
|
|
{{ $.Page.Store.Set "has_gallery" true }}
|
|
|
|
{{/* Get album folder or default to `media/albums/gallery/`. */}}
|
|
{{ $album := (.Get "album") | default "gallery" }}
|
|
{{ $album_path := path.Join "media" "albums" $album "*" }}
|
|
|
|
{{/* Gallery options */}}
|
|
{{ $sort_order := .Get "order" | default "asc" }}
|
|
{{ $resize_options := printf "%s webp" (.Get "resize_options" | default "750x750") }}
|
|
|
|
<div class="gallery-grid">
|
|
|
|
{{/* Attempt to automatically load gallery images from page bundle */}}
|
|
{{ $images := resources.Match $album_path }}
|
|
{{ range (sort $images "Name" $sort_order) }}
|
|
{{ $image := .Fit $resize_options }}
|
|
{{/* Check if the user set a caption for this image */}}
|
|
{{ $filename := path.Base .Name }}
|
|
{{ $caption := "" }}
|
|
{{ if $.Page.Params.gallery_item }}
|
|
{{ range (where (where $.Page.Params.gallery_item "album" $album) "image" $filename) }}
|
|
{{ $caption = .caption }}
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ $image_size := "gallery-item--medium" }}
|
|
{{if in .Name "-f." }}
|
|
{{ $image_size = "gallery-item--full" }}
|
|
{{else if in .Name "-s." }}
|
|
{{ $image_size = "" }}
|
|
{{else if in .Name "-l." }}
|
|
{{ $image_size = "gallery-item--large" }}
|
|
{{end}}
|
|
<div class="gallery-item {{$image_size}}">
|
|
<a data-fancybox="gallery-{{$album}}" href="{{ .RelPermalink }}" {{ with $caption }}data-caption="{{.|markdownify|emojify|safeHTMLAttr}}"{{ end }}>
|
|
<img src="{{ $image.RelPermalink }}" loading="lazy" alt="{{ plainify $caption | default $filename }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
|
|
</a>
|
|
</div>
|
|
{{else}}
|
|
{{ errorf "Unable to load gallery `%s` in `%s`." $album_path .Page.File.Filename }}
|
|
{{end}}
|
|
|
|
</div>
|