Round avatars in topic list?

ux
21

It’s just CSS, so

img.avatar {
  border-radius: 100px;
}

vs

img.avatar {
  border-radius: none;
}
6 Likes
22

We have a Staff member that has a png with transparency that makes it look round.

Seems if someone wanted a round avatar they could do likewise.

IMHO if one really wants to improve on the “wall of avatars” showing only 2 instead of 5 would be the thing to do.

23

The reasons are in the first post, and followed up on by our designer with additional detail, I suggest re-reading those posts if you need a refresher :wink:

nb: but you can also reduce the # of avatars in the Users field via pure CSS as well.

24

I’m definitely okay with this change since it will be via CSS. I don’t see a big deal with it, anyone who dislikes it can easily change it via a single CSS rule. Those type of UI changes I am all for! :smile:

2 Likes
25

I’m cool with the new default.

I feel like somehow the ‘blue glow’ styling for last poster doesn’t work so well with the new rounded avatars though…

Not sure if its a positioning issue or something more fundamental about putting that kind of border on something round… anyone else think it looks a little strange right now? Like a cigar burn?

3 Likes
26

Tweaking the blur radius and spread radius a bit might be better

27

Seeing the round avatars currently in use here on meta, I prefer the square.

28

I’m more a dev than a designer so my “taste” in style is dubious at best.

My my main conern is that for some (eg. where the avatar is more a logo) something “important” might be cropped out.

So far I haven’t seen any “broken”, but I guess for those members so affected they’ll either squawk or upload something different.

eg. to me, @riking 's “oval bowl with short spoon handle” looks a bit odd with less of the white background, but I wouldn’t call it broken.

1 Like
29

Agreed. However, since there is unlikely to be a reversion, I’d like to reiterate my previous suggestions:

  1. Preview the round avatar at upload. This is the bare minimum requirement.
  2. Allow the user to select what part of their uploaded image is displayed (as mocked in @awesomerobot’s post here). This would be preferred.
8 Likes
30

Agreed. If any cropping is to be done the member should have some say in what is cropped, or at least a “preview”

2 Likes
31

The preview works fine cause you need to click save after uploading anyway.

For my theme I went with a more conservative border-radius of 3px.

I agree with @mcwumbly this does strongly highlight the need for a cleaner way of sharing customizations and shipping with multiple themes.

Unlike the category badge I agree there is no reason to add a site setting here, it all fits in a single CSS rule.

Adding an image editor / cropper feels like tons of work to me, not against it, just not something I see core team working on in the next 12 months.

6 Likes
32

Yes, I’m sure it would be a lot of work. And as long as a member has the ability to see a “oh, that doesn’t look good, I’ll try again” the “work” can be passed to the member.

And I understand that it’s important and necessary to take time away from the more pressing matters

But I also understand how doing something that I would consider a minor “tweak” can have unforeseen consequences.

I guess the impact can’t and won’t be able to be assessed until affected members provide feedback.

2 Likes
34

Try doing a hard reload? In chrome, open dev tools, click+drag down the refresh button.

35

Isn’t that the same as ctrl+f5?

37

Finally got a proper chance to see the round avatars in action; it’s… OK, actually! They work pretty well in the topic list, and aren’t too bad in topics themselves. I still prefer square, or maybe 5px rounded corners, but round I can live with.

And since it’s pure CSS, and easily tweaked:
https://www.youtube.com/watch?v=ussCHoQttyQ

1 Like
40

Neither am I now - but clearly I was two hours ago. :smiley:

1 Like
41

Thanks for chopping half my head off. I appreciate it.

14 Likes
42

You actually look nicer with half your head off :stuck_out_tongue_winking_eye:

1 Like
43

I dare anyone to chop my head off with this change. :wink:

1 Like
46

That’s a great change, congrats.

Where I work we recently changed avatars to rounded and they go away better with the overall flat design.

And this will be one less thing to customize when we deploy discourse in house, which is scheduled to next semester.

1 Like