Reeks aan verbeteringen om actieve leden en teamleden te tonen

themes/nluug/assets/scss/styles.scss

@@ -33,6 +33,23 @@ body {
   top: 0;
 }
 
+figure {
+  margin-inline-start: 10px;
+  margin-inline-end: 10px;
+}
+
+.grid-team-members {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: 1px;
+}
+
+.grid-team-members-small-photos {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  column-gap: 1px;
+}
+
 h1, h2, h3, h4, h5, strong, b {
     font-size: inherit;
     font-weight: 600;

themes/nluug/layouts/organisatie/section.html

@@ -1,12 +1,20 @@
 {{ define "main" }}
   {{ .Content }}
+
+  <section>
+  <h2>Actieve leden</h2>
+  {{ if .Params.active_members }}
+  {{ .Scratch.Set "active_members" .Params.active_members }}
+  {{ partial "show-active-members-small.html" . }}
+  {{ end }}
+  </section>
+
   <section>
     <p>Relevante pagina's:</p>
-    <ul class="list">
+    <ul>
       {{ range .Pages }}
         <li>
-          <a class="link" href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}
-          </a>
+          <a class="link" href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title | default "Geen titel" }}</a>
         </li>
         {{ end }}
     </ul>

themes/nluug/layouts/partials/show-active-members-small.html

@@ -0,0 +1,23 @@
+
+{{ $size_in_pixels := 150 }}
+
+<div class="grid-team-members-small-photos">
+  {{ range $key,$val := .Scratch.Get "active_members" }}
+      {{ with (index $.Site.Data.personen .) }}
+        <div>
+            {{ if .thumbnail }}
+              <figure>
+                {{ if .profile_page }}
+                  <a href="{{ .profile_page }}"><img src="{{ .thumbnail }}" alt="Foto van {{ .name }}" height="{{ $size_in_pixels }}" width="{{ $size_in_pixels }}" /></a>
+                {{ else }}
+                <img src="{{ .thumbnail }}" alt="Foto van {{ .name }}" height="{{ $size_in_pixels }}" width="{{ $size_in_pixels }}" />
+                {{ end }}
+                <figcaption>
+                  <small><strong>{{ .name }}</strong></small>
+                </figcaption>
+              </figure>
+            {{ end }}
+        </div>
+      {{ end }}
+    {{ end }}
+  </div>

themes/nluug/layouts/person/single.html

@@ -14,6 +14,11 @@
     {{ end }}
     </ul>
     <h3>Social media</h3>
-    {{ if .social.mastodon }}<a href="{{ .social.mastodon_url }}">{{ .social.mastodon }}</a>{{ end }}
+    {{ if .social.mastodon }}
+      <a href="{{ .social.mastodon_url }}">{{ .social.mastodon }}</a><img src="/afbeeldingen/iconen/mastodon.svg" height="200" width="200" alt="Mastodon" /></a>
+    {{ end }}
+    {{ if .social.twitter }}
+    <a href="https://twitter.com/{{ .social.twitter }}">{{ .social.twitter }}</a><img src="/afbeeldingen/iconen/twitter.svg" height="200" width="200" alt="Twitter" /></a>
+    {{ end }}
   {{ end }}
 {{ end }}

themes/nluug/layouts/team/single.html

@@ -9,13 +9,17 @@
 
   <h2>Team</h2>
 
-  <div style="display: grid;grid-template-columns: 1fr 1fr 1fr;column-gap: 5px;">
+  <div class="grid-team-members">
     {{ range $key,$val := .Params.team_members }}
       {{ with (index $.Site.Data.personen $val) }}
         <div>
             {{ if .thumbnail }}
               <figure>
-                <img src="{{ .thumbnail }}" alt="Foto van {{ .name }}" />
+                {{ if .profile_page }}
+                  <a href="{{ .profile_page }}"><img src="{{ .thumbnail }}" alt="Foto van {{ .name }}" /></a>
+                {{ else }}
+                  <img src="{{ .thumbnail }}" alt="Foto van {{ .name }}" />
+                {{ end }}
                 <figcaption>
                   <strong>{{ .name }}</strong>
                 </figcaption>