For this fifth and final installment of this guide to Textpattern CMS tags, I’d like to show how you can take some of the things you’ve learned from the past few posts and use them with one another to have nested tags. I’m going to use the following ingredients in this example tag nest:
- some single tags
- some container tags
Tag nesting is best described as Textpattern tags within Textpattern tags. These tags can be the same, or different. At its simplest level, this example – which I introduced in my previous post – is a nested tag:
When you want to nest tags, it’s useful to do it gradually and in increments. In an earlier article I mentioned the dreaded missed/extraneous trailing slash that can render a page completely blank. A single character can throw up a roadblock in a big chunk of code, so it’s important to know the presentation differences between single and container tags. My personal tactic is to build my code gradually and do lots of testing as I go so I can spot errors and correct them. With that in mind, here’s how I might start to build a tag nest on a Textpattern page:
<txp:if_section name="default"> <p>homepage</p> <txp:else /> <p>not homepage</p> </txp:if_section>
It’s rudimentary, and I won’t have this on a production website, but I can immediately see in my development browser whether what I’m looking at is the root of the site. Once I’ve determined whether what I’m looking at is the homepage, I can start to build in some more tags:
<txp:if_section name="default"> <p>homepage</p> <txp:else /> <p>not homepage</p> <txp:if_section name="news"> <p>is news</p> </txp:if_section> </txp:if_section>
And so, the nesting begins. Note that the nested code block above uses conditional tags, but only one has the <txp:else /> tag. Again, this is perfectly OK. A conditional tag doesn’t need to have the <txp:else /> tag, and will function as expected without one. It’s absolutely fine to have the same tag used inside of itself. Additionally, there are no realistic limits on how far tag nesting can go, though you may find that using very high numbers of tags causes a delay in Textpattern processing or increased memory usage. This is no different than any other content management system; the more work an application has to do, the longer it will take, as a rule of thumb.
Using tags in tags can sometimes cause problems when attributes are used. Consider the following HTML5 <time> tag:
<time datetime="2014-04-01 11:30">
Now, it’s pretty straightforward to populate the text outside of the numeric values, and almost as easy to make the numbers themselves appear. We can use <txp:posted /> to output the date, like this:
<txp:posted format="%Y-%m-%d %I:%M" />
The snag arises when you wrap the <time> tag around it:
<time datetime="<txp:posted format="%Y-%m-%d %I:%M" />">
Count the instances of ” – there are four for the <time> datetime attribute. This will not work: the <time> tag will read an incorrect value because it will see the datetime attribute value as:
<time datetime="<txp:posted format=">
Yuck. Textpattern tags can use some other characters to wrap attribute values, such as ‘ – like this:
<txp:posted format='%Y-%m-%d %I:%M' />
Taking that revised code inside the <time> tag will create this little chunk of cleverness:
<time datetime="<txp:posted format='%Y-%m-%d %I:%M' />">
The <txp:posted /> tag will be processed, a numerical value will be substituted for the tag code and the <time> tag will work as expected. Neat, eh?
This is the end of the Textpattern tag mini-series, next time I’ll be showing you some of the ways that Textile can help you write your articles more quickly. I hope you can join me.