[Resolved] Uploading a photo on Add New User form prevents user from completing form

[Author]

Posts

[simonM-5]

I am trying to:
Upload a photo as a profile photo.

Link to a page where the issue can be seen:
hidden link

I expected to see:
After uploading the photo (an iPhone selfie, converted to .jpg, or just an iPhone photo (.heic)) as my profile photo, I expect to be able to see the photo and complete the rest of the Edit User form and save my details.

Instead, I got:
After uploading the photo, the photo takes up the whole available browser height and the Edit User form does not show the remaining fields of the form or the Update Profile button (ie Submit button).

We have just tested and discovered the behaviour is very different on different browsers:
1) On iPhone Safari everything works great.
2) On Safari on macOS Catalina, none of the remaining fields can be reached when attempting to scroll to the bottom of the page.
3) On Chrome on macOS Catalina, some of the remaining fields can be seen at the bottom of the screen, however not all and the Update Profile button is not accessible even if the user tries to scroll to the very bottom.
4) On Chrome on Windows, the behaviour is the same is as Safari on Mac, none of the remaining fields are available to edit and the Update Profile button is not visible.
5) On IE on Windows, behaviour is same - can't access remaining fields and update button.
6) On iPadOS, Mobile version, after uploading the photo, a grey panel appears on the right and obscures the upload button, in portrait and landscape modes.
7) On iPadOS, Desktop version, it works great.

If you want to reproduce this you can do so at
CREATE NEW NATIVE NANNY USER:
hidden link

To edit your profile, once successfully logged in, go to Account > Edit Profile (first link)

Please note, the Email notifications are not working yet (ongoing open ticket with Toolset), so you'll have to remember your password when signing up.

Ideally we would want uploaded photos to be shrunk on size when they are uploaded automatically. Is there a way to achieve this using Toolset?

Thanks and best regards
Simon

[Shane]

Hi Simon,

Would it be possible to convert the account that i've created to an admin account so that I can check on this for you in some more detail?

If not then you can just create a fresh set of admin credentials for me so that I can use the ones i've created to test the form.

It could be related to how the page was built.

Thanks,
Shane

[simonM-5]

Shane, upgraded you to an admin..

Please change title of request to: Uploading a photo on Edit User form prevents user from completing form

Really gotta run now! Thanks

[simonM-5]

Hi Shane

Do you have any more updates here?

In the meantime, we downloaded and tried Smush and another plugin called Resize Image After Upload.

1) Even with these plugins, which reduce the photo to dimensions 300px x 300px, we are still having the issue with the browser height and not being able to scroll to the Submit button.

2) Secondly, when we go to Account > Edit Profile, the current photo is not displayed in the Profile either.

Some information for your testing: when we start the process of Account > Edit Profile in full screen mode in the browser, the button is not reachable, however, if the user then resizes the browser window, then scrolling to the button is possible again.

Can you please update us on the current status of this Toolset bug with the custom Image field?

Thanks and regards
Simon

[Shane]

Hi Simon,

I've been running some tests on this one.

I would suggest that you report this to the avada team since its an issue where their theme isn't readjusting correctly for the new height of the content.

This will pose a problem for any other plugin that would dynamically modify the height of a page, so its not unique to our Forms plugin.

"2) Secondly, when we go to Account > Edit Profile, the current photo is not displayed in the Profile either."

The photo won't be displayed unless the user manages to submit the form.

"Some information for your testing: when we start the process of Account > Edit Profile in full screen mode in the browser, the button is not reachable, however, if the user then resizes the browser window, then scrolling to the button is possible again."

Yes which means the theme is having issues adjusting to the size changes. Perhaps you can mention this to them as well.

Thanks,
Shane

[simonM-5]

Hi Shane

Thanks for that.

The weirdest thing - today the Profile Photo is showing correctly when we go to Edit Profile on a Nanny with an existing photo. We are successfully resizing all photos uploaded by users to 300px x 300px which looks good when we put it in a small profile photo with a circular format. We thought perhaps that you'd pulled some magic lever in the background we weren't aware of to get this working again. :-p

A quick question on that - if we as Admins need to upload a larger image, eg as a background pic or slider image etc, we would have to deactivate the plugin first, right? Or is there a way to allow admins to upload all sizes and just prevent site visitors from uploading large image files?

Regarding the sizing/scrolling/windows resizing issue of the browser - I guess we'll have to take that up with Avada.

Thanks and regards
Simon

[Christian Cox]

Hello, Shane is on holiday today and will return tomorrow to continue assisting you.

[Shane]

Hi Simon,

"A quick question on that - if we as Admins need to upload a larger image, eg as a background pic or slider image etc, we would have to deactivate the plugin first, right? Or is there a way to allow admins to upload all sizes and just prevent site visitors from uploading large image files?"

Are you referring to the Edit form and the profile image ? Could you perhaps provide a little more details on this.

From what i understand you are restricting the users from uploading images that are larger than 300px*300px?

Please let me know.

Thanks,
Shane

[simonM-5]

HI Shane

Not quite. We have installed the plugin "Resize Image After Upload" and it automatically shrinks all uploaded photos to 300px x 300 px, which is about perfect for little profile photos like we will need on our site.

However I can imagine in the course of development, that we as admins may need to upload a larger photo for purposes already stated. Is there a way to allow admins to always be able to upload any size of images but have users restricted to only be able to upload certain image sizes, eg by controlling Media Manager via Toolset Access or something like that?

For example on our site:
- I log in as admin, I can upload any size of image to the WP Media Library.
- I log in as a Native Nanny or a Family, I can only upload images of a certain size in MB.

Thanks and regards
Simon

[Shane]

Hi Simon,

"We have installed the plugin "Resize Image After Upload" and it automatically shrinks all uploaded photos to 300px x 300 px, which is about perfect for little profile photos like we will need on our site"

There is a way to do it by using the validation hook for image uploads to the site. Take a look at this thread below.
https://toolset.com/forums/topic/image-size-validation-for-multiple-images-on-form/

This should allow you to add a validation to your image field, however it will require that the image already be resized to 300*300

Please let me know what you think of this.

Thanks,
Shane

[simonM-5]

My issue is resolved now. Thank you!