Title: Correct Transformer rule for [caption] shortcode
Last modified: August 31, 2016

---

# Correct Transformer rule for [caption] shortcode

 *  [lukecd](https://wordpress.org/support/users/lukecd/)
 * (@lukecd)
 * [10 years ago](https://wordpress.org/support/topic/correct-transformer-rule-for-caption-shortcode/)
 * When uploading pictures to the WordPress backend I often fill in the caption 
   field which results in code like this being generated
 * [caption id="attachment_15046" align="aligncenter" width="520"]<img src=”[https://picnic.ly/wp-content/uploads/2016/04/j3.jpg&#8221](https://picnic.ly/wp-content/uploads/2016/04/j3.jpg&#8221);
   alt=”[https://www.pinterest.com/pin/308989224404163749/&#8221](https://www.pinterest.com/pin/308989224404163749/&#8221);
   width=”520″ height=”780″ class=”wp-image-15046″ /> HERE IS THE CAPTION[/caption]
 * What I’m seeing in the debug info for your plugin is
 *  No rules defined for <div class=”wp-caption aligncenter”> in the context of 
   InstantArticle
 * And then the code is missing from the transformed markup. Both the image and 
   the caption don’t make it through the transformer.
 * Is this something the transformer should be picking up? If not, how would I extend
   the code to deal with this (pretty normal) case?
 * Thanks!
 * WordPress Version 4.4.2
    Plugin Version 2.9 PHP Version 5.5.9-1ubuntu4.14
 * [https://wordpress.org/plugins/fb-instant-articles/](https://wordpress.org/plugins/fb-instant-articles/)

Viewing 10 replies - 1 through 10 (of 10 total)

 *  [dzemens](https://wordpress.org/support/users/dzemens/)
 * (@dzemens)
 * [10 years ago](https://wordpress.org/support/topic/correct-transformer-rule-for-caption-shortcode/#post-7319567)
 * There’s at least a dozen people with the same (very common) problem from WordPress
   in the first 3 pages of this forum.
 * The easy solution seems to be “remove the captions”, but that also is kind of
   silly, since maybe we want the captions (and FB kind of expects, though does 
   not require captions).
 *  [dzemens](https://wordpress.org/support/users/dzemens/)
 * (@dzemens)
 * [10 years ago](https://wordpress.org/support/topic/correct-transformer-rule-for-caption-shortcode/#post-7319568)
 * I found this thread which has example transformer rule for a different class,
   but I think it can be modified (haven’t tested yet)
 * [https://wordpress.org/support/topic/content-inside-shortcode-is-omitted?replies=9](https://wordpress.org/support/topic/content-inside-shortcode-is-omitted?replies=9)
 * From some examples here: [https://github.com/facebook/facebook-instant-articles-sdk-php/blob/master/docs/QuickStart.md#matching-selector](https://github.com/facebook/facebook-instant-articles-sdk-php/blob/master/docs/QuickStart.md#matching-selector)
 * Given an example captioned image from my domain:
 *     ```
       <div id="attachment_9339" style="width: 660px" class="wp-caption aligncenter">
           <a href="http://agnarchy.com/wp-content/uploads/2016/04/AA-Kiroro-Pow-9932.jpg" rel="attachment wp-att-9339">
               <img class="size-large wp-image-9339" src="http://agnarchy.com/wp-content/uploads/2016/04/AA-Kiroro-Pow-9932-650x406.jpg" alt="Anti Autti snowboarding in powder in Kirro, Japan" width="650" height="406" srcset="http://agnarchy.com/wp-content/uploads/2016/04/AA-Kiroro-Pow-9932-650x406.jpg 650w, http://agnarchy.com/wp-content/uploads/2016/04/AA-Kiroro-Pow-9932-400x250.jpg 400w, http://agnarchy.com/wp-content/uploads/2016/04/AA-Kiroro-Pow-9932-768x480.jpg 768w, http://agnarchy.com/wp-content/uploads/2016/04/AA-Kiroro-Pow-9932-300x187.jpg 300w, http://agnarchy.com/wp-content/uploads/2016/04/AA-Kiroro-Pow-9932-800x500.jpg 800w, http://agnarchy.com/wp-content/uploads/2016/04/AA-Kiroro-Pow-9932.jpg 1500w" sizes="(max-width: 650px) 100vw, 650px">
           </a>
           <p class="wp-caption-text">Anti Autti in Kirro, Japan</p>
       </div>
       ```
   
 * Here’s my attempt to modify, using XPath:
 *     ```
       {
           "rules":
           [
               {
                   "class": "ImageRule",
                   "selector" : "div.wp-caption aligncenter",
                   "properties" : {
                       "image.url"  : {
                           "type" : "string",
                           "selector" : "//div/a/img",
                           "attribute": "src"
                       }
                       "image.caption" : {
                           "type" : "element",
                           "selector" : "//div/[class=wp-caption text]"
                   }
               }
           ]
       }
       ```
   
 *  [Dave_S](https://wordpress.org/support/users/dave_s/)
 * (@dave_s)
 * [10 years ago](https://wordpress.org/support/topic/correct-transformer-rule-for-caption-shortcode/#post-7319572)
 * Simply adding
 * `add_theme_support( 'html5', array( 'gallery', 'caption' ) );`
 * to functions.php worked for me.
 *  [dzemens](https://wordpress.org/support/users/dzemens/)
 * (@dzemens)
 * [10 years ago](https://wordpress.org/support/topic/correct-transformer-rule-for-caption-shortcode/#post-7319573)
 * FWIW the PageFrog plugin solves the problem with captioned images. I had to delete
   all of my existing IA’s and refresh the feed, but they’ve all pulled in and are
   not displaying any errors now for the captioned images.
 * There may be an issue with the slideshow/gallery (basically when I see it it’s
   duplicating the parent `figure` tag, which I just removed manually from the article’s
   HTML.
 *  Thread Starter [lukecd](https://wordpress.org/support/users/lukecd/)
 * (@lukecd)
 * [10 years ago](https://wordpress.org/support/topic/correct-transformer-rule-for-caption-shortcode/#post-7319576)
 * dzemens, thanks for the follow up. when i try adding that transformer rule I 
   get this error “Invalid JSON provided for custom rules code” … I’ll keep digging
   though.
 * How are you finding the PageFrog plugin? I had high hopes for it at first, but
   then had a couple of problems and found the developers totally quiet on the support
   front.
 * Thanks!
 *  [dzemens](https://wordpress.org/support/users/dzemens/)
 * (@dzemens)
 * [10 years ago](https://wordpress.org/support/topic/correct-transformer-rule-for-caption-shortcode/#post-7319581)
 * Yeah I think there was a missing curly brace in that Json. Also, it didn’t seem
   to work when I did try it, so your mileage may vary. You need to add one after
   the `caption` property block, like:
 *     ```
       "image.caption" : {
                           "type" : "element",
                           "selector" : "//div/[class=wp-caption text]"
                      }   <<### Add this
       ```
   
 * I’m reasonably certain that’s the correct _structure_ but I don’t know enough
   about how any of this works to be sure of what selectors to use, and between 
   that and/or cache issues, I gave up trying to debug it and just switched to PF.
 * PageFrog seems OK, at the very least it is _working_ for me, and has solved two
   issues that the “official” page wasn’t handling correctly: captioned images, 
   and Vimeo embeds (the latter use “op-interactive” class instead of “op-social”).
 * I do notice that the project seems to be lacking now in terms of support. I may
   keep an eye on this one as well, and switch back to it, if it ever will work 
   as advertised.
 * I think, unfortunately, that this “Instant Articles” thing is really an enterprise
   level thing which FB kinda expected that publishers would be professional (i.
   e., with a team of interns and devs who build a custom script to handle the markup
   conversion). It doesn’t seem suited for the random person with a website or blog.
 * Plugin issues aside, the entire process of review/approval is about the most 
   painful thing I’ve done in 10+ years of blogging/writing on the internet. I think
   this is probably complicated by the fact that they just opened up the IA to _everyone_
   this month, and so both plugin Devs (if active) are being overwhelmed with totally
   n00b questions, as well as actual bugs/defects. Hopefully it clears up in a few
   weeks/months…
 *  [rawzef](https://wordpress.org/support/users/rawzef/)
 * (@rawzef)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/correct-transformer-rule-for-caption-shortcode/#post-7319627)
 * Hi! I don’t know if you solved this, but somehow I figure it out, I HAVE NO IDEA
   HOW IT WORKS, BUT IT DOES!
 * I added a separate rule just for the captions:
 * {
    “class”: “CaptionRule”, “selector” : “p.wp-caption-text” }
 * For some reason wordpress change takes the P instead of the DIV so if your markup
   shows div, then switch the p for the div, it should work.
 * Also I am trying to figure out how to add automatically likes and comments options,
   any ideas? Thanks
 *  [CmdrKeene](https://wordpress.org/support/users/shawnkeenegmailcom/)
 * (@shawnkeenegmailcom)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/correct-transformer-rule-for-caption-shortcode/#post-7319634)
 * Sigh… I need help with this too.
 *  [rawzef](https://wordpress.org/support/users/rawzef/)
 * (@rawzef)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/correct-transformer-rule-for-caption-shortcode/#post-8702691)
 * im back! so I figured it out how to work with the captions but Im having some
   trouble again with shortcodes, with earlier versions the code was translated 
   to <> tags, now it keeps as [] so its more difficult to translate since FBIA 
   takes the []shortcodes as text and I cant figure out how to properly define the
   selector, this is my case:
 * SHORTCODE
    `[tw_heading size="waves-shortcode" text="TITLE TEXT" weight="300"
   style="normal" position="center"][/tw_heading]`
 * SOURCE MARKUP
    `<p>[tw_heading size=”waves-shortcode” text=”TITLE TEXT” weight
   =”300″ style=”normal” position=”center”][/tw_heading]</p>`
 * TRANSFORMED MARKUP
    `<p>[tw_heading size=”waves-shortcode” text=”TITLE TEXT” 
   weight=”300″ style=”normal” position=”center”][/tw_heading]</p>`
 * so as you can see, the []tags are taken as text not as selectors, does anyone
   have any solution to this? 🙁
 *  [jcpacelli](https://wordpress.org/support/users/jcpacelli/)
 * (@jcpacelli)
 * [8 years, 9 months ago](https://wordpress.org/support/topic/correct-transformer-rule-for-caption-shortcode/#post-9337887)
 * Any updates to this? Also having shortcode issues. Theyre displaying as straight
   text.

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Correct Transformer rule for [caption] shortcode’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/fb-instant-articles_8fa0a4.svg)
 * [Instant Articles for WP](https://wordpress.org/plugins/fb-instant-articles/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/fb-instant-articles/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/fb-instant-articles/)
 * [Active Topics](https://wordpress.org/support/plugin/fb-instant-articles/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/fb-instant-articles/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/fb-instant-articles/reviews/)

## Tags

 * [caption](https://wordpress.org/support/topic-tag/caption/)
 * [facebook instant articles](https://wordpress.org/support/topic-tag/facebook-instant-articles/)

 * 10 replies
 * 6 participants
 * Last reply from: [jcpacelli](https://wordpress.org/support/users/jcpacelli/)
 * Last activity: [8 years, 9 months ago](https://wordpress.org/support/topic/correct-transformer-rule-for-caption-shortcode/#post-9337887)
 * Status: not resolved