Source code of my website
💄 : add photo gallery on talk page
+42
-2
+25
assets/css/custom.css
+25
assets/css/custom.css
···
292
292
color: var(--code-block-color);
293
293
background-color: var(--bkg-color) !important;
294
294
}
295
+
296
+
/* Photo gallery styles */
297
+
.photo-gallery {
298
+
display: flex;
299
+
300
+
flex-direction: row;
301
+
flex-wrap: wrap;
302
+
}
303
+
304
+
.photo-gallery img {
305
+
width: 50%;
306
+
transition: transform 0.3s ease;
307
+
}
308
+
309
+
.photo-gallery img:hover {
310
+
transform: scale(1.30);
311
+
}
312
+
313
+
.photo-gallery img:nth-child(3) {
314
+
width: 100%;
315
+
}
316
+
317
+
.photo-gallery img:nth-child(7) {
318
+
width: 100%;
319
+
}
+17
-2
layouts/partials/talks/event.html
+17
-2
layouts/partials/talks/event.html
···
1
1
{{ range .Params.events }}
2
-
{{ if (or (.slides) (.youtube)) }}
2
+
{{ if (or (.slides) (.youtube) (.pictures)) }}
3
3
<h1>{{ .name }} - {{ .date | time.Format ":date_medium" }}</h1>
4
4
5
5
{{ if .slides }}
···
11
11
<h2>Video</h2>
12
12
<iframe loading="lazy" width="560" height="315" src="https://www.youtube-nocookie.com/embed/{{ .youtube }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
13
13
{{ end }}
14
+
15
+
{{ if .pictures }}
16
+
<h2>Photos</h2>
17
+
<div class="photo-gallery">
18
+
{{ $pageResources := $.Page.Resources }}
19
+
{{ $picturesDir := .pictures }}
20
+
21
+
{{ $images := $pageResources.Match (printf "%s/*" $picturesDir) }}
22
+
23
+
{{ range $index, $image := $images }}
24
+
{{ $resized := $image.Resize "800x webp" }}
25
+
<img src="{{ $resized.RelPermalink }}" alt="{{ $image.Name }}" loading="lazy">
26
+
{{ end }}
27
+
</div>
14
28
{{ end }}
15
-
{{ end }}
29
+
{{ end }}
30
+
{{ end }}