feat: add People widget

exampleSite/content/author/admin/_index.md

@@ -25,6 +25,10 @@ interests = [
   "Information Retrieval"
 ]
 
+# Organizational groups that you belong to (for People widget)
+#   Set this to `[]` or comment out if you are not using People widget.
+user_groups = ["Researchers", "Visitors"]
+
 # List qualifications (such as academic degrees)
 [[education.courses]]
   course = "PhD in Artificial Intelligence"

exampleSite/content/home/people.md

@@ -0,0 +1,20 @@
++++
+# People widget.
+widget = "people"  # Do not modify this line!
+active = false  # Activate this widget? true/false
+
+title = "People"
+subtitle = ""
+
+# Order that this section will appear in.
+weight = 68
+
+# List user groups to display.
+#   Edit each user's `user_groups` to add them to one or more of these groups.
+user_groups = ["Principal Investigators",
+               "Researchers",
+               "Grad Students",
+               "Administration",
+               "Visitors",
+               "Alumni"]
++++

layouts/partials/css/academic.css

@@ -618,7 +618,7 @@ a[data-fancybox] img {
   position: relative;
 }
 
-#profile .portrait {
+.portrait {
   width: 200px;
   height: 200px;
   margin: 0 auto;
@@ -626,14 +626,14 @@ a[data-fancybox] img {
   object-fit: cover;
 }
 
-#profile .portrait-title h2 {
+.portrait-title h2 {
   font-size: 1.75em;
   font-weight: 300;
   color: #000000;
   margin: 20px 0 10px 0;
 }
 
-#profile .portrait-title h3 {
+.portrait-title h3 {
   font-size: 1rem;
   font-weight: 300;
   color: rgba(0,0,0, 0.54);
@@ -695,6 +695,40 @@ ul.ul-edu li .description p.institution {
   color: rgba(0,0,0,0.6);
 }
 
+/*************************************************
+ *  People widget
+ **************************************************/
+
+.people-widget {
+  font-size: 0.8rem;
+  text-align: center;
+}
+
+.people-widget .portrait-title h2 {
+  font-size: 1rem;
+}
+
+.people-widget .portrait-title h3 {
+  font-size: 0.7rem;
+}
+
+.people-widget .portrait {
+  width: 80%;
+  max-width: 150px;
+  height: auto;
+}
+
+@media (min-width: 576px) {
+  .people-widget  .col-sm-auto {
+    max-width: 30% !important;
+  }
+}
+@media (min-width: 992px) {
+  .people-widget  .col-sm-auto {
+    max-width: 20% !important;
+  }
+}
+
 /*************************************************
  *  Sharing
  **************************************************/
@@ -2188,11 +2222,11 @@ body.dark,
   color: #fff;
 }
 
-.dark #profile .portrait-title h2 {
+.dark .portrait-title h2 {
   color: #fff;
 }
 
-.dark #profile .portrait-title h3 {
+.dark .portrait-title h3 {
   color: rgba(255, 255, 255, 0.54);
 }
 

layouts/partials/widgets/people.html

@@ -0,0 +1,50 @@
+{{ $ := .root }}
+{{ $page := .page }}
+
+<div class="row justify-content-center people-widget">
+  {{ with $page.Title }}
+  <div class="col-md-12 section-heading">
+    <h1>{{ . | markdownify | emojify }}</h1>
+    {{ if $page.Params.subtitle }}<p>{{ $page.Params.subtitle | markdownify | emojify }}</p>{{ end }}
+  </div>
+  {{ end }}
+
+  {{ with $page.Content }}
+  <div class="col-md-12">
+    <p>{{ . | markdownify }}</p>
+  </div>
+  {{ end }}
+
+  {{ range $page.Params.user_groups }}
+  <div class="col-md-12">
+    <h2 class="mb-4">{{ . | markdownify }}</h2>
+  </div>
+
+  {{ $query := where (where $.Site.Pages "Section" "author") ".Params.user_groups" "intersect" (slice .) }}
+  {{ range $query }}
+
+  {{ $avatar := (.Resources.ByType "image").GetMatch "*avatar*" }}
+  {{/* Get link to user's profile page. */}}
+  {{ $link := printf "/authors/%s" (path.Base (path.Split .Path).Dir) | relURL }}
+  <div class="col-12 col-sm-auto people-person">
+    {{ $src := "" }}
+    {{ if $.Site.Params.gravatar }}
+      {{ $src = printf "https://s.gravatar.com/avatar/%s?s=200" (md5 .Params.email) }}
+    {{ else if $avatar }}
+      {{ $avatar_image := $avatar.Fill "150x150 Center" }}
+      {{ $src = $avatar_image.RelPermalink }}
+    {{ end }}
+    {{ if $src }}
+      <a href="{{ $link}}"><img class="portrait" src="{{ $src }}" alt="Avatar"></a>
+    {{ end }}
+
+    <div class="portrait-title">
+      <h2><a href="{{ $link }}">{{ .Params.name }}</a></h2>
+      {{ with .Params.role }}<h3>{{ . | markdownify | emojify }}</h3>{{ end }}
+      {{ with .Params.interests }}<p class="people-interests">{{ delimit . ", " | markdownify | emojify }}</p>{{ end }}
+    </div>
+  </div>
+
+  {{ end }}
+  {{ end }}
+</div>