Tranformer Rule for Slideshow in Facebook Instant Article not working? - facebook-instant-articles

Question

I am using Justified Gallery and I want to publish my page as an Instant Article on Facebook. As I go through the documentations here, I found out that I can transform the images into Slideshow by Transformer Rules. Here is my gallery code:
<div class="myExMul">
<a href="link_to_img" class="swipeboxImg">
<img src="link_to_img" alt="example_text" class="myExMulImg">
</a>
<a href="link_to_img2" class="swipeboxImg">
<img src="link_to_img2" alt="example_text2" class="myExMulImg">
</a>
<a href="link_to_img3" class="swipeboxImg">
<img src="link_to_img3" alt="example_text3" class="myExMulImg">
</a>
</div>
And here is my Transformer Rules:
{
"class": "SlideshowRule",
"selector": "div.myExMul",
},
{
"class": "SlideshowImageRule",
"selector": "img.myExMulImg",
"properties": {
"image.url": {
"type": "string",
"selector": "img.myExMulImg",
"attribute": "src"
},
"caption.title": {
"type": "string",
"selector": "img.myExMulImg",
"attribute": "alt"
}
}
}
When I imported the rules, it seems that my rules broke everything and I can no longer publish my articles, what am I doing wrong here?

Answer 1

So after some hours of research, I found the right rule for my code. The problem is you have to use the outer tag as the selector (in my case it's the a tag) instead of the inner tag (img).
{
"class": "SlideshowRule",
"selector": "div.myExMul"
},
{
"class": "SlideshowImageRule",
"selector": "a.swipeboxImg",
"properties": {
"image.url": {
"type": "string",
"selector": "img",
"attribute": "src"
},
"caption.title": {
"type": "string",
"selector": "img",
"attribute": "alt"
}
}
}