Skip to:

Opened 9 years ago

Closed 8 years ago

Last modified 8 years ago

#6586 closed defect (bug) (fixed)

New avatar uploader on mobile Safari broken

Reported by: modemlooper's profile modemlooper Owned by: imath's profile imath
Milestone: 2.4 Priority: normal
Severity: normal Version: 2.3.0
Component: Media Keywords: has-patch commit


When you take an image from camera browser crashes.

When taking a landscape image the image is cut off.

See images.

Attachments (5)

image.jpg (2.2 MB) - added by modemlooper 9 years ago.
the image
image.2.jpg (115.1 KB) - added by modemlooper 9 years ago.
the cropper cut off image
6586.patch (3.0 KB) - added by imath 9 years ago.
6586.02.patch (4.6 KB) - added by imath 8 years ago.
6586.02.jshint-ok.patch (4.5 KB) - added by imath 8 years ago.

Change History (17)

9 years ago

the image

9 years ago

the cropper cut off image

#1 follow-up: @modemlooper
9 years ago

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

#2 @imath
9 years ago

  • Owner set to imath
  • Status changed from new to assigned

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.

#3 in reply to: ↑ 1 @imath
9 years ago

  • Keywords has-patch added; needs-testing removed

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.

Last edited 9 years ago by imath (previous) (diff)

9 years ago

#4 @imath
9 years ago

  • Milestone changed from Awaiting Review to 2.4

#5 @imath
8 years ago

  • Component changed from Component - Members to API - Avatars
  • Version changed from 2.3.2 to 2.3.0

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.

Last edited 8 years ago by imath (previous) (diff)

8 years ago

#6 @DJPaul
8 years ago

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.

#7 @imath
8 years ago

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

#8 @imath
8 years ago

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

#9 @DJPaul
8 years ago

Ok, go for it.

#10 @imath
8 years ago

  • Keywords commit added

Thanks for your feedback @DJPaul :)

Will commit it in a few hours

#11 @imath
8 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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

#12 @DJPaul
8 years ago

  • Component changed from API - Avatars to Media
Note: See TracTickets for help on using tickets.