Support » Plugin: Instant Articles for WP » Facebook Instant Articles and gallery shortcodes

  • Hi everyone

    I’m using Instant Articles for my WordPress site. I have problem with the gallery short codes in my posts.
    I’m using Awesome Gallery Plugin to display my galleries, but when the post is being transformed into a Instant Article the gallery short code wont display anything.

    Plugin: latest
    WP: latest (4.7.2)
    PHP: 5.4.45

    Here is my post editor notes notes:
    No rules defined for <style> in the context of Paragraph
    No rules defined for <div class=”awesome-gallery-edit-wrapper”> in the context of InstantArticle
    No rules defined for <div class=”asg asg-align-center”> in the context of InstantArticle

Viewing 3 replies - 1 through 3 (of 3 total)
  • Any luck on this? Also having a similar issue

    Short codes dont seem to work at all with instant articles. I have the issue with tablepress. So far I haven’t found a solution.

    You’re right, they don’t. I finally got to the bottom of how they work on my site. The was I understand it is this:
    Instant Articles match a lot of default WordPress functions so they display properly. But, a lot of themes don’t adhere to the default WordPress functions. Therefore, Instant Articles has no idea what “awesome-gallery-edit-wrapper” is (in the OP’s case).
    So to allow compatibility with most themes, classes, shortcodes, etc., they created the ability to make Custom Transformer Rules which tell Instant Articles what “awesome-gallery-edit-wrapper” is.
    So, in my case, Instant Articles didn’t know what a couple of my shortcodes were, so I had to tell it what they were or simply tell them to ignore it. You match your selectors to their predefined Transformer Rules

    Here are my custom transformer rules:

    { "rules": [ { "class": "PassThroughRule", "selector" : "span.dropcap" }, {
     "class": "AnchorRule",
     "selector": "a",
     "properties" : {
       "anchor.href" : {
         "type" : "string",
         "selector" : "a",
         "attribute": "href"
    }, {
            "class": "LineBreakRule",
            "selector": "br"
        }, { "class": "SlideshowImageRule", "selector" : "",
     "properties" : { "image.url" : { "type" : "string",
     "selector" : "img", "attribute": "src" },
     "image.caption" : { "type" : "element", "selector" : "gallery-caption" } } } ] }

    So, to explain that code, the first one is only telling Instant Articles to ignore my span.dropcap selector, using the PassThroughRule. The second one is telling IA that my a is a link, using their AnchorRule. Notice there are also properties associated with that portion of code. Some of IA’s rules take parameters, and in this case, all that is doing is specifying what the type is, etc. Third one is just telling IA that my br selector = LineBreakRule. The fourth one is just like the AnchorRule from above. It’s just telling IA that my is a slideshow image using IA’s SlideshowImageRule. The properties of that one just define which selector = the image.url and the image.caption.

    It seems a lot more complicated than it really is. Just pay attention to the syntax when making your custom transformer rules. ie, “class” is not your CSS class, it’s IA’s predefined Transformer Rule.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Facebook Instant Articles and gallery shortcodes’ is closed to new replies.