Round avatars in topic list?


(-cvf meta.discourse.tbz) #53

I’m going to post this here for anyone who has Stylish installed and wants the square avatars back.

img {
  border-radius: 0px;
}

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

(Christopher Heald) #56

I was all for this. I was excited!

And then I saw my rounded avatar…


(Mittineague) #57

Not impossible to do if you don’t mind smaller

* square diagonal <= circle diameter


#59

looks
better
:grinning:


(TechnoBear) #68

Just a comment, but I find it harder to work out at a glance who’s who from the circular avatars. Perhaps it’s because they’re smaller in area. Perhaps because most members set up their avatars to display square, and if they were optimised for circular display there would be less/no problem. Perhaps it’s simply that I’m not yet used to it. Whatever the cause, I’m finding it a bit uncomfortable.


(Donal Fellows) #80

This sort of visual thing would be fine to have as an option for user avatars (possibly even one enabled by default) but it would be nice if a user could turn it off. It makes things more complicated, but sometimes it’s necessary to get things like official logos right.

As a case in point, forcing a circle would badly mangle the Discourse logo.

Re shadows/glows to indicate the most recent poster, I’m happy enough without that information being anything more than a subtle hint. If I really care, I’ll read the topic…


(Mittineague) #93

The biggest issue I’ve seen probably won’t be for new members because they will notice when they upload a custom avatar and correct for any undesirable effect.

But existing members may not notice that “their heads are chopped” (seems the most common) or that the “design” is off because of missing corners (eg. System avatar) and their avatars will look off to other members until they change them.


(Christopher Heald) #94

Avatar now fixed. At least until the next round. :slight_smile:


#95

Oh god, you cheated :stuck_out_tongue:


(Soviut) #96

This issue technically already exists since the square avatar shape might cut off edges of portrait or landscape rectangular images. Regardless of square or round avatars, this could be mitigated by having a preview of what the avatar looks like when a user uploads one.


(Mittineague) #97

There is that. The problem is it might be a problem for those that uploaded before the change to round.


(Soviut) #98

That’s true, but they can still see their rounded avatar in the top right corner of the site to verify if it looks strange or not. Then again, if they’re infrequent visitors, they may not notice it for a long time/ever.


#99

Fix: Round all of the things.
* { border-radius:1000px; }


#100

Does the upload actually crop the image or only adjust how it is displayed? If the former, then any change to the avatar is just a one-time change.

These other changes being discussed are all CSS changes as best I recall, which means that an avatar that was fine to start with may suddenly start being displayed in a way that the user would not like, simply because of an arbitrary CSS change.


(Mittineague) #101

AFAIK it only crops if the image isn’t square, else it’s resized. eg.

original image

warning

cropped image

my original

the saved version

The “cropping” of square images isn’t actual cropping but is a result of site CSS rules applied to it to display it round


(TechnoBear) #102

When I uploaded my avatar originally, I had to redo it to make it square, because otherwise it was cropped to display just the middle section. When circular avatars were introduced, I had to amend it again, because it didn’t fit within the diameter of the circle. I imagine that would be quite a common issue.


(Jesse Perry) #103

Anyone else seeing this on the deleted posts area of a user when logged in as admin?


(Mittineague) #104

Yes

Though personally, if this is only seen by Mods and this is the only place exhibiting this bug I can live with it.


(Jens Maier) #105

https://github.com/discourse/discourse/pull/3348


#106

By the way, it just occured to me that Github oneboxes could use this too.

Perhaps we need a .onebox-avatar {border-radius: 50%;} line inside onebox/web/assets/stylesheets/style.css?