Adding space between images

I have exactly the same problem. When converted to IA, all images lose the margins which usually separate them; due to this my articles are not validated.
I tried to force a larger margin in CSS both for img and paragraph, but it seems to have no effects on the IA side.

I found a solution. If you make the images available for Facebook comments and likes it will add a bottom margin to them.

Just add the following inside the opening figure tag of each image

data-feedback="fb:likes, fb:comments"

Thank you so much Michael!
Just wondering where you should put this code: in WordPress or in an IA configuration file?

Just tried to add the following code both to the “custom rules” section of the plugin and directly in rules-configuration.json; re-saved the post but nothing happens; IA code still missing the data feedback lines. Very strange, indeed

{ “rules”: [{
“class”: “ImageRule”,
“selector” : “figure”,
“properties” : {
“image.url” : {
“type” : “string”,
“selector” : “img”,
“attribute”: “src”
},
“image.like” : {
“type” : “exists”,
“selector” : “figure[data-feedback*=’fb:likes’]”,
“attribute”: “data-feedback”
},
“image.comments” : {
“type” : “exists”,
“selector” : “figure[data-feedback*=’fb:comments’]”,
“attribute”: “data-feedback”
}
}
}

] }

OK, got it partially work by adding the code in the custom rules box of the plugin. Yet it is clearly a workaround and it doesn’t work for all images (dunno why). It’s clearly a problem of translation from WP to IA, the translator completely removes CSS styling and, when you have images without any text between them, produces a series of <figure> tags without anything in between. There should be some kind of fix for that, other than artificially forcing some content between images.

I have been editing the posts on the Facebook side and manually changing the code, but I will give this a try next week and see if it works for me.

OK, I was wrong. The code is still not working, I was looking at the versions produced by Allfacebook Instant Articles (which has the option to include or nor the feedback from the interface….). Adding the code manually to each image works like a charm; yet, it is obviously not suitable for a production site with 3,000 articles like mine…

Woks like a charm? Not at all. If you update the original post all the manual correction you made in FB are gone….
I guess this plugin still needs a lot of work to be ready for a production site. To add the option for media feedback is mandatory, even the Allfacebook plugin, which is not an official one and is at a rather early stage of development, has it. Alternatively, it should be possible to have some, even minimal, control on the translation rules without tweaking with the code (which seems to do nothing in most cases, and is moreover quite badly documented).

PS Why there is no feedback from the plugin authors in this forum?

Same problem for me. Do you know if there is any way to add custom style to IA tags – e.g. <figure style=”margin-bottom:2px;”>xxxxx</figure>

I guess all the users of this plugin are suffering from this issue.
Hopefully the authors will have a look soon.

Best,

I am facing the same error from facebook review, white space is needed between image <figure>

Why there are no feedback from the authors?

The only working solution I have found so far is to manually edit the post by replacing the <figure> tag with <figure data-feedback=”fb:likes,fb:comments”>. Nothing else worked for me. This is an annoying procedure and if you update your original post all the fixes are lost.

Hope they’ll fix this issue soon…

PS. With the last update, it looks there are problems with the automatic conversion. I no longer see any of my newest posts in my Instant articles feed …it seems that the automatic submission to the “production articles” section in FB stopped working…

Yet, this is not a big problem, since my instant articles seem to perform a bit worse in terms of audience reach and engagement than my normal link posts in FB, which is honestly quite surprising (to be polite)….

All too complicated & most of it doesn’t work
I have 1000’s of images on my educational site
Solution for me was simple
Create a 10px X 10px transparent png and insert between the images (make it any size you want)
I upload the png along with the group of images I want to post
No fussing around trying to insert script that may not work

• This reply was modified 7 years, 8 months ago by nl1947.