Source code of my website
💄 : update gallery layout for more pictures
+63
-12
+20
-9
assets/css/custom.css
+20
-9
assets/css/custom.css
···
296
296
/* Photo gallery styles */
297
297
.photo-gallery {
298
298
display: flex;
299
+
flex-direction: column;
300
+
}
299
301
300
-
flex-direction: row;
301
-
flex-wrap: wrap;
302
+
.gallery-row {
303
+
display: flex;
304
+
flex-wrap: nowrap;
305
+
justify-content: flex-start;
302
306
}
303
307
304
-
.photo-gallery img {
308
+
.gallery-row img {
309
+
width: 100%;
310
+
flex-shrink: 1;
311
+
height: auto;
312
+
transition: transform 0.3s ease;
305
313
margin: 0;
306
-
border-radius: 0;
307
-
width: 50%;
308
-
transition: transform 0.3s ease;
309
314
}
310
315
311
-
.photo-gallery img:hover {
312
-
transform: scale(1.30);
316
+
.gallery-row img:hover {
317
+
transform: scale(1.3);
313
318
}
314
319
315
-
.photo-gallery img:nth-child(3n) {
320
+
/* Default styling for images when not using the new pattern */
321
+
.photo-gallery > img {
322
+
margin: 0;
323
+
border-radius: 4px;
316
324
width: 100%;
325
+
max-width: 800px;
326
+
height: auto;
327
+
transition: transform 0.3s ease;
317
328
}
content/talks/talk-lets-play-factorio/pictures-sunny-tech-2025/003.jpg
content/talks/talk-lets-play-factorio/pictures-sunny-tech-2025/003.jpg
This is a binary file and will not be displayed.
content/talks/talk-lets-play-factorio/pictures-sunny-tech-2025/004.jpg
content/talks/talk-lets-play-factorio/pictures-sunny-tech-2025/004.jpg
This is a binary file and will not be displayed.
+43
-3
layouts/partials/talks/event.html
+43
-3
layouts/partials/talks/event.html
···
20
20
21
21
{{ $images := $pageResources.Match (printf "%s/*" $picturesDir) }}
22
22
23
-
{{ range $index, $image := $images }}
24
-
{{ $resized := $image.Resize "800x webp" }}
23
+
{{ $totalImages := len $images }}
24
+
25
+
{{ $remainingImages := len $images }}
26
+
27
+
<!-- first line, 3 images, always -->
28
+
<div class="gallery-row">
29
+
{{ range $image := first 3 $images }}
30
+
{{ $resized := $image.Resize "900x webp" }}
25
31
<img src="{{ $resized.RelPermalink }}" alt="{{ $image.Name }}" loading="lazy">
32
+
33
+
{{ $remainingImages = sub $remainingImages 1 }}
34
+
35
+
{{ end }}
36
+
</div>
37
+
38
+
{{ if lt $remainingImages 3 }}
39
+
<!-- show all remaining images on the last line-->
40
+
<div class="gallery-row">
41
+
{{ range $index, $image := last $remainingImages $images }}
42
+
{{ $resized := $image.Resize "900x webp" }}
43
+
<img src="{{ $resized.RelPermalink }}" alt="{{ $image.Name }}" loading="lazy">
44
+
{{ end }}
45
+
</div>
46
+
{{ else }}
47
+
<!-- show a single image -->
48
+
<div class="gallery-row">
49
+
{{ range $index, $image := slice (index $images 3) }}
50
+
{{ $resized := $image.Resize "900x webp" }}
51
+
<div class="gallery-item">
52
+
<img src="{{ $resized.RelPermalink }}" alt="{{ $image.Name }}" loading="lazy">
53
+
</div>
54
+
{{ end }}
55
+
{{ $remainingImages = sub $remainingImages 1 }}
56
+
</div>
57
+
<!-- show all remaining images on the last line-->
58
+
<div class="gallery-row">
59
+
{{ range $index, $image := after 4 $images }}
60
+
{{ $resized := $image.Resize "900x webp" }}
61
+
<div class="gallery-item">
62
+
<img src="{{ $resized.RelPermalink }}" alt="{{ $image.Name }}" loading="lazy">
63
+
</div>
64
+
{{ end }}
65
+
</div>
26
66
{{ end }}
27
-
</div>
67
+
</div>
28
68
{{ end }}
29
69
{{ end }}
30
70
{{ end }}