Skip to content
Permalink
Browse files

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
  • Loading branch information
gcushen committed Jan 12, 2020
1 parent db716b2 commit 1a3efac2968e2839b4fd27d9a33326c9e5e3e301
@@ -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 {
@@ -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;
@@ -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 = [', ', ', ', ' ', '']}

Large diffs are not rendered by default.

Binary file not shown.
@@ -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">
@@ -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">
@@ -38,14 +38,15 @@ <h2 class="mb-4">{{ . | markdownify }}</h2>
{{ 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">

0 comments on commit 1a3efac

Please sign in to comment.
You can’t perform that action at this time.