[Resolved] Configure a user profile picture that supports Gravatar and custom upload

[Author]

Posts

[bastienB]

Hello guys,

The goal we want to achieve is to enable support for user profile pictures inside the WooCommerce My Account page.

We have added a custom tab in the WooCommerce My Account page where we display a picture using our theme Image element. FYI we use the Pro theme from Apex (also known as X-Theme).

When we click on this picture, we have a modal window that opens where we want to display the form for logged in users to change their profile picture. For this, we will use Toolset Forms.

We want to support different profile picture source with the order of priority as following:
=> Gravatar image
=> Default image
=> Custom image

When the user registers and creates an account, if they have a Gravatar this is the picture that should be shown by default.

If no Gravatar image is available, then it should display a default placeholder profile picture.

Finally, if the user uploads a custom image, then it should be the one displayed.

Before we start to talk about the form to upload/edit your profile picture, I want to make sure I have the proper approach to display the profile picture across the site.

Our theme has an "Image" element which I'll use as a reference to copy the HTML.

For the source of the image I can use conditionals to check if there is a custom image set, if not, if there's a Gravatar available and if not then use the default picture URL.

I'm not entirely sure how I would test against Gravatar for the conditionals though, could you help with this?

Also, for the content selection in the View loop, is there an easy way to only select the current user?

...

So let's say we have our View configured and I have created a user custom field "Profile Picture" which is an image.

Now I'm following this guide to create the form users will use to change their profile picture: https://toolset.com/learn/how-to-add-front-end-forms-to-your-website/

I started to create the form but at the "Build Form" step, I can't remove the Username, Password and Nickname fields, which I don't want to use.

Is there a way to create a form for logged-in users only that do not require their username/password/nickname and they can simply upload a picture to update the custom field value?

I just want a simple drag-and-drop modal window that updates the usermeta for the profile picture, if that's possible.

Last question, assuming I'd like user uploads to go on a cloud like Drive or S3 so that our server is not cluttered with everything users are going to upload... Is that doable at all? If not can we select a specific folder on the server for the uploads?

Thank you!

[Luo Yang]

Hello,

There are lots of questions in this tread, I am trying to answer them one by one.

Q1) When the user registers and creates an account, if they have a Gravatar this is the picture that should be shown by default.
This is WordPress built-in feature, the Gravatar icon is connected with user's email address, see WordPress document:
https://wordpress.org/support/article/how-to-use-gravatars/

Q2) I'm not entirely sure how I would test against Gravatar for the conditionals though, could you help with this?
There isn't such kind of built-in feature, you might consider custom codes, for example, setup a custom shortcode to check if the specific email address is connected with Gravatar, then display the Gravatar, if not display another user image field.

More help:
https://codex.wordpress.org/Function_Reference/get_avatar
https://toolset.com/documentation/user-guides/views/conditional-html-output-in-views/using-shortcodes-in-conditions/

Q3) I started to create the form but at the "Build Form" step, I can't remove the Username, Password and Nickname fields, which I don't want to use.
It is possible with Toolset user form, you can enable below three options when you edit user form:
- Auto-generate Username
- Auto-generate Password
- Auto-generate Nickname
Then they will remove Username, Password and Nickname fields. See screenshot: user-form-options.JPG

Q4) Last question, assuming I'd like user uploads to go on a cloud like Drive or S3 so that our server is not cluttered with everything users are going to upload
There isn't such a built-in feature within Toolset plugins, but Toolset Forms plugin are using WordPress media library to upload image files, you can try some other Drive or S3 plugins which is full compatible with WordPress media library

[bastienB]

Hey Luo,

Thanks for the provided information.

We decided to drop support for Gravatar as it was too complex to integrate for now. Maybe an idea, it would be great to be able to have a User custom field of "Image" type where you can enable Gravatar support, maybe with a simple checkbox.

Then Toolset would use that as a default source if it's available, or it would use the default value, or the custom file uploaded via a form on the front-end. Just an idea!

Anyway, so now we have an image set as the default value. The form works well when we upload a custom image and it displays appropriately on our image element but when there's no custom picture, the default value is not returned.

Our image element uses the custom field "wpcf-profile-picture" as the source. The user custom field slug is "profile-picture".

Could you help with this?

Thank you!

[bastienB]

Also just wanted to know if there would be a way to alter how the front-end form behave?

Currently when the user opens the modal window to change the profile picture, the default picture displays like a custom upload, so you can "submit" it and you can even delete it. The default picture should not be removable, nor should the user be able to click "Submit" without selecting a custom image.

Can we have the picture displayed on the left side (so if no custom upload, that would be the default picture) while still have the "Select file" button displayed?

Can we block the "Submit" until user has selected a custom file?

Thank you!

[Minesh]

Luo is on vacation. This is Minesh here and I'll take care of this ticket and try to help you further. Hope this is OK.

There is no such feature available to adjust the form's workflow as you mentioned.

if there is no profile picture uploaded and you want to display the default image, you can display the default image using the [wpv-conditional] shortcode.

[bastienB]

Hello,

Thank you for the reply.

So there is no way to prevent form submission if user has not selected a custom image? This is a rather basic function, if Toolset can't prevent default values to be submitted I guess we'll have to try to use Formidable instead.

Regarding the default profile picture, why does Toolset let us configure a default value if this value is not returned by default?

If we create a custom field and configure a default value, shouldn't this value be returned when there's nothing?

All best,
B

[Minesh]

You can pass the default URL to the default field of the image but the feature you want to hide the submit button if no image selected is not there.

However - it could be easy to integrate it by adding custom JS code. If you can send me a problem URL where I can see the profile pic and submit button I will try to integrate it.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.