Gravatar images are broken

[Ryan]

Just noticed that my Gravatar images are coming up as broken on my website in the top black bar.
I have just updated to the latest premium version of GP and updated some other plugins I am using.

I disabled all the plugins and tested that out to see if that was the cause of the issue. So far, it hasn’t turned up anything. What I am getting is just a broken image icon instead of the gravatar image.

I checked out the browser inspector and it’s failing to load the gravatar images:

GET http://0.gravatar.com/avatar/043840f235a47e9d68d10063305ed989?s=52&d=mm&r=g net::ERR_NAME_NOT_RESOLVED
(index):288 GET http://0.gravatar.com/avatar/043840f235a47e9d68d10063305ed989?s=128&d=mm&r=g net::ERR_NAME_NOT_RESOLVED

[Ryan]

Oh yeah and I’m pretty sure this is a Google Tag Manager thing but when I put the GTM script in the GP Hook titled ‘Before Header’ it registers with GA and all but the browser inspector displays this error message:

VM1219:1 Uncaught TypeError: $ is not a function(anonymous function) @ VM1219:1(anonymous function) @ gtm.js?id=GTM-TCQL3Q:58ci @ gtm.js?id=GTM-TCQL3Q:60af @ gtm.js?id=GTM-TCQL3Q:26(anonymous function) @ gtm.js?id=GTM-TCQL3Q:94Eg @ gtm.js?id=GTM-TCQL3Q:105Og @ gtm.js?id=GTM-TCQL3Q:42a.push @ gtm.js?id=GTM-TCQL3Q:111(anonymous function) @ gtm.js?id=GTM-TCQL3Q:111tf @ gtm.js?id=GTM-TCQL3Q:29(anonymous function) @ gtm.js?id=GTM-TCQL3Q:112(anonymous function) @ gtm.js?id=GTM-TCQL3Q:114
(index):353 GET http://0.gravatar.com/avatar/043840f235a47e9d68d10063305ed989?s=52&d=mm&r=g net::ERR_NAME_NOT_RESOLVED

This kind of ‘$ is not a function’ code error reminds me of calling jQuery variables before the jQuery library script has been initialiZed…

[Tom]

Hmm, haven’t seen either of these issues before.

The first error looks like maybe the gravatar server wasn’t responding at the time?

The second error is because WordPress requires jQuery code to start with “jQuery” instead of “$”.

More on that here: https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

[Ryan]

Yeah that IS the strange thing.
The ‘$’ call appears to be coming from the GTM script. The recommendation is to put the GMT script just after the body tag in a website. We know its VERY common to defer loading external JS due to page optimisation so I wonder why GTM has taken this approach.

:S

[Tom]

jQuery is loaded in wp_head, so adding it in the Before Header hook should work perfectly.

I think the issue might be that inside their script they’re using $ instead of jQuery (shorthand). WordPress needs the script to define jQuery if it’s going to use shorthand $.

If you do some searching around I’m sure others have faced the same issue and have a solution 🙂

[Ryan]

Gravatar issue looks to have resolved itself and it did appear to be at gravatar.com end of the business.
The Uncaught TypeError $ remains though.

I have played with GP Hooks and haven’t had any results. Disabled plugins to see if there is an issue there – there is, with the GP Hooks in the premium plugin of course.

Then I tried to just jam the script into the parent theme header.php file and the inspector error persists. I know what you mean about what is causing it, did my own digging here http://stackoverflow.com/questions/12343714/typeerror-is-not-a-function-when-calling-jquery-function

…but that doesn’t explain WHY it is happening. I have a hunch that it’s the version of jQuery that GP is using (it appears to be quite new). Maybe GTM code does not like it (strangely enough).

Update: I have done some more ‘digging’ and it appears to be the way the GTM code was constructed (was done by another dept, not ours) and they’ve obviously used some jQuery that conflicts with the one used in the GP theme. Here is the links to the stackoverflow posts:

http://stackoverflow.com/questions/22207431/jquery-being-loaded-into-gtm-js-from-google-tag-manager
http://stackoverflow.com/questions/33755168/jquery-and-google-tag-manager

Apparently the GTM script is serving jQuery v1.9.1 code. So I think that is where the issue may be. I have two questions for you Tom:

1) Can I change the version of jQuery that comes with GP
2) If I change the version of jQuery, will it cause errors with the theme or issues with the premium addons.

[Tom]

GP doesn’t load any specific jQuery, we let WordPress handle it.

It’s not recommended that you change that, as it could cause issues.

More info here: https://pippinsplugins.com/why-loading-your-own-jquery-is-irresponsible/

[Ryan]

Thanks for the tip about letting WordPress handle the jQuery version.
Tom, I really get the feeling that it’s the GP theme that is the problem. ON your generatepress.com website you don’t actually appear to be using the GTM code to collect stats – rather the older GA code:

		<script>
			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
			})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

			
			ga('create', 'UA-1096958-12', 'auto');

			
			ga('send', 'pageview');
			ga('require', 'ec');

			
		</script>

Can you use some GTM code to test your theme out or can another forum user shed some light on it by telling me what they have done and if anyone has experienced similar issues?

[Tom]

I’m not using Google Tags Manager here – just Google Analytics.

I just went ahead and added the code to http://demo.generatepress.com

Not noticing any issues there.

[Ryan]

hmmmm i have the site currently in maintenance mode so the public can’t view it whilst it is being built.
I think that could be the issue (but when deactivating the maintenance plugin – it did not make any difference).

Failing that, It must the be the GTM code I have been supplied but I can’t see any obvious issues with that…

Arghhhh it’s like an itch i can’t scratch. Annoys me when i see errors in the inspector which I can’t solve.

[Tom]

You might have another plugin causing the issue.

Have you tried #1 on this page?: https://generatepress.com/knowledgebase/debugging/

[Ryan]

Tom,

I really don’t think any other plugins are casuing the issue. Last week I disabled them all and then turned them on – one by one. The plugin that caused the issue was the GP Premium addons.

Now if I switch themes, will I lost all my GP customisations? I’ve put a lot of work into them and I would not want to lose them. Also I am using a child theme so that part of the customisation is all good but my major concern is the ‘Customiser’ tool.

[Tom]

Disabling GP Premium most likely only removed the script from GP Hooks, so (of course) the error will go away since the script doesn’t exist there anymore without GP Hooks activated.

You won’t lose any customizations.

[Ryan]

Well I have enabled WP DEBUG and see no errors appearing on dashboard or front end. I changed the theme over to ‘Twenty Sixteen’ and the inspector error message disappeared.

It came back when I re-activated the GP child theme again. I also tried just activating the parent theme and the same error message appeared in the chrome browser inspector.

Note: Chrome and Firefox give me the same inspector errors, MS Edge gives me all kinds of weird errors (but that is hardly surprising coming from MS anyhow). Unsurprisingly Opera browser does the same as Chrome. I have not yet tried Safari but being webkit, I’m like 99.9% sure of the result.

I think my last resort is to setup a test install on another server somewhere….

[Ryan]

I’ve set up a test install at http://blogname.coolwebs.com.au/ and the issue regarding the inspector error still persists. So I’d say that the issue lies in either two areas:

1) The GTM code (that I really have no control over)
2) The GP theme + premium addon (which is strange that you are not experiencing same issue)

The only thing different is most likely the GTM code….

[Author]

Posts