Post with multi embeds / images get's messy

[fleps]

Hi!

Doing another test round today I noted a specific post of my blog that got really messy inside the Instant Articles / RSS

The post specifically have a text part and then a video from Youtube then 3 animated gifs in a row, each one in a paragraph as it's the way Wordpress write the HTML.

This is the post: http://jogazera.com.br/inside-chega-hoje-ao-xbox-one/

But when looking into the Instant Article / RSS, the code is really messy and only one of the animated gifs is properlly converted / showing, everything else and the video are just lost as the plugin is not wrapping up all the embeds inside a <figure class="op-interactive"><iframe> element.

Here is the generated code on the RSS:

<p><a href="http://jogazera.com.br/conheca-inside-proximo-jogo-dos-criadores-de-limbo/">Clique aqui</a> e saiba mais sobre o jogo, ou confira o trailer abaixo:</p>
<figure class="op-interactive"><iframe></iframe></figure><img class="aligncenter" src="http://playdead.com/css/img/inside/gifs/gif1.gif" width="800" height="410">
<p><img class="aligncenter" src="http://playdead.com/css/img/inside/gifs/gif2.gif" width="800" height="410"></p>
<img class="aligncenter" src="http://playdead.com/css/img/inside/gifs/gif5.gif" width="800" height="410">
</span>

And the original RSS: http://jogazera.com.br/?feed=instant_articles

Hope it helps you get this fixed.

Thanks!

Technical info

• WordPress version:4.5.3-pt_BR
• allfacebook Instant Articles version: 0.7.3

[bobonski]

Hi guys, any updates on this? I can help with testing in prod
thanks

[fleps]

Hey guys, do we have any ETA on this? It keeps happening at least in my WP blog, posts with inline images inside the post body usually go to IA with all imagens on the top before the text.

Example: original article with a lot of imagens during the text: http://jogazera.com.br/previa-ghost-recon-wildlands/

When I go to IA all imagens are in a row before the text. which is a pain to fix with a long article like this.

Anyone know why this is happening? Can I fix directly on my blog or something?

Thanks

[fleps]

Guys, this is happening with ALL POSTS NOW, any embedded image in the middle of the post is being moved to the top of the post, so 100% of my articles that have any embedded image I have to manually edit on Facebook IA manager which is very bad.

Please can someone look into this? I can help debug it!

Is this abandoned now??

[fleps]

Hey guys

After digging and doing some tests on my dev env, I figured out how to FIX this for my case.

I don't know if this will work for everyone (so that's why I just edited the plugin on my environment and not on github). Here it is:

• open the file lhafb_ia.filters.php and look for the section that starts with "Format the images for Instant Articles"
• almost at the end of this section there is a IF that says if($element->parentNode->nodeName != "body")
• inside this IF there is a WHILE. I commented the entire while:

/** while($highestParent->parentNode->nodeName != "body"){
        $highestParent = $highestParent->parentNode;
}*/

And it worked, my embedded images stopped to being moved to the top of the article, they stay at their correct position as in the html.

Again, I don't know if this is the solution for everyone, in my case my template places my images inside <p><a> tags, so maybe this WHILE wasn't expecting it and messes everything on my RSS.

Hope it helps!