Beyond Text Formatting with Textile in Textpattern CMS

In this fourth part of my series of articles on using Textile in Textpattern CMS, I’m going to up the stakes and show you how Textile processing can go beyond straightforward text styling. Previously I showed how the look-and-feel of your text content could be changed with some simple Textile tags – today I’m going to move onto images, including applying CSS classes, alignment and more. Let’s begin.

If you want to use Textile in your Textpattern posts, you have options as to how you go about it. If you try it and like it, you may benefit from learning the structure in the same way you’d learn any other technical language. While learning styles differ from person to person, a reference guide is usually pretty useful for most people. In the Write panel, there’s a sidebar with some Textile help text in it:

Heading: hn.
Blockquote: bq.
Numeric list: #
Bulleted list: *
Definition list: ; :
-deleted text-
+inserted text+

Rather than explain all of these in detail, I’m going to cherry pick a few and then recommend you go and try the rest out to see how they work in practise. Textpattern can handle many different kinds of article as a content management system, and some functions will be more appropriate for you than others, depending on the content and audience of your site. It’s trivial to replace an (X)HTML <img> instance with Textile, and also easy to extend it. Here’s an example of a (X)HTML image tag in action:

<img src="">

Now, while this won’t validate in some checkers, it will be rendered by the huge majority of browsers. To achieve the same result in Textpattern, peek at the list above for the !imageurl! reference and simply wrap an image URL in exclamations (bangs):


What this Textile wrapping does is construct the <img> tag and then add an alt attribute:

<img alt="" src="" />

The alt attribute is used to describe the image if it cannot be displayed. To extend the Textile tag to include a valid alt description, and also to popular the title attribute, use parentheses after the image URL, like this:

! image of a lemon)!

…which gives you this:

<img alt="an image of a lemon" src="" title="an image of a lemon" />

Perhaps the image of a lemon should be aligned to the right – no problem: just add a greater than before the URL:

!> image of a lemon)!

…which adds the align attribute to make this:

<img align="right" alt="an image of a lemon" src="" title="an image of a lemon" />

Note how all of the attributes are in alphabetical order. If you add parentheses before the URL, then that gets translated into a CSS class, so this:

!>(image-fruit) image of a lemon)!

…gives you this:

<img align="right" alt="an image of a lemon" class="image-fruit" src="" title="an image of a lemon" />

Finally, to make our lemon image have a CSS style, use curly brackets:

!>{border:2px solid blue;}(image-fruit) image of a lemon)!

…which gives us our final <img> tag of:

<img align="right" alt="an image of a lemon" class="image-fruit" src="" style="border:2px solid blue;" title="an image of a lemon" />

From experience, there are right and wrong ways to order Textile attributes to get the desired effect. Using the Textile sandbox is an excellent way to learn, along with having your own Textpattern installation on Arvixe to get familiar with, and I recommend both options.

Looking for quality Textpattern Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , | Posted under Textpattern | RSS 2.0

Author Spotlight

Pete Cooper

Pete Cooper has been using Textpattern since 2005. Textpattern is his preferred CMS weapon of choice. Its logical and flexible approach to content management makes Pete happy, as does its lightweight core and helpful user community. Pete's website - - runs on top of Textpattern and chronicles his day-to-day experiences from his home near the Atlantic in north Cornwall, United Kingdom.

Leave a Reply

Your email address will not be published. Required fields are marked *