New avatar uploader on mobile Safari broken

[modemlooper]

When you take an image from camera browser crashes.

When taking a landscape image the image is cut off.

See images.

[modemlooper]

the image

[modemlooper]

the cropper cut off image

[modemlooper]

only images from library work and an image taken in landscape has issue.

[imath]

Ok thanks for reporting this issue. Haven't noticed this before, so i'll recheck to see if i'm able to reproduce and find a fix.

[imath]

Replying to modemlooper:

only images from library work

For me taking an image using the camera does not crash at all !! See this screen capture :

image taken in landscape has issue

I'd say it depends if you are using your phone in landscape mode to set your avatar, because in this case, there's no issue: see previous screen capture and following one with the image you added on this ticket:

There's only a problem when using the portrait mode to set an avatar, in this case the image is "cut off" on the right side.

So i've read your advices about this ticket #4859 (using a max width set to 280px). So i guess we could use this size in case of wp_is_mobile() and that's what i've done in 6586.patch, so in portrait mode we get:

But then, in landscape mode, we have a big white space on the right...

So i think 6586.patch would solve the problem for this ticket and #4859. But i also think we could improve it by having two images at our disposal and choose within avatar.js which one to use depending on the available width of the browser. I'll keep on working on it soon.

[imath]

I've been thinking about this ticket. And i think we should simply send the Avatar UI width and adapt our BP_Attachment_Avatar->shrink() method to take this into accout.

280 pixels could be "too bad" for some mobile resolutions :)

See 6586.02.patch. I'll test this patch on the test drive and if it's fixing the issue and there are no objections, i'll commit it.

[DJPaul]

I am concerned with setting the maximum crop width of an image to the width of the user's browser. It does not sound robust because would the image not have the wrong size if you switched between desktop and mobile, etc?

I think we need to understand this a bit more before it's committed.

[imath]

Thanks for your feedback @DJPaul

It's not about the crop width of an avatar, the image concerned is a temporary one (it's deleted once the avatar is set): the one used to crop the avatar once uploaded.

So i don't think there is any trouble about this, as i'm making sure to keep a max > avatar full width if the Avatar UI container width (= what i've called $browser_max_width) is too small.

It has no impact on the generated avatar in the end: avatar full = 150x150 avatar thumb = 50x50.

$browser_max_width is confusing, maybe i should use $avatar_ui_width instead

[imath]

Well i confirm the patch makes it much better on the iPhone :)
I've used @modemlooper's image and as you can see, i can see the full image, it's not truncated at the right, and in the end i got a regular avatar see ​http://imath-buddypress.wpserveur.net/groups/iphone-after-6586-02/

[DJPaul]

Ok, go for it.

[imath]

Thanks for your feedback @DJPaul :)

Will commit it in a few hours

[imath]

In 10206:

Avatar UI: make sure to display the full content of the image during the cropping step.

When a user uploads an image to set his avatar, we are saving a temporary version of it resized using the bp_core_avatar_original_max_width() dimension (by default 450px). This resized image will be output to the user so that he can edit it during the cropping step. Once the avatar is saved, we are deleting this temporary image.

Sometimes, the Avatar UI width is smaller than this resized version of the image and as a result the image is truncated on its right side (this mainly happens on mobile devices). To avoid this, the Avatar UI is now informing about its available width and if it is smaller than bp_core_avatar_original_max_width(). This available width will be used to generate the tempory image so that the full content of the image will be displayed to the user when cropping his avatar.

Fixes #6586