Usercard Redesign Experiment

[sam (Sam Saffron)]

Quick bug report.

When you click through to a badge it leaves the card up during the transition. It should hide it early. (Firefox Linux)

[Canapin (Coin-coin le Canapin)]

@mattdm

• The background generated from my avatar is… kinda hideous, yeah?

Discord does an interesting thing for their default user card banner. They use the average flat color from the user’s avatar.

Example:

Using https://matkl.github.io/average-color/:

[twofoursixeight]

Here is my example of this:

They are not the same, however.

Update: I hit a preset color, causing the colors to not be the same. (my bad)

[mattdm (Matthew Miller)]

Hmmm. Not sure what’s going on there. Expected more blue!

[merefield (Robert)]

@Canapin

Discord does an interesting thing for their default user card banner. They use the average flat color from the user’s avatar.

FYI similar is done in Discourse: in Topic List Previews, although it’s using “Dominant Colour”, not “average”

I suspect Dominant Colour will give better results.

[nathank (Nathan Kershaw)]

Is this bug being addressed as part of this redesign?

When a watched-word-link is in a user field, it is changed to the HTML link (and it looks terrible)

When a user puts a watched word into a user field, strange things happen. This is an example using the User Field Employer(s), and having Te Whatu Ora as a watched word link. Baseline: [image] Changed field to Te Whatu Ora: [image] It also changed the field itself: [image] Suggestion That watched-words-links are modified so that they do not apply to user_fields. Not sure about other watched words (didn’t test them).

It is a bit upstream from the User Card I know, but causes a significant problem on the User Cards when they clash with Watched Words.

[nat (Natalie T)]

Just to close the loop Nathan:

When a watched-word-link is in a user field, it is changed to the HTML link (and it looks terrible)

We’ve removed watch words link replacement for custom user fields, updating tests-passed would get you the update!

[AquaL1te]

This is added in the new update:

Add google maps link via site setting to user location

Would be awesome to also have support for OpenStreetMap.

[jordan-vidrine]

This is added now You can now decide on using either Google Maps or OpenStreetMap in the settings

[Joseph_Hansen]

I think it’s a good redesign overall, but I think it’s important to have badge labels. Being able to distinguish between badges with the same icon at a glance is really important for a quick preview like this. For example, without the label, you can’t tell if this icon:

is a Famous Link, Great Reply, or Great Topic (as they’re configured on our site, YMMV). It’s even worse for the Getting Started category of badges- there are 16 badges that share the exact same icon there, with vastly different implications. It’s important for me as a moderator to be able to see when someone has a badge for reading the guidelines, for instance, but with this new design, that badge looks the same as 15 other highly different badges (including things like First Onebox and New User of the Month)

[kynic]

Please make it optional when you guys add this new user card to the discourse. The old one is much better than this new one and not to say that it adds a weird background color to the card which looks awful. and it does not show anything on the user card no info there.

Overall I don’t like it so would ask you please don’t force this on the discourse when you guys add this to the discourse.

[jordan-vidrine]

We’d love to know what you like about the old design!

@kynic

it does not show anything on the user card no info there.

Could you expound on this? I see information when I click on your card and mine as well.

[kynic]

@jordan-vidrine

New one

[jordan-vidrine]

Are you using this on your own forum?

[darkpixlz]

@kynic

New one

That looks like it’s my theme based on the transparency. We’ve been talking for a while now with all of the issues you have had and I’m not sure how much longer I can help unfortunately because the issues aren’t in the actual theme, rather incompatibilities I can’t seem to find.

[jordan-vidrine]

Any errors in your console?

[kynic]

I was thinking this could be a theme compatibility issue.

@jordan-vidrine

Any errors in your console?

nope.

btw, I would like to put my opinion the background color looks unpleasant when it picks the same color as the profile image. it would be better if you put a default background image or something rather than a profile color on the background. and the background should be blurred as this

[darkpixlz]

@kynic

and the background should be blurred as this

personally, i really like it. this should be on a site level setting because i see people don’t really like it, but i think it’s great

@kynic

I was thinking this could be a theme compatibility issue.

working fine for me:

[mattdm (Matthew Miller)]

This has been low-key bugging me, so after some looking, I found

ColorFinder: Find the most prominent color in an image

… which I think does a much better job for this purpose than taking the average. Examples from people’s avatars in this thread:

Code here: color-finder/colorfinder-1.1.js at master · pieroxy/color-finder · GitHub

[jordan-vidrine]

@mattdm

… which I think does a much better job for this purpose than taking the average. Examples from people’s avatars in this thread:

This is my intent to eventually switch to this sort of pattern. The issue at hand though is that due to images being hosted on a CDN, this sort of thing doesnt work.

NOTE: Due to restrictions to the canvas object, this works only if the image comes from your own domain.

We have something that does this for images in our rails backend, but I am not able to access it via theme component. Since this is just an experiment for now I think I’ll hold off on this until it is easier to do.