Round Gravatar Hovercard Problem

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/salferrarello.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/salferrarello.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/salferrarello.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 27 in /home/customer/www/salferrarello.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 29 in /home/customer/www/salferrarello.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 30 in /home/customer/www/salferrarello.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

I see this problem on a lot of WordPress blogs using a round Gravatar with Jetpack Hovercards. When you hover over a user’s Gravatar (often in the comments) there is a hover state that appears while the Hovercard loads and this hover state has the Gravatar image but it has the wrong aspect ratio. Below I explain how I troubleshoot and correct this issue.

Populate the Hoverstate

Update: Originally, this post only included the Manual Way to Populate the Hoverstate. I’ve since spent a little more time with this and added this function that encapsulates all the work that needs to be done.

If you copy and paste the following code into the Google Chrome Developer Tools Console, it should populate the hoverstate for the first Gravatar on the page.

	(function() {

	var gravCloneHtml;

	jQuery('.grav-hashed').first().trigger('mouseenter');

	gravCloneHtml = jQuery('.grav-clone-a')[0].outerHTML;

	setTimeout( function() {
	jQuery('.grofile').trigger('mouseleave');
	}, 3000 );

	setTimeout( function() {
	jQuery('body').append( gravCloneHtml );
	}, 4000 );
	}) ();

view raw trigger-gravatar-hover-state.js hosted with ❤ by GitHub

Add Corrective CSS

You should now have the intermediate hover state Gravatar image displayed on your screen, even though you are currently in the Google Developer Tools pane. Now you can muck about with the CSS to correct the issue.

In my experience with circular gravatars, the following is a common fix.

.grav-clone-a { border-width: 1px !important; }

Update with Similar Problem: Box Sizing

I’ve found a similar problem, where non-circular Gravatar’s have a hover state with the wrong aspect ratio. Here you can see the wrong aspect ratio on the left with the correct aspect ratio on the right.

This problem can be corrected with the CSS line

.grav-clone-a img { box-sizing: content-box !important; }

Manual Way to Populate the Hoverstate

This method is now superseded by the function found above, however, I’m going to keep this code here for future reference.

Capture the Hover State Markup

Paste the following code into the Google Developer Tools console but do NOT press return (we don’t want to run this yet).

gravCloneHtml = jQuery('.grav-clone-a')[0].outerHTML;

Hover over the avatar to trigger the hover state and Gravatar Hovercard. Then press return.
You should see something like the following in the console.

Add the Hover State Markup for Editing

Move your mouse away from the Hovercard so it closes. Now paste the following code into the Google Developer Tools console and press return (yes, actually press it this time).

jQuery('body').append( gravCloneHtml );

Sal Ferrarello (@salcode)

Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.

Share this post:

Twitter Facebook LinkedIn Email Reddit

Comments

Terri Orlowski says

August 11, 2017 at 4:14 pm

Hi, Sal. I’m glad I stumbled across this post. I’m looking for a way to have Hovercards work for Authors but not Commenters. Do you have any suggestions for this?

Also – I look forward to meeting you at WCLHV next weekend. I’m speaking there also.

Cheers!

- Sal Ferrarello says
  
  August 13, 2017 at 6:29 am
  Hi Terri,
  
  That is an interesting question. I’m not sure whether Jetpack’s Gravatar Hovercards supports this or not.
  
  At the time of this writing, there are a number of filters applied when the module first starts up.
```
add_filter( 'get_avatar',          'grofiles_get_avatar', 10, 2 );
add_action( 'wp_enqueue_scripts',  'grofiles_attach_cards' );
add_action( 'wp_footer',           'grofiles_extra_data' );
add_action( 'admin_init',          'grofiles_add_settings' );
add_action( 'load-index.php',              'grofiles_admin_cards' );
add_action( 'load-users.php',              'grofiles_admin_cards' );
add_action( 'load-edit-comments.php',      'grofiles_admin_cards' );
add_action( 'load-options-discussion.php', 'grofiles_admin_cards_forced' );
```
  I’m not sure whether you could leverage any of these or not.
  
  I’ll be at the Happiness Bar at WordCamp Lehigh Valley from 11:00am to noon. If you want to stop by during that window, I can take a closer look at it with you.
  
  Your presentation topic of backups is a good one. I’ll look forward to your talk.