feat: add support for displaying square avatars

Also, make About widget avatar responsive, appearing larger on large devices.

BREAKING CHANGE:
`gravatar` option moved under new `[avatar]` section in `params.toml`.
`shape` option added under new `[avatar]` section in `params.toml`.

Close #1509

assets/scss/academic/_content.scss

@@ -267,12 +267,9 @@ ul.share li:hover i {
  *  Author profile card
  **************************************************/
 
-.author-card .portrait {
+.author-card .avatar {
   width: 60px;
   height: 60px;
-  margin: 0 auto;
-  border-radius: 50%;
-  object-fit: cover;
 }
 
 .author-card .card-title {

assets/scss/academic/_widgets.scss

@@ -265,14 +265,29 @@ a.hero-cta-alt:hover {
   position: relative;
 }
 
-.portrait {
-  width: 200px;
-  height: 200px;
+.avatar {
+  width: 270px;
+  height: 270px;
   margin: 0 auto;
-  border-radius: 50%;
   object-fit: cover;
 }
 
+// Use smaller avatar size in About widget on small devices.
+@include media-breakpoint-down(sm) {
+  .wg-about .avatar {
+    width: 200px;
+    height: 200px;
+  }
+}
+
+.avatar-circle {
+  border-radius: 50%;
+}
+
+.avatar-square {
+  border-radius: 3px;
+}
+
 .portrait-title h2 {
   font-size: 1.75em;
   font-weight: 300;
@@ -511,7 +526,7 @@ ul.ul-edu li .description p.institution {
   font-size: 0.7rem;
 }
 
-.people-widget .portrait {
+.people-widget .avatar {
   width: 80%;
   max-width: 150px;
   height: auto;

exampleSite/config/_default/params.toml

@@ -139,9 +139,6 @@ address_format = "en-us"
 ## Advanced
 ############################
 
-# Get user avatars from Gravatar.com? (true/false)
-gravatar = false
-
 # Main menu alignment (l = left, c = center, r = right) and logo options.
 main_menu = {align = "l", show_logo = true}
 
@@ -162,6 +159,16 @@ link_authors = true
 #   E.g. To load `/assets/js/custom.js`, set `plugins_js = ["custom"]`.
 plugins_js  = []
 
+# Avatars.
+# An avatar is an image that appears next to a user's name.
+# An avatar can be uploaded as an image named `avatar` to each user's profile or fetched from Gravatar.com.
+[avatar]
+  # Get user avatars from Gravatar.com? (true/false)
+  gravatar = false
+
+  # Choose a shape for avatar images. Options: circle, square.
+  shape = "circle"
+
 # Available address formats.
 [address_formats]
   en-us = {order = ['street', 'city', 'region', 'postcode'], delimiters = [', ', ', ', ' ', '']}

layouts/partials/page_author.html

@@ -27,12 +27,13 @@
     {{ $profile_url = site.BaseURL }}
   {{ end }}
   {{ $avatar := (.Resources.ByType "image").GetMatch "*avatar*" }}
+  {{ $avatar_shape := site.Params.avatar.shape | default "circle" }}
   <div class="media author-card content-widget-hr">
-    {{ if and site.Params.gravatar .Params.email }}
-      <img class="portrait mr-3" src="https://s.gravatar.com/avatar/{{ md5 .Params.email }}?s=200')" alt="Avatar">
+    {{ if and site.Params.avatar.gravatar .Params.email }}
+      <img class="avatar mr-3 {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="https://s.gravatar.com/avatar/{{ md5 .Params.email }}?s=200')" alt="Avatar">
     {{ else if $avatar }}
-      {{ $avatar_image := $avatar.Fill "250x250 Center" }}
-      <img class="portrait mr-3" src="{{ $avatar_image.RelPermalink }}" alt="Avatar">
+      {{ $avatar_image := $avatar.Fill "200x200 Center" }}
+      <img class="avatar mr-3 {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="{{ $avatar_image.RelPermalink }}" alt="Avatar">
     {{ end }}
 
     <div class="media-body">

layouts/partials/widgets/about.html

@@ -15,17 +15,18 @@
 {{end}}
 {{ $person := $person_page.Params }}
 {{ $avatar := ($person_page.Resources.ByType "image").GetMatch "*avatar*" }}
+{{ $avatar_shape := site.Params.avatar.shape | default "circle" }}
 
 <!-- About widget -->
 <div class="row">
   <div class="col-12 col-lg-4">
     <div id="profile">
 
-      {{ if site.Params.gravatar }}
-      <img class="portrait" src="https://s.gravatar.com/avatar/{{ md5 $person.email }}?s=200')" alt="Avatar">
+      {{ if site.Params.avatar.gravatar }}
+      <img class="avatar {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="https://s.gravatar.com/avatar/{{ md5 $person.email }}?s=270')" alt="Avatar">
       {{ else if $avatar }}
-      {{ $avatar_image := $avatar.Fill "250x250 Center" }}
-      <img class="portrait" src="{{ $avatar_image.RelPermalink }}" alt="Avatar">
+      {{ $avatar_image := $avatar.Fill "270x270 Center" }}
+      <img class="avatar {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="{{ $avatar_image.RelPermalink }}" alt="Avatar">
       {{ end }}
 
       <div class="portrait-title">

layouts/partials/widgets/people.html

@@ -38,14 +38,15 @@
   {{ end }}
   <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) }}
+    {{ if site.Params.avatar.gravatar }}
+      {{ $src = printf "https://s.gravatar.com/avatar/%s?s=150" (md5 .Params.email) }}
     {{ else if $avatar }}
       {{ $avatar_image := $avatar.Fill "150x150 Center" }}
       {{ $src = $avatar_image.RelPermalink }}
     {{ end }}
     {{ if $src }}
-      {{with $link}}<a href="{{.}}">{{end}}<img class="portrait" src="{{ $src }}" alt="Avatar">{{if $link}}</a>{{end}}
+      {{ $avatar_shape := site.Params.avatar.shape | default "circle" }}
+      {{with $link}}<a href="{{.}}">{{end}}<img class="avatar {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="{{ $src }}" alt="Avatar">{{if $link}}</a>{{end}}
     {{ end }}
 
     <div class="portrait-title">