[Resolved] Problem with the shortcode to show the user's image

[Author]

Posts

[Francisco Ramón Molina Busquiel]

Your shortcode to display the user profile image allows you to display the image inside a circle, however, this does not work correctly.

[wpv-user field='profile_picture' size='200' alt='Imagen de usuario']

Look at my page:
hidden link
The image is not shown inside a circle.

Thanks for your help.

Best regards,
Francisco R.

[Nigel]

Hi Francisco

I just checked this on a local test site and it worked as expected.

The profile picture image has a class wpv-profile-picture-shape-circle and that class has a CSS style of border-radius: 50%, which makes the image circular.

But when I look on your site at this page that class is missing, even though it should be added automatically. I added the class manually to the image with the browser dev tools and the image became circular.

Is there something you are aware of when inserting the shortcode which might account for the class being missing?

If not I'll need to test again specifically inside a Divi text module, but please let me know.

[Francisco Ramón Molina Busquiel]

Hi Nigel,
No, I have not done anything special, it's just that it's inside a DIVI module.
Thanks for your help.

[Nigel]

Hi Francisco

I tested it inside a Divi module and it worked okay.

I still have a local copy of your test site from before, and I tested it on there and it also worked fine.

Many of the plugins were deactivated for testing, so I re-activated the ones you currently have active on your site, and it was still okay (see screenshot).

Since I took a copy of your site you have added new plugins that I can't test.

In the second screenshot are the plugins I have installed and active for my test.

Can you test whether deactivating any other plugins you are using resolves the problem?

[Francisco Ramón Molina Busquiel]

I have disabled all the plugins that you do not have and the problem is not solved, so, maybe, the problem is of the latest versions of some of the plugins.
I've been testing disabling other plugins, but nothing solves the problem.
What can we do to find out?

Thanks for your help Nigel.

[Francisco Ramón Molina Busquiel]

Any ideas to solve this problem?

[Nigel]

Hi Francisco

I think rather than trying to work out why the class is not being added to the image on your current installation it would be much simpler to just add a CSS rule using the class names that are added.

So this should ensure the avatar is round:

.wp-user-avatar {
  border-radius: 50%;
}

There don't appear to be any other styles assigned to the image that would prevent that from taking effect, if you could try that.

[Francisco Ramón Molina Busquiel]

Nigel,
With this CSS class works correctly, the problem is that what is happening can affect many more things on the web.

[Nigel]

You want the user avatar to appear round only on that page and square on other pages?

You can either add the custom CSS only to that page, or you can make the CSS selector more specific.

Use the advanced tab of the text module where you insert the shortcode to add a custom class to the container, e.g. "custom-avatar".

Then change the custom CSS to

.custom-avatar .wp-user-avatar {
  border-radius: 50%;
}

That will prevent it from affecting the avatars anywhere else on your site.

[Francisco Ramón Molina Busquiel]

No. You misunderstood me. I was referring to the fact that the problem that is causing the avatar image not to be shown in a circular way may be damaging in other places of the web.

[Nigel]

I'm not sure I understand.

You mean there may be other related issues that you haven't noticed?

[Francisco Ramón Molina Busquiel]

Yes.

[Luo Yang]

Dear Francisco ,

I just got this thread
Nigel isn't available, and I just got this thread, since it is a custom CSS problem, please point out the problem URL for:
the avatar image not to be shown in a circular way may be damaging in other places of the web.
Where and how can I see the problem, thanks

[Francisco Ramón Molina Busquiel]

The problem that I have is for some kind of incompatibility between Toolset shortcode to show in a circular way the avatar of the user and some plugin installed on the site. Nigel was trying to reproduce the problem locally, he has all the information, so it will be better to wait until he returns from his vacation.
Thanks Luo.

[Luo Yang]

OK, as your request, I assign this ticket to Nigel