Image captions in TinyMCE

Plone Support
10

This Diazo snippet does the trick:

    <replace css:content="section#content-core img:not([title=''])">
      <figure class="image-inline captioned">
        <xsl:copy-of select="." />
        <figcaption>
          <div class="captiontitle">
            <xsl:value-of select="./@title" />
          </div>
          <div class="captiondescription">
            <xsl:value-of select="./@alt" />
          </div>
        </figcaption>
      </figure>
      <xsl:apply-templates />
    </replace>

It only applies to images that have a title attribute set. It is good accessibility practice not to set title , so this attribute is a good candidate for an implicit toggle switch. You can still set alt (as you should) without triggering this rule. I'm using both title and alt just so I can have a caption with two independently stylable elements.
The not([title='']) is necessary because if a title is not set in TinyMCE, the title attribute is still added to the img, it just has an empty value.
Now you just have to apply your own CSS.

4 Likes