Source code of my website
✨ : add gallery partial
+41
-51
+40
layouts/partials/photo-gallery.html
+40
layouts/partials/photo-gallery.html
···
1
+
{{/*
2
+
Partial: photo-gallery
3
+
Usage: {{ partial "photo-gallery" (dict "page" . "directory" "images" "id" "my-gallery") }}
4
+
Usage shortcode: {{< photo-gallery directory="images" id="my-gallery" >}} ou {{< photo-gallery "images" "my-gallery" >}}
5
+
- page: (obligatoire pour ressources de page) le contexte de la page (.)
6
+
- directory: (optionnel) répertoire des images relatif à assets/ ou aux ressources de la page
7
+
- id: (optionnel) ID HTML pour la galerie
8
+
*/}}
9
+
<div class="photo-gallery pswp-gallery" id="{{ with .id }}{{ . }}{{ else }}gallery{{ end }}">
10
+
{{ $images := slice }}
11
+
{{ if .directory }}
12
+
{{ $path := .directory }}
13
+
{{/* On essaie d'abord via resources.Match (pour les fichiers dans assets/) */}}
14
+
{{ $images = (resources.Match (printf "%s/*" $path)) }}
15
+
16
+
{{/* Si on ne trouve rien et qu'on a un objet .page, on cherche dans les Page Resources */}}
17
+
{{ if and (not $images) .page }}
18
+
{{ $images = .page.Resources.Match (printf "%s/*" $path) }}
19
+
{{ end }}
20
+
{{ else if .page }}
21
+
{{ $images = .page.Resources.ByType "image" }}
22
+
{{ end }}
23
+
24
+
{{ range $images }}
25
+
{{ if (and (ne .MediaType.MainType "image") (ne .MediaType.SubType "svg")) }}
26
+
{{/* On ne traite que les images */}}
27
+
{{ else }}
28
+
{{ $thumbnail := . }}
29
+
{{ if ne .MediaType.SubType "svg" }}
30
+
{{ $thumbnail = .Fill "300x300" }}
31
+
{{ end }}
32
+
<a href="{{ .RelPermalink }}"
33
+
data-pswp-width="{{ .Width }}"
34
+
data-pswp-height="{{ .Height }}"
35
+
target="_blank">
36
+
<img src="{{ $thumbnail.RelPermalink }}" alt="{{ .Name }}" />
37
+
</a>
38
+
{{ end }}
39
+
{{ end }}
40
+
</div>
+1
-51
layouts/partials/talks/event.html
+1
-51
layouts/partials/talks/event.html
···
18
18
19
19
{{ if .pictures }}
20
20
<h2>Photos</h2>
21
-
<div class="photo-gallery">
22
-
{{ $pageResources := $.Page.Resources }}
23
-
{{ $picturesDir := .pictures }}
24
-
25
-
{{ $images := $pageResources.Match (printf "%s/*" $picturesDir) }}
26
-
27
-
{{ $totalImages := len $images }}
28
-
29
-
{{ $remainingImages := len $images }}
30
-
31
-
<!-- first line, 3 images, always -->
32
-
<div class="gallery-row">
33
-
{{ range $image := first 3 $images }}
34
-
{{ $resized := $image.Resize "900x webp" }}
35
-
<img src="{{ $resized.RelPermalink }}" alt="{{ $image.Name }}" loading="lazy">
36
-
37
-
{{ $remainingImages = sub $remainingImages 1 }}
38
-
39
-
{{ end }}
40
-
</div>
41
-
42
-
{{ if lt $remainingImages 3 }}
43
-
<!-- show all remaining images on the last line-->
44
-
<div class="gallery-row">
45
-
{{ range $index, $image := last $remainingImages $images }}
46
-
{{ $resized := $image.Resize "900x webp" }}
47
-
<img src="{{ $resized.RelPermalink }}" alt="{{ $image.Name }}" loading="lazy">
48
-
{{ end }}
49
-
</div>
50
-
{{ else }}
51
-
<!-- show a single image -->
52
-
<div class="gallery-row">
53
-
{{ range $index, $image := slice (index $images 3) }}
54
-
{{ $resized := $image.Resize "900x webp" }}
55
-
<div class="gallery-item">
56
-
<img src="{{ $resized.RelPermalink }}" alt="{{ $image.Name }}" loading="lazy">
57
-
</div>
58
-
{{ end }}
59
-
{{ $remainingImages = sub $remainingImages 1 }}
60
-
</div>
61
-
<!-- show all remaining images on the last line-->
62
-
<div class="gallery-row">
63
-
{{ range $index, $image := after 4 $images }}
64
-
{{ $resized := $image.Resize "900x webp" }}
65
-
<div class="gallery-item">
66
-
<img src="{{ $resized.RelPermalink }}" alt="{{ $image.Name }}" loading="lazy">
67
-
</div>
68
-
{{ end }}
69
-
</div>
70
-
{{ end }}
71
-
</div>
21
+
{{ partial "photo-gallery" (dict "page" $.Page "directory" .pictures "id" "gallery" ) }}
72
22
{{ end }}
73
23
{{ end }}