Make Profile and Canvas Photos Clickable and Easier to Upload and Edit

Having a profile pic and cover photo is super important to drive engagement and make the community look good. When most FB-friendly users log in to their profile for the first time, they assume that the profile pic and canvas photo will be clickable to edit/change.

Unfortunately, this is not yet the case and many users won't intuitively or easily work out that they need to:
-click the cog or icon up top
-click edit
-click to the Profile Pic tab
-upload a photo or choose an existing one

Clicking the profile pic or canvas photo should immediately bring up an option to upload/change pic.

1. Any plans to change this?

2. In the meanwhile, what's the easiest way to guide users to change their profile pic when they log in for the first time? I guess setting up an auto action/email could do the job but if they're using their mobiles, they'd have to remember the process or keep switching between screens.

3. Most users now upload photos from their phones. Often, these images end up being rotated by 90 degrees and/or are the wrong shape. Also, canvas photos sometimes end up being stretched. A module or function that allows users to rotate and crop images before finalising would be super useful! Please consider. Elseways, a plugin that allows admins to crop/rotate in the meanwhile would also be great.

That's doable with CB Core Fields Ajax. You however need to set the "Profile View Output" usage to "Tooltip" since there's not enough space for inline usage. The avatar position has a z-index problem though making it unclickable, but it's fixed with the below CSS.


I've added a feature ticket to add a cog template to the ajax edit usage so canvas could display a clickable cog icon instead of just being clickable. Below is what the canvas looks like being ajax editable.

3. Most users now upload photos from their phones. Often, these images end up being rotated by 90 degrees and/or are the wrong shape. Also, canvas photos sometimes end up being stretched. A module or function that allows users to rotate and crop images before finalising would be super useful! Please consider. Elseways, a plugin that allows admins to crop/rotate in the meanwhile would also be great.

This functionality is planned, but not until much later sorry. For now they need to upload with it already properly oriented.

Thanks Kyle.

Just installed the CB Core Fields Ajax plugin and it's working. Have changed the Avatar field settings as you recommended and added the CSS to the CB template.css but the avatar pic is still not clickable.

I've created a login for you and sent this through. If you could login and see where the problem is that would be great.

Cheers

David

Both the canvas and avatar usage need to be set to tooltip display for their ajax. The above CSS is needed to ensure the avatar can be clickable as other fields rendered there overlap it at this time. Ensure the CSS has loaded properly by right clicking and inspecting the page carefully.

Please do not send credentials I did not request. This is a know issue with a workaround provided above. I can not assist on implementing the workaround; that is up to you.