blob: ca77ac0da15e3f58929aaf738636f61759f02afa (
plain)
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
83
84
85
86
87
88
89
|
<!--
Input Parameters:
- Mandatory:
- "page": Page
- $.Page.Scratch => $.page.Scratch
- .Site.BaseURL => $.page.Site.BaseURL
- $.Page.Dir => $.page.Dir
- Optional:
- "dir": String (directory)
- .Get "dir" => $.dir (if defined, else using ".Inner")
- "static": Boolean
- $.Get "static" => $.static (if defined, else "false" by default)
- "thumb": String (suffix)
- $.Get "thumb" => $.thumb (if defined, else "-thumb" by default)
TODO:
- .Get "caption-position"
default "bottom"
- .Get "caption-effect"
default "slide"
- .Get "hover-effect"
default "zoom"
- .Get "hover-transition"
+captions...
(& copyrights, etc.)
-->
<!--
Put this file in /layouts/shortcodes/gallery.html
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
-->
<!-- count how many times we've called this shortcode; load the css if it's the first time -->
{{- if not (.page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="/css/hugo-easy-gallery.css" />{{ end }}
{{- .page.Scratch.Add "figurecount" 1 }}
{{ $baseURL := .page.Site.BaseURL }}
<div class="gallery caption-position-{{ with .caption_position | default "bottom" }}{{.}}{{end}} caption-effect-{{ with .caption_effect | default "slide" }}{{.}}{{end}} hover-effect-{{ with .hover_effect | default "zoom" }}{{.}}{{end}} {{ if ne (.hover_transition) "none" }}hover-transition{{end}}" itemscope itemtype="http://schema.org/ImageGallery">
{{- with .dir -}}
<!-- If a directory was specified, generate figures for all of the images in the directory -->
{{- if eq $.static "true" -}}
{{ $.page.Scratch.Set "dirURL" (print .) }}
{{ $.page.Scratch.Set "dirFiles" (print "/static/" .) }}
{{- else -}}
{{- $tmpDir := print (replace $.page.Dir "\\" "/") "/" . }}
{{ $.page.Scratch.Set "dirURL" $tmpDir }}
{{ $.page.Scratch.Set "dirFiles" (print "/content/" $tmpDir "/") }}
{{- end -}}
{{- $dir := $.page.Scratch.Get "dirURL" }}
{{- $dirFiles := $.page.Scratch.Get "dirFiles" }}
{{ if (fileExists $dirFiles) -}}
{{- $files := readDir $dirFiles }}
{{- range $files -}}
<!-- skip files that aren't images, or that inlcude the thumb suffix in their name -->
{{- $thumbext := $.thumb | default "-thumb" }}
{{- $isthumb := .Name | findRE ($thumbext | printf "%s\\.") }}<!-- is the current file a thumbnail image? -->
{{- $isimg := lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp)" }}<!-- is the current file an image? -->
{{- if and $isimg (not $isthumb) }}
{{- $caption := .Name | replaceRE "\\..*" "" | humanize }}<!-- humanized filename without extension -->
{{- $linkURL := print $baseURL $dir "/" .Name | absURL }}<!-- absolute URL to hi-res image -->
{{- $thumb := .Name | replaceRE "(\\.)" ($thumbext | printf "%s.") }}<!-- filename of thumbnail image -->
{{- $thumbexists := where $files "Name" $thumb }}<!-- does a thumbnail image exist? -->
{{- $thumbURL := print $baseURL $dir "/" $thumb | absURL }}<!-- absolute URL to thumbnail image -->
<div class="box">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<div class="img" style="background-image: url('{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}');" >
<img itemprop="thumbnail" src="{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}" alt="{{ $caption }}" /><!-- <img> hidden if in .gallery -->
</div>
<figcaption>
<p>{{ $caption }}</p>
</figcaption>
<a href="{{ $linkURL }}" itemprop="contentUrl"></a><!-- put <a> last so it is stacked on top -->
</figure>
</div>
{{- end }}
{{- end }}
{{- end }}
{{ $.page.Scratch.Delete "dirURL" }}
{{ $.page.Scratch.Delete "dirFiles" }}
{{- else -}}
{{/*
TODO: Need to change the "figure" shortcode to a partial.
Not required for now as not used.
<!-- If no directory was specified, include any figure shortcodes called within the gallery -->
{{ .Inner }}
*/}}
{{- end }}
</div>
|