Fix avatar deformation in CSS#5990
Conversation
Of course it's worth it! It tortures me to see distorted avatars... and I didn't know about this property 😻 |
|
Actually, the avatar is saved in 4 versions, the original size, a "profile" size, a "big" size (no really big) and a "thumb" size, these are the sizes for each of them: original: a maximum of 3840 pixels You can see the different versions in your own image if you want 😎: https://meta-decidim-production.s3.amazonaws.com/uploads/decidim/user/avatar/26479/carol3.jpg As far as I know it is being used correctly in different places, but, if we are using a bigger image than the necessary in some place or other, it just a matter of change the view (but yes, still code). |
|
Then I'm mistaken. When I check with the browser inspector I always see the original image, that's why I thought only one image was generated. Anyways, |
The original image is shown when editing the profile form. In other places the others should be used. |
|
First of all, I ❤️ the fix on the aspect ratio!! Regarding the other problem we can open a new issue, but this is what @carolromero is commenting: |
|
@andreslucena yes, good idea. The issue should specify that it is required to perform a broad search where the avatar is rendered to ensure the proper size is used. Will you open the issue? |
Reported on #5997 |
Leusev
left a comment
There was a problem hiding this comment.
Look goods for me @microstudi ! 😄
Leusev
left a comment
There was a problem hiding this comment.
Looks good for me @microstudi
Could you solve changelog file conflict and it will be ready to go!
|
@Leusev should be solved now. |
* develop: Collapse and expand questions when editing questionnaire (decidim#6099) Projects budget votes and selected styles (decidim#5950) Fix avatar deformation in CSS (decidim#5990) Use organization time zone when decidim-api is used (decidim#6088)
* fix avatar deformation in CSS * add changelog * normalize js bundles # Conflicts: # decidim-core/app/assets/stylesheets/decidim/modules/_author-avatar.scss

🎩 What? Why?
Currently, if an user uses a non-square image for his avatar, it is presented in a rather weird way:

This can be fixed in CSS by using the property

object-fit:@carolromero @htmlboy what do you think? is it worthy?
📋 Subtasks
CHANGELOGentry