Embed shortcode problems after wordpress update

Zvonimir Dusper

#188440

Hi!
I have a web in development at http://unisonfokus.com/.

It has a filter on the front page with music releases. Before the wordpress update it all worked fine (updated to 4.9.8).
What is happening now is that the posts that appear on normal page load have different HTML than the ones loaded with AJAX and this breaks the layout.
Funny thing is that before the update, all posts looked like non-AJAX (normal loading) ones look now, with Youtube populating the whole div and reacting to responsive layout in a normal way.
Now, they still look ok but upon inspection you can see that a new class in <p> tag was added titled “fluid-video-container” followed by a <span class=”fluid-video”> in which there is the iframe.
All of this is just a result of [embed] shortcode. Also, on those top releases you can not see HTML comments that are in the php template.

AJAX releases (upon infinite scroll trigger or after results reload by filter action) have just a normal <p> tag with not class followed by an iframe. For some reason youtube video does not populate whole div but is narrow. Also, in those posts upon inspection you can see HTML comments.

So it seems that [embed] shortcode renders after wordpress update in a different way on AJAX filter renders, which remained the same, but that “old” render now looks different than it used to look.

BTW, thx for your incredible plugin, it is really great, and really well coded (now that I looked all around it looking for the answer…).

Add New Note to this Reply

Trevor Moderator

#188459

This is complex. WordPress is doing its stuff, as is Search & Filter. I suspect your theme is injecting the class on to the <p> and also adding the inner span.

It may be doing so via a function that detects the iframes and does it from there. We have a boilerplate javascript that will enable you to run this code again after the ajax refresh, but I do not know what the code is that is being used.

Add New Note to this Reply

Zvonimir Dusper

#188505

OK, then can you please help with this. If I locate the injecting javascript function, how would you suggest I call it? Does your plugin have an after AJAX reload hook?

Add New Note to this Reply

Trevor Moderator

#188591

This is the basic script (into which you add your code):

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");

// call your function(s) here

  });
}(jQuery));</script>

Add New Note to this Reply

[Author]

Posts