Source code of my website
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

๐Ÿ’„ : add photo gallery on talk page

+42 -2
+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
··· 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 }}