PLIP: User portrait, allow SVG images as a portrait. Allow site administrator to define dimensions of portrait

rber474 · February 25, 2024, 3:49pm

Hi!

I just have submitted a PLIP about implementing SVG files for user portrait and extending classic-ui displaying the portrait in the personal information page.

Please, read it and help to complete this.

github.com/plone/Products.CMFPlone

DRAFT: User portrait, allow SVG images as a portrait. Allow site administrator to define dimensions of portrait.

opened 11:32AM - 25 Feb 24 UTC

rber474

03 type: feature (plip)

## PLIP (Plone Improvement Proposal)  ## Responsible Persons ### Proposer: Rafael Bermúdez @rber474 ### Seconder: **Seconder needed** ## Abstract Following incident https://github.com/plone/plone.app.users/issues/122, where an exception occurred when loading an SVG image as a portrait in the "personal-information" view, the possibility has arisen for Plone to allow the use of this type of image as a personal icon or portrait. Currently, the image loading process on that screen involves scaling to 75x100 pixels, utilizing Pillow (PIL) to adjust the portrait. The portrait is used in the @@author view but is not displayed on the personal information screen, user searches, or utilized as an icon in the user menu. ## Motivation  Some users just use SVG images for their avatar or profile pictures and Plone doesn't offer that possibility out-of-the-box. As well, once the profile picture is upload, it's never displayed in the personal information view. ## Proposal & Implementation  ### Configurable settings - Introduce configuration options in the usersgroup control panel: - Allow administrators to adjust image dimensions. 🆕 The current portrait scaling method has the dimensions hardcoded not allowing to modify them without an override. - Allow administrators to show/hide all portraits. 🆕 - Correspondingly, modify Products.PlonePAS/utils.py to fetch these settings and scale the image accordingly. ### Allow SVG uploads - Refactor [Products.PlonePAS](https://github.com/plone/Products.PlonePAS) membership tool.py/changeMemberPortrait to verify whether the uploaded file is an `Image/svg+xml`, thus avoiding scaling. - Modify [Products.CMFPlone](https://github.com/plone/Products.CMFPlone) @@author view to adapt container attributes based on the configured settings, ensuring consistent aspect ratios across all image types. :new ### Show portrait across the site - Display the portrait in the @@personal-information view. :new - Add a small portrait to the edit-bar toolbar on the left side, next to the username. :new ### Advanced changes: - Allow users to adjust the image (position, zoom) after it's uploaded. ## Deliverables  - **[Products.PlonePAS](https://github.com/plone/Products.PlonePAS)**: - memberdata_tool.py - utils.py with the scale_image function - config.py with the static settings - **[Products.CMFPlone](https://github.com/plone/Products.CMFPlone)**: - MemberGroup settings controlpanel: - `controlpanel.browser.usergroups.UsersGroupsControlPanelView` - Author view - **[plone.base](https://github.com/plone/plone.base)**: - Schema interface for MemberGroup settings `interfaces.controlpanel.IUsersGroupsSettingsSchema` - **[plone.app.users](https://github.com/plone/plone.app.users)**: - personal-information view - **[plone.app.layout](https://github.com/plone/plone.app.layout)**: - toolbar viewlet. - **Barceloneta.Theme** If any css added or edited. - **mockup and plone.staticresources** if any JS functionality is added (i.e: zoom or position change) - **plone.app.locales** ## Risks  - These changes could affect Volto UI somehow but I am not experienced enough to confirm it. - Unexpected behaviour if a bitmap image was put inside an SVG. ## Participants  - Rafael Bermúdez, @rber474, proposer/contributor. - Your name, GitHub username, Role -

Thanks