Clearing cache fixes Featured Image/Post Title problem

Resolved zimbo000
(@zimbo000)

5 years, 1 month ago
I have this code in a child theme functions.php to do what the title says, as the Enfold theme default is to place the Featured Image above the Post Title and meta data. The function has been in use on the site successfully for years.
```
/* 
 * Move Featured Image below Post Title
 */
function add_custom_script(){
if(is_singular('post')){
?>
<script>
(function($){
    $(window).load(function() {
    	$('article.post').each(function(){
           $(this).find('.entry-content-header').after($(this).find('.big-preview').detach());
        })
    });
})(jQuery);
</script>
<?php
}
}
add_action('wp_footer', 'add_custom_script');
```
This code function has recently stopped working, with the FI now showing above the post title.

Posts display these errors in Chrome Dev Tools Console:
```
jquery.min.js:2 Uncaught TypeError: e.indexOf is not a function
    at S.fn.init.S.fn.load (jquery.min.js:2)
    at (index):252
    at (index):257
jquery.min.js:2 Uncaught TypeError: e.indexOf is not a function
    at S.fn.init.S.fn.load (jquery.min.js:2)
    at i ((index):260)
    at (index):267
    at (index):268
(index):271 Uncaught ReferenceError: wp is not defined
    at (index):271
(index):274 Uncaught ReferenceError: wp is not defined
    at (index):274
    at (index):275
autoptimize_d99ee2cbe3587481a6d370bc4e66f03f.js:5 JQMIGRATE: Migrate is installed, version 3.3.2
```
If I clear the Autoptimize cache and hard refresh a post, the PHP code ‘does its job’ and the Post Title appears above the FI, and the Console errors disappear.

If I then load posts for the next hour or so, the Title appears above the FI. When I visit the site the next day and load a post, the problem has re-appeared and Title and FI are swapped back to theme default. Clear the cache again, and all is OK.

This would indicate (perhaps…) that the problem is related to Autoptimize. Any ideas?

These are my…
JavaScript Options
Optimise JavaScript Code? Yes
Aggregate JS files? Yes
Do not aggregate but defer? No
Also aggregate inline JS? No
Force JavaScript in <head>? No
Exclude scripts from Autoptimize: seal.js, js/jquery/jquery.js, js/jquery/jquery.min.js
Add try-catch wrapping? No

The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)

Plugin Author Optimizing Matters
(@optimizingmatters)

5 years, 1 month ago

what surprises me is that the problem goes way when clearing the Autoptimize cache (which also clears some page cache’s caches), which somehow indicates this is not due to AO config (as AO does not act differently after X hours), but the JS errors do confirm that you will likely have to add wp-includes/js to the JS optimization exclusion list zimbo000 ..

hope this helps,
frank

Thread Starter zimbo000
(@zimbo000)

5 years, 1 month ago

The behaviour seems completely unpredictable. I didn’t add your exclusion yet, but over the past day or so I can view posts and the problem exists, but then some hours later – this time without clearing the cache – the same posts then display as they should, title above image.

Can you explain what you think is going on here?

Is it worth raising this with the theme’s support – could it be a problem on their side?

Plugin Author Optimizing Matters
(@optimizingmatters)

5 years, 1 month ago

Can you explain what you think is going on here?

Your guess is as good as mine I’m afraid … assuming you have page caching, does the problem also go away when clearing that instead of Autoptimize’s?

Thread Starter zimbo000
(@zimbo000)

5 years, 1 month ago

No, I don’t use page caching.

Every plugin I’ve tried (admittedly not in the past year or so) gave too many problems or didn’t improve performance.

Your’s is the only caching plugin. Theme provides file merging and compression options for CSS and JS but using both conflicted, and your’s provided better performance on its own, so their’s is off.

Although for future performance I need to address Core Web Vitals and see what that throws up… 🙂

Plugin Author Optimizing Matters
(@optimizingmatters)

5 years, 1 month ago

In that case I would start with the exclusion of wp-includes/js from JS optimization, that _should_ fix things (although I still don’t see the logic of it working without first and then not and then yes and ..)

Plugin Author Optimizing Matters
(@optimizingmatters)

5 years ago

any feedback zimbo000 ?

Thread Starter zimbo000
(@zimbo000)

5 years ago

I have been tracking this and after adding that exclusion, the problem has been solved.

However, when a post is first rendered the FI is shown at the top with the title below, as per theme default, then after 2-3 seconds the order is swapped and the title placed above the FI because of the added function. Not sure why there is this delay – any ideas?

You can see this ‘in action’ on any post on the site: https://www.henleyherald.com/

Plugin Author Optimizing Matters
(@optimizingmatters)

5 years ago

checked in FF & Chrome but don’t see that happening zimbo000, maybe related to the fact you’re logged in somehow?

Thread Starter zimbo000
(@zimbo000)

5 years ago

Could be… I just tried FF without being logged in and the ‘FI first’ does still happen but the transition to the correct title placement then happens within micro-seconds.

That aside, are you any clearer as to why this behaviour was happening and how/why the exclusion I added solves the issue?

Plugin Author Optimizing Matters
(@optimizingmatters)

5 years ago

the exclusions were based on the JS errors you mentioned in your original post zimbo000 🙂

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Clearing cache fixes Featured Image/Post Title problem’ is closed to new replies.