mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-08 18:15:23 +00:00
George Cushen
55228b7ade
As of a recent update, gallery and figure images are lazy loaded. However, lazy loading without initial sizes defined can lead to inaccurate anchor scrolling and active link highlighting as the anchor offset changes after an uncached image occurring before the anchor is lazily loaded. See https://github.com/gcushen/hugo-academic/issues/1199#issuecomment-577293818 Fix #1199
57 lines
2.3 KiB
HTML
57 lines
2.3 KiB
HTML
{{/* Get album folder or default to `gallery/`. */}}
|
|
{{ $album := "" }}
|
|
{{ with .Get "album" }}{{ $album = . }}{{else}}{{ $album = "gallery" }}{{end}}
|
|
|
|
{{/* Set image path and page bundle that images are associated with. */}}
|
|
{{ $album_path := "" }}
|
|
{{ $resource_page := "" }}
|
|
{{ if eq .Page.Parent.Type "widget_page" }}
|
|
{{ $album_path = printf "%s/%s/*" (path.Base (path.Split .Page.Path).Dir) $album }}
|
|
{{ $resource_page = $.Page.Parent }}
|
|
{{ else }}
|
|
{{ $album_path = printf "%s/*" $album }}
|
|
{{ $resource_page = $.Page }}
|
|
{{ end }}
|
|
|
|
<div class="gallery">
|
|
|
|
{{/* Attempt to automatically load gallery images from page bundle */}}
|
|
{{ $images := ($resource_page.Resources.ByType "image").Match $album_path }}
|
|
{{ with $images }}
|
|
{{ range $images }}
|
|
{{ $image := .Resize "x190" }}
|
|
{{/* 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 }}
|
|
<a data-fancybox="gallery-{{$album}}" href="{{ .RelPermalink }}" {{ with $caption }}data-caption="{{.|markdownify|emojify|safeHTMLAttr}}"{{ end }}>
|
|
<img data-src="{{ $image.RelPermalink }}" class="lazyload" alt="" width="{{ $image.Width }}" height="{{ $image.Height }}">{{/* Width & height (or low res src) required for lazy loading. */}}
|
|
</a>
|
|
{{end}}
|
|
|
|
{{else}}
|
|
{{/* Load gallery images from the `static/img/` media library or internet */}}
|
|
|
|
{{ if $.Page.Params.gallery_item }}
|
|
{{ range (where $.Page.Params.gallery_item "album" $album) }}
|
|
{{/* Set image path. */}}
|
|
{{ $.Scratch.Set "src" .image }}
|
|
{{ if gt (len .image) 4 }}
|
|
{{ if ne "http" (slicestr .image 0 4) }}
|
|
{{ $.Scratch.Set "src" (printf "img/%s" .image | relURL) }}
|
|
{{ end }}
|
|
{{ end }}
|
|
{{/* Don't lazy load image as cannot init image size from non-Hugo asset, resulting in inaccurate anchor scrolling & active link highlighting. */}}
|
|
<a data-fancybox="gallery{{ with .album }}-{{.}}{{ end }}" {{ with .caption }}data-caption="{{.|markdownify|emojify|safeHTMLAttr}}"{{ end }} href="{{$.Scratch.Get "src"}}">
|
|
<img data-src="{{$.Scratch.Get "src"}}" alt="">
|
|
</a>
|
|
{{end}}
|
|
{{else}}
|
|
{{ errorf "Unable to load gallery in %s." .Page.File.Filename }}
|
|
{{end}}
|
|
{{end}}
|
|
</div> |