Show Advanced KnowledgeHide Advanced Knowledge

Letter Avatars

1 Initial Problem

Most of the users don't upload a photo to their profile. Without profile pictures, the ILIAS platform looks quite anonymous.

2 Conceptual Summary

To make the learning community more good-looking in forums etc. users can pick from a pre-defined set of avatar pictures.


ILIAS defaults to a "no photo avatars" as standard profile picture by using just a colored form and the letters of your surname or/and name. Like Google, Invisionapp, Skype. Or like this: http://uttesh.com/ngletteravatar/.

2.1 Outlook

Not part of this requests.

• set gender-specific default avatars
• Note: There are some nice collections of free avatars, using the cc-license. ILIAS _could_ include some of them in its pre-configured state. However this is not part of this feature request (unless the JF decides otherwise): Avatar-Set (cc)

3 User Interface Modifications

3.1 List of Affected Views

Letter Avatars:

• Administration > User Administation > Settings
• All screens that show personal pictures / avatars

3.2 User Interface Details

Administration > User Administration > Settings

• A new checkbox "Letter Avatars" will be introduced that activated the feature.

All screens that show personal pictures / avatars

• If the personal profile is published and a personal picture has been uploaded, the personal picture will be shown (as before).
• If the personal profile is published and no personal picture has been uploaded, the initials (first letter of firstname and lastname) of the user will be shown with a colored background.
• If the personal profile is not published the first two letters of the account name / login will be shown with a colored background.

3.3 New User Interface Concepts

No new concepts. The existing personal pictures get another content, if no public personal picture is being provided.

4 Technical Information

The letter avatar is a short SVG being generated by a template "on the fly" (like the rest of the generated HTML). The SVG is not stored as a file. The content is provided in-line in the img tag (src="data:image/svg+xml,...").

5 Contact

• Author of the Request: Hesse, Joel [Joel_Hesse] Parfümerie Douglas GmbH
• Maintainer: Meyer, Stefan [smeyer] Killing, Alexander [alex] Jansen, Michael [mjansen]
• Implementation of the feature is done by: Killing, Alexander [alex]

6 Funding

If you are interest in funding this feature, please add your name and institution to this list.

• Hesse, Joel [Joel_Hesse] Parfümerie Douglas GmbH

7 Discussion

JF 5 Jan 2015: We appreciate the idea. It should be possible to upload a set of "standard" avatars in the administration. ILIAS will not come with a predefined set.

Killing, Alexander [alex], 25 Jan 2017: @Colin, I think it would be good to explain a little bit more in detail, how this will be achieved in the user interface. I tried to do this in my offer. You may copy/paste this here.

Seiler, Yvonne [yvseiler], 09 Feb 2017: I like the way how other services uses "no photo avatars" as standard profile picture by using just a colored form and the letters of your surname or/and name. Like Google, Invisionapp, Skype. Or like this: http://uttesh.com/ngletteravatar/

I think this would be a more generic way and would solve the problem, that most user doesn't go into their personal profile to upload an own or to change a default picture to an avatar picture. ILIAS could just set a "letter profile picture" corresponding with username or (sur)name and give it a background color (possible corresponding with system or content style of a ILIAS installation.

Don't know if something like this was discussed yet.

Kiegel, Colin [kiegel] 2017-02-03: Matthias Kunkel asked me to adapt this feature request to the new template. The original request has already been scheduled in the past.

Personally I also like the idea of just having simple coloured letter-codes as fallback. It's main advantage is, that it comes without any UI changes. Additionally it can be assigned to a user automatically without knowing the gender, skin color, etc. whereas pre-defined avatars can not be assigned automatically. I added it as "alternative" in the proposal.  I was not able to discuss this suggestion with Douglas yet, but I would like the Jour Fixe to consider both alternatives individually - such that Douglas could still decide which variant they want to fund.

JourFixe, ILIAS [jourfixe], FEB 13, 2017: We postpone the decision because we have two sound alternatives (http://uttesh.com/ngletteravatar/ and http://identicon.net) which would have the big advantage that no default avatars need to be designed and uploaded but are created automatically. This would also lead to a bigger variety of avatars. We ask the party interested in funding if this alternative solution would be appreciated as well.

Killing, Alexander [alex], 13 Feb 2017: We could also try to implement something similar to https://robohash.org/

Killing, Alexander [alex], 12 June 2017: I have now implemented a "Letter Avatar" solution as being proposed by various people and the Jour Fixe. The customer also supports this idea.

Amstutz, Timon [amstutz], 12 June 2017: @Killing, Alexander [alex] Thank you very much for this implementation. We like this solution! Three rather minor points:

• Why do you display the abreviation in lower case? We would prefer upper.
• What happens if the second character is not a letter, e.g. t.amstutz? Will the abreviation be t. or ta?
• Could circles help the issue with borders not beeing equal on each side?

Also, how do you chose colors here? Is that a system we could reuse for the calendar?

[Edit]: Just stumbled upon this in the github discussion: PR #550, the coloring question seems to be related.

Schmid, Fabian [fschmid], 14 June 2017: Nice, thank you for the implementation. I'd also prefer the uppercase version.

Klees, Richard [rklees] The UI Icon PR already implements visuals for that functionality.

JourFixe, ILIAS [jourfixe], June 26, 2017: We highly appreciate this suggestion and schedule it for 5.3. Please check

• if style classes could be used for the background colour of the letter avatars
• if a class is available that can generate avatars with only characters (ta instead of t. for user name t.amstutz)
• UI Icon could be used to generate letter avatars in a later version

Hesse, Joel [Joel_Hesse] 14.08.2017: Looking good, thanks!

8 Implementation

New setting in the administration (User Administration > Settings):

Letter avatars in the top bar and the who is online tool:

Test Cases

Test cases completed at 10.08.2017 by ezenzen

• C18617: Letter Avatare aktivieren

Approval

Approved at 14.08.2017 by Hesse, Joel [Joel_Hesse].