Skip to content

Fix avatar deformation in CSS#5990

Merged
tramuntanal merged 6 commits intodecidim:developfrom
Platoniq:fix/avatar-images
May 14, 2020
Merged

Fix avatar deformation in CSS#5990
tramuntanal merged 6 commits intodecidim:developfrom
Platoniq:fix/avatar-images

Conversation

@microstudi
Copy link
Copy Markdown
Contributor

🎩 What? Why?

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

This can be fixed in CSS by using the property object-fit:
image

@carolromero @htmlboy what do you think? is it worthy?

📋 Subtasks

  • Add CHANGELOG entry

@carolromero
Copy link
Copy Markdown
Member

@carolromero @htmlboy what do you think? is it worthy?

Of course it's worth it! It tortures me to see distorted avatars... and I didn't know about this property 😻
Related to this topic and just to check with you, some time ago we saw that the avatar is being saved with the original resolution of the image. I understand that this problem can't be solved only with CSS but by adding code, right?

@microstudi
Copy link
Copy Markdown
Contributor Author

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
profile: 536x640
big: 80x80
thumb: 40x40

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
https://meta-decidim-production.s3.amazonaws.com/uploads/decidim/user/avatar/26479/profile_carol3.jpg
https://meta-decidim-production.s3.amazonaws.com/uploads/decidim/user/avatar/26479/big_carol3.jpg
https://meta-decidim-production.s3.amazonaws.com/uploads/decidim/user/avatar/26479/thumb_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).

@carolromero
Copy link
Copy Markdown
Member

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, object-fit for the win 🚀

@microstudi
Copy link
Copy Markdown
Contributor Author

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, object-fit for the win rocket

The original image is shown when editing the profile form. In other places the others should be used.

@andreslucena
Copy link
Copy Markdown
Member

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:

imagen

@microstudi
Copy link
Copy Markdown
Contributor Author

@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?

@andreslucena
Copy link
Copy Markdown
Member

Will you open the issue?

Reported on #5997

@Leusev Leusev self-requested a review May 6, 2020 11:35
Copy link
Copy Markdown
Contributor

@Leusev Leusev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Look goods for me @microstudi ! 😄

@Leusev Leusev self-requested a review May 6, 2020 11:44
Copy link
Copy Markdown
Contributor

@Leusev Leusev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good for me @microstudi
Could you solve changelog file conflict and it will be ready to go!

@microstudi
Copy link
Copy Markdown
Contributor Author

@Leusev should be solved now.

@andreslucena andreslucena changed the title fix avatar deformation in CSS Fix avatar deformation in CSS May 11, 2020
tramuntanal
tramuntanal previously approved these changes May 14, 2020
@tramuntanal tramuntanal merged commit bdeff21 into decidim:develop May 14, 2020
ace pushed a commit to aspgems/decidim that referenced this pull request May 19, 2020
* 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)
@microstudi microstudi deleted the fix/avatar-images branch July 23, 2020 08:05
@microstudi microstudi mentioned this pull request Jul 23, 2020
13 tasks
microstudi added a commit to Platoniq/decidim that referenced this pull request Jul 23, 2020
* fix avatar deformation in CSS

* add changelog

* normalize js bundles
# Conflicts:
#	decidim-core/app/assets/stylesheets/decidim/modules/_author-avatar.scss
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants