Open NateWr opened 1 year ago
After reading through a lot of GDPR constraints, I think we should stick to just doing this: the system should generate an avatar from their initials. These should use different colors so that they can be distinguished by initials and color when they appear alongside other avatars. An example of generating SVG avatars is here: https://tqdev.com/2022-generate-avatars-initials-php.
I think this will make the process less complicated and more streamlined
Describe the problem you would like to solve Several UX mockups for the new submissions lists (#7495) make use of user avatars. These will help editors quickly identify other editorial staff in assignments, discussions, and when using the "logged in as" facility.
Describe the solution you'd like When a user uploads a photo to their user profile image, create a copy of that photo that is cropped to be square and in appropriate avatar sizes.
For users who don't have a user profile, the system should generate a backup avatar from their initials. These should use different colors so that they can be distinguished by initials and color when they appear alongside other avatars. An example of generating SVG avatars is here: https://tqdev.com/2022-generate-avatars-initials-php.
Who is asking for this feature? This will enhance the assigned editors in the summary panel (https://github.com/pkp/pkp-lib/issues/8890), the discussions in the summary panel (https://github.com/pkp/pkp-lib/issues/8896), and the logged-in user profile in the site sidebar (https://github.com/pkp/pkp-lib/issues/8879).
Additional information Ideally, an open source image processing library should be used. This will allow us to generate images in appropriate formats (png, jpeg, webp) and with appropriate compression.
Avatars should be saved in a public directory so that they can be loaded with a URL directly to the file. This will ensure they can be cached by the browser to prevent lots of extra requests for each page.
Avatars should be created at 1x and 2x screen densities. Then
<picture>
and<source>
tags can be used to serve the correct one to save on screen size.Avatars should be saved as squares, not circles. The circle effect can be applied through CSS.
A migration should be written to generate avatars from any existing user profile images.