Textile links, images and tables in Textpattern CMS

admin-ajax

Textpattern CMS includes support for Textile, a markup language for formatting content. In this series of how-to articles, I’m covering some of the more widely-used techniques in Textile to save you some time and typing.

For this Arvixe tutorial, I’m focussing on links, images and tables. These are in ascending levels of complexity. Bluntly, links are straightforward, images are also pretty easy, and tables are – well – Textile tables sort of terrify me a bit and I have to refer to a cheat sheet each time I roll one out. There’s no shame in that, though. None at all.

Let’s start off easy. Links. Take the following HTML:

<a href="http://example.com">Amazing Adventures in a Smoked Cheese Factory</a>

Links are seen on almost every website. Thankfully, they’re easy to build, so there’s no barrier to entry. Textile makes it even easier:

"Amazing Adventures in a Smoked Cheese Factory":http://example.com

Wrap the text you want to link in inverted commas, add a colon, and the final destination. Done. If you want to add some extra juice for accessibility and SEO, then you need a `title` attribute in your HTML, like this:

<p><a href="http://example.com" title="Watch Frank talk about his work experience in a 5 minute video about smoked cheese">Amazing Adventures in a Smoked Cheese Factory</a></p>

In Textile, put that new information in brackets after the link text – like so:

"Amazing Adventures in a Smoked Cheese Factory(Watch Frank talk about his work experience in a 5 minute video about smoked cheese)":http://example.com

Moving onto images, they’re also pretty easy in HTML:

<img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Lemon-Whole-Split.jpg/320px-Lemon-Whole-Split.jpg" />

That’s a photo of a lemon and half a lemon). To build that same structure in Textile, wrap the image URL in bangs (exclamation points/marks):

!https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Lemon-Whole-Split.jpg/320px-Lemon-Whole-Split.jpg!

Note that the `alt` attribute in the HTML example is missing content. Browsers will handle image tags like this without the `alt` attribute, but some HTML specifications/schemas require it. To keep the validators happy, an `alt` value is needed:

<img alt="Photo of a whole lemon and half a lemon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Lemon-Whole-Split.jpg/320px-Lemon-Whole-Split.jpg" />

With Textile, just thrown the `alt` content into parentheses after the image URL, like this:

!https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Lemon-Whole-Split.jpg/320px-Lemon-Whole-Split.jpg(Photo of a lemon and half a lemon)!

How about combining a link and an image? Totally doable. Look:

!https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Lemon-Whole-Split.jpg/320px-Lemon-Whole-Split.jpg(Photo of a lemon and half a lemon)!:http://example.net

That spits out the following code:

<a href="http://example.net"><img alt="Photo of a lemon and half a lemon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Lemon-Whole-Split.jpg/320px-Lemon-Whole-Split.jpg" title="Photo of a lemon and half a lemon" /></a>

Note that I didn’t link the smoked cheese site with a photo of the lemons because that’s too weird, even for me.

OK, tables. Deep breath, Cooper. Let’s do this.

Tables can be simple, or complex. The more components a table has, the more code is required to achieve it. Starting with the easier end of the spectrum:

<table>
<tr>
<td> This </td>
<td> is </td>
<td> a </td>
<td> very </td>
</tr>
<tr>
<td> simple </td>
<td> three </td>
<td> row </td>
<td> table </td>
</tr>
<tr>
<td> with </td>
<td> four </td>
<td> columns. </td>
<td> </td>
</tr>
</table>

In Textile, just throw in pipes and some line breaks, and that’s it:

| This | is | a | very |
| simple | three | row | table |
| with | four | columns. | |

Far less typing to do. If you’re using Textpattern with HTML5, then a `<thead>` is required. In HTML, it’s like this:

<table>
<tr>
<thead>
<tr>
<th>Col 1 </th>
<th>Col 2 </th>
<th>Col 3 </th>
<th>Col 4 </th>
</tr>
</thead>
<td> This </td>
<td> is </td>
<td> a </td>
<td> very </td>
</tr>
<tr>
<td> simple </td>
<td> three </td>
<td> row </td>
<td> table </td>
</tr>
<tr>
<td> with </td>
<td> four </td>
<td> columns. </td>
<td> </td>
</tr>
</table>

Textile now starts to get a bit more tricksy:

|^.
|_. Col 1 |_. Col 2 |_. Col 3 |_. Col 4 |
|-.
| This | is | a | very |
| simple | three | row | table |
| with | four | columns. | |

What a `<tfoot>` in there, too? Sure thing:

|^.
|_. Col 1 |_. Col 2 |_. Col 3 |_. Col 4 |
|~.
|\4. Table footer spanning 4 cols |
|-.
| This | is | a | very |
| simple | three | row | table |
| with | four | columns. | |

Phew. Note the footer spans 4 columns. A backslash is used to span columns and a forward slash is used to span rows.

There’re even more fine-tuning bits and pieces with Textile tables, but I’m going to save those for a future post.

Looking for quality Textpattern Hosting? Look no further than Arvixe Web Hosting and use coupon TEXTPATTERN for 20% off your first invoice!

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 - petecooper.org - 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 *