Profile picture is distorted if not square

[arthurzenika]

• Operating System (Linux/Mac/Windows/iOS/Android): Ubuntu Focal
• Delta Chat Version: 1.4.3 via deb packages
• Expected behavior:

• Actual behavior:

[Simon-Laux]

We should make sure it is square than, maybe with a crop dialog like on android.

[gerryfrancis]

I think the image could also be cropped to a circle, that would be nice! (E.g., Github has changed avatars from squares to circles recently.)

[EchedelleLR]

I think that crop to square and show it in a circle (hiding overflowed part) would be better since apps like whatsapp or similar do that allowing the picture to be showed completely when clicking on it.

With https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path set in a box (block type html tag) where the image is loaded can be set easily.

UPDATED: as you can see in the examples, the image fits a bigger part and the css property just "shows it" in the desired way. In this case, however, they applied the property directly to the image.

[EchedelleLR]

Well, maybe I misread the issue and is just being used already, the thing is that I maintain my opinion about squares are better.

[r10s]

We should make sure it is square than, maybe with a crop dialog like on android.

or, maybe there is some css option that does this center+crop while keeping aspect ratio? that might be the simplest solution for now. and would probably also be needed for existing images or images from other sources.

core could also force a square, however, as by the "enlarge" we do show all of the image there is some sense in keeping all details.

[EchedelleLR]

or, maybe there is some css option that does this center+crop while keeping aspect ratio?

Clip-path could do something better... ?? <.<

[gerryfrancis]

Some more information about clip-path: https://www.w3schools.com/cssref/css3_pr_clip-path.asp

[Simon-Laux]

we could just crop it, I don't like css hacks to do hide the problem.
some libs I found with a quick search:
https://foliotek.github.io/Croppie/
https://fengyuanchen.github.io/cropperjs/
https://github.com/thegreatercurve/react-simple-crop/
https://github.com/DominicTobias/react-image-crop#usage/

[EchedelleLR]

Sorry. Just think in the other idea.

[farooqkz]

I can't reproduce it on 1.38.1
Maybe it has been fixed?

[Simon-Laux]

I can't reproduce it on 1.38.1
Maybe it has been fixed?

just tried it, I can reproduce it, you need an image that does not have 1:1 aspect ratio. I think we really need some image cropper here. (but a good one without too many dependencies)