In this penultimate article in my mini-series about Textpattern CMS and its use of tags to provide enhanced functionality, I want to explain how the different types of tags can affect your output. Tags can be:
- a single tag
- a container tag
Single tags are self-closed with a trailing slash before the >. The following are examples of single tags (not an exhaustive list):
- <txp:article_id />
- <txp:image />
- <txp:title />
In each case, the tag performs its task within the bounds of itself. The three tags listed above will all do their work without interfering with one another. If you’re familiar with (X)HTML, the img and meta tags are both good examples of a self-closing tag:
<meta name="fruit" value="apple" /> <img src="lemon.png" alt="lemon" />
I explained some of the concepts behind container tags in my last post, but essentially they do not self-close and run in pairs. The following are examples of container tags (again, non-exhaustive):
In each of these cases, the tags perform their tasks inside a pair and in some cases use a <txp:else /> should the need arise. Check out my last post for examples of conditionals, it should be a useful primer to your understanding.
The majority of Textpattern tags are self-closed, single tags. Textpattern conditional tags are container tags by definition. There are a few non-conditional tags which are containers, too, but these are rare.
The fun really starts when you can use a tag as a single tag and/or a container tag. One such example of these hybrid tags is <txp:permlink>. Here it is in its single tag use:
The trailing slash before the > indicates it is a single tag. This outputs the URL of the article being displayed or referred to. The format of the URL depends on what you’ve set in the administration preferences, but essentially it just spits out the plain text version of the URL. Simple. Now, using <txp:permlink> as a container tag can turn the contents of the container into a hyperlink:
<txp:permlink>Link to article</txp:permlink>
Note the trailing slash has been removed and the tag now operates as an opening and closing pair. The contents are hyperlinked to the article in the format you select in your administration preferences. To take this example further, you can also use a single tag as the hyperlink anchor text, like this:
This is now a pure Textpattern tag from start to finish. It’s a single tag nested inside a container, with the single tag being self-closed with the trailing slash. The title is extracted from the article and the URL associated with the article is wrapped around it with a hyperlink.
Taking this to another level, this is perfectly valid code:
Whether this code is pretty or ugly is left as an exercise for the reader, but this will create a hyperlinked URL to the article in question.
I keep returning to this training slash identifier because it’s important to know the difference between the types of tag. On a practical level, using <txp:else> instead of <txp:else /> inside a conditional will likely just show a blank page. I’ve lost count of the number of times I’ve done this will developing with Textpattern and wondered why I’m not seeing anything in my browser. A single trailing slash is all it takes to make or break a page, so make sure you’re using the tags in their intended format. It’ll save you time and sanity in the long run, I assure you.
I have the Textpattern tag reference as a bookmark in my browser because it’s invaluable to me. If you interested in Textpattern and learning how it works, I recommend you do the same if you can afford the bookmark bar real estate.