Textpattern - Image with caption in Textile and CSS

How to add captions to images in textile? When creating texts, graphics with their respective captions should also be included. Common CMS typically use minimalized input languages such as markdown or textile. The examples used in this article use textile as the language, a corresponding implementation in markdown is also possible.

The challenge

Textpattern uses textile as the markup language. This has advantages, as the syntax is simple, allowing writers to focus on the essentials of writing their text. However, textile also comes with some limitations. So it has proven useful in HTML5 documents to implement the captions of images using the <figure> element.

<figure>
    <image src="image.png" alt="..."/>
    <figcaption>
        image caption
    </figcaption>
</figure>

Unfortunately, <figure> is not supported natively by textile (as of February, 2018).

Accordingly, I have searched for a way to add captions to images without using <figure>.

Applicable approaches

I have identified two approaches as useful.

• Use of tables and CSS
• Using <p> and <span> with CSS

In Textpattern, the CSS can be inserted as a style in the Admin console.

Use of tables

The approach with tables and CSS uses the integration of <table> in textile.

|(image). !(img-fluid) image.png!|
|(caption). image caption|

Textile compiles this code to an HTML table.

<table>
    <tr>
        <td class="image">
            <img alt="" class="img-fluid" src="image.png" /> 
        </td>
    </tr>
    <tr>
        <td class="caption">image caption</td>
    </tr>
</table>

The table can be styled with CSS.

td.image {
	border:0;
}
td.caption {
	border:0;
	padding-left:0.5em;
	padding-top:4pt;
	padding-bottom:4pt;
	font-size:0.75em;
	line-height:1.5em;
	font-style:italic;
	color:#424242;
	text-align:center;
}

Use of <p> and <span>

This approach makes use of the integration of <p> and <span> in textile.

p(img). !(img-fluid)image.png! 
%image caption%

Textile erzeugt aus diesem Code HTML

<p class="img">
    <img alt="..." class="img-fluid" src="image.png" /> 
    <br />
    <span>
        image caption
    </span>
</p>

The <p class="img"> and its child nodes can be styled with CSS.

p.img {
	display: table;
	margin: 1em auto 1em auto;
	text-align:center;
	padding:1pt;
	border:#f0f0f0 solid 1pt;
}
p.img > img {
	display: inline-block;
}
p.img > img ~ span {
	display:block;
	border:0;
	padding-top:4pt;
	padding-bottom:4pt;
	background-color:#f0f0f0;
	font-size:0.75em;
	line-height:1.5em;
	font-style:italic;
	color:#424242;
}
p.img > br {
	display:none;
}

Summary and Outlook

Even though textile does not support the use of <figure> natively (as of February 2018), images can still be labeled by using the textile syntax and CSS.

image caption with <p> and <span>

The approach with <p> and <span> appears as the more flexible variant, since when using tables the <table> element is not addressable via CSS3 selectors. This will potentially change via CSS4 selectors and the use of table:has(td.image), but :has() is currently (February 2018) not implemented in popular browsers.