Server: Change avatar placeholder from single letter to 2 letters (Firstname Lastname)

Created on 7 Jan 2020  路  11Comments  路  Source: nextcloud/server

I want to change a text generated for an avatar image.

Now it only one symbol. For example, if my name Serge Shliakhov avatar will be white S letter with some background. I want to change this behavior to get SS text as a result.

I see two solutions

  • Simple solution. Rename getAvatarLetter to getAvatarText and change implementation to get the first letters from two first words in a display name, or one letter if it's only one word.
  • Let an app developer redefine the behavior. We can introduce IUserAvatarFactory interface for example and inject it to AvatarManager. Then instead hardcoded UserAvatar we can use the injected factory to create an avatar with a desired behavior.

Now I can redefine the behavior only if I copy/paste code of AvatarManager to my own class. I even can't extend it.

I'm ready to implement any solution if you don't mind and create pull request.

2. developing design enhancement

Most helpful comment

Did some research on others which show avatar placeholders, and most show 2: iOS, Skype, Signal for example.

Since only showing one letter is not very informative, we should also switch to using 2 letters in general:

  • Firstname and Lastname if available
  • If only one name is set, use only one letter
  • Ignore titles, nicknames or such

I'm ready to implement any solution if you don't mind and create pull request.

@matchish that would be great! @nextcloud/vuejs would this be something for the Vue components as well?

All 11 comments

I don't have a strong opinion on that.

cc @nextcloud/designers opinions?

I even can't extend it.

Extending from AvatarManager, changing the implementation and register your avatar manager with the container will not work?

cc @rullzer @ChristophWurst

I don't have a strong opinion on that.

cc @nextcloud/designers opinions?

I even can't extend it.

Extending from AvatarManager, changing the implementation and register your avatar manager with the container will not work?

I can't extend AvatarManager, userManager is private
Even if it will be protected if I extend AvatarManager then I should copy/paste code from getAvatar method. And if the original method will be changed then my class will be broken.

That's a drawback. Keep in mind there is also GuestAvatar extending Avatar. Probably instead of overwriting / injecting a custom UserAvatar / GuestAvatar a CustomAvatarTextStrategy is easier.

Did some research on others which show avatar placeholders, and most show 2: iOS, Skype, Signal for example.

Since only showing one letter is not very informative, we should also switch to using 2 letters in general:

  • Firstname and Lastname if available
  • If only one name is set, use only one letter
  • Ignore titles, nicknames or such

I'm ready to implement any solution if you don't mind and create pull request.

@matchish that would be great! @nextcloud/vuejs would this be something for the Vue components as well?

@nextcloud/vuejs would this be something for the Vue components as well?

maybe, but we're using the avatar endpoint as default, so if we have this, it's acting as a fallback :)

That's a drawback. Keep in mind there is also GuestAvatar extending Avatar. Probably instead of overwriting / injecting a custom UserAvatar / GuestAvatar a CustomAvatarTextStrategy is easier.

It's even better

Did some research on others which show avatar placeholders, and most show 2: iOS, Skype, Signal for example.

Since only showing one letter is not very informative, we should also switch to using 2 letters in general:

  • Firstname and Lastname if available
  • If only one name is set, use only one letter
  • Ignore titles, nicknames or such

I'm ready to implement any solution if you don't mind and create pull request.

@matchish that would be great! @nextcloud/vuejs would this be something for the Vue components as well?

I'm going just to change implementation of getAvatarLetter. No introduction CustomAvatarTextStrategy. I understand you right?

@matchish yes, no custom stuff or settings, we just change the default to show 2 (or 1 if only one name is set). :)

Can this be tested with 18.0.1 already ?

Thanks

Fixed by https://github.com/nextcloud/server/pull/18745

Will be part of Nextcloud 19.

Was this page helpful?
0 / 5 - 0 ratings