forked from mfg92/hugo-shortcode-gallery
-
Notifications
You must be signed in to change notification settings - Fork 0
/
gallery.html
83 lines (65 loc) · 2.89 KB
/
gallery.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
{{ $images := (.Page.Resources.ByType "image") }}
{{ if .Get "match"}}
{{ $images = (.Page.Resources.Match (.Get "match")) }}
{{ end }}
{{ $rowHeight := .Get "rowHeight" | default (.Site.Params.galleryRowHeight | default 150) }}
{{ $margins := .Get "margins" | default (.Site.Params.galleryRowMargins | default 5) }}
{{ $resizeOptions := .Get "resizeOptions" | default (.Site.Params.galleryResizeOptions | default "x150 q85 Lanczos") }}
{{ $loadJQuery := .Get "loadJQuery" | default (.Site.Params.galleryLoadJQuery | default false) }}
{{ $showExifAsTitle := .Get "showExifAsTitle" | default (.Site.Params.galleryShowExifAsTitle | default false) }}
<!-- hugos image processing saves images at resources/_gen/images, if the property resourceDir
is changed in hugos config.toml file the images are save <resourceDir>/_gen/images.
Because it is not possible to access the value of resourceDir, users who change resourceDir also have to change
[params] resourceDir. -->
{{ $thumbnailResourceDir := printf "%s%s" (.Site.Params.resourceDir | default "resources") "/_gen/images/" }}
<!-- Load jquery-migrate, swipebox and justified_gallery only once per page -->
{{ if not (.Page.Scratch.Get "galleryLoaded") }}
{{ .Page.Scratch.Set "galleryLoaded" true }}
{{ if $loadJQuery }}
<script src="/shortcode-gallery/jquery-3.3.1.min.js"></script>
{{ end }}
{{ if $showExifAsTitle }}
<script src="/shortcode-gallery/exif-2.3.0.min.js"></script>
{{ end }}
<script src="/shortcode-gallery/swipebox/js/jquery.swipebox.min.js"></script>
<link rel="stylesheet" href="/shortcode-gallery/swipebox/css/swipebox.min.css">
<script src="/shortcode-gallery/justified_gallery/jquery.justifiedGallery.min.js"></script>
<link rel="stylesheet" href="/shortcode-gallery/justified_gallery/justifiedGallery.min.css"/>
{{ end }}
<!--
Ordinal increases every time this shortcode is used in a document
Ordinal: {{ .Ordinal}}
-->
{{ $galleryId := (printf "gallery_%v" .Ordinal)}}
<div id="{{ $galleryId }}" class="justified-gallery">
{{ range $original := $images }}
{{ $thumbnail := ($original.Resize ($resizeOptions)) }}
{{ $thumbnailImgData := imageConfig (printf "%s%s" $thumbnailResourceDir $thumbnail.RelPermalink) }}
<div>
<a href="{{ $original.RelPermalink }}" class="galleryImg">
<img src="{{ $thumbnail.RelPermalink }}"
width="{{ $thumbnailImgData.Width }}" height="{{ $thumbnailImgData.Height }}"/>
<!--style="width: initial; max-width: initial;"/>-->
</a>
</div>
{{ end }}
</div>
<script>
if (!jQuery) {
alert("jquery is not loaded");
}
$( document ).ready(function() {
$("#{{ $galleryId }}").justifiedGallery({
rowHeight : {{ $rowHeight }},
margins : {{ $margins }},
border : 0,
//waitThumbnailsLoad : false,
lastRow : 'justify',
})
.on('jg.complete', function () {
$('.galleryImg').swipebox( {
showExifAsTitle : {{ $showExifAsTitle | safeJS }},
});
});
});
</script>