graphicpush

Thoughts on branding, design, writing and life by Kevin Potts. Established 2003.

Multi-Category Landing Page in TXP

In Textpattern, creating a sectional landing page listing articles by category is not as easy as it sounds. We’ll need both article tags and a few of our conditional friends to make it work.

OK, I know the title of the post might be a bit confusing, so I’m going to jump right into an explanation. Textpattern organizes content into “sections” for different parts of the site (about us, portfolio, services, contact, etc) and then “categories” which are independent of sections but relate a more semantic value to an article. (For instance “web design” could be a category that might appear in the “portfolio” section mentioned above.)

Every article must have a section assigned because every page generated by TXP is assigned to some section—there are no “section-less” pages. Categories are optional but recommended. Sometimes you’ll want multiple categories related to a section. Following our example above, articles filed in the “portfolio” section might have any one of these categories assigned to them:

  • Web Design
  • Print Design
  • Logos and Identity
  • Environmental Graphics

If Textpattern is set to clean URL mode, then sections are easily accessed via the section name after the domain name, like http://www.yourmom.com/portfolio, making them very attractive for landing pages.

Unfortunately, the CMS does not intuitively enable you to divide articles into categories on a section landing page. For instance, say I wanted to set the page up like this, where each category of my portfolio was neatly laid side-by-side.

sample layout of portfolio landing page

The Tags We Are Given

Textpattern’s default tag to display an article is <txp:article />, which is context-sensitive, meaning it will only display articles from that section. However, there is no way to tell the tag to just display articles from the “web design” category in the “portfolio” section. If we slap a simple <txp:article /> into the template driving the “portfolio” section, it will display all articles from that section in one long list, regardless of defined category.

We also have the <txp:article_custom /> tag, which is not contextual, meaning it will display every article from anywhere wherever you place the tag. However, <txp:article_custom /> comes with an arsenal of attribute options. The following tag would only display articles assigned to the “portfolio” section and the “web design” category:

<txp:article_custom section="portfolio" category="webdesign" form="yourform" />

Because <txp:article_custom /> is not context sensitive, it is best used for lists, where <txp:article /> is best used for displaying the full content of an article. We’ll need both for yourmom.com’s Portfolio landing page, along with a few conditional tags.

Building the Page

First, we’ll set up two forms: one for the list of articles, the other for the full article content. We’ll call the first form “portfolio_list” and the second “portfolio_article.” Important: make sure to save both these forms as “article” types.

“Portfolio_list” is the easy one. Since the landing page will only have a list of articles, not every article’s full content, it can be something as simple as this:

<li><txp:permlink><txp:title /></txp:permlink></li>

We’ll wrap these in a <ul> tag in just a moment.

“Portfolio_article” will display the full content of the article, so we’ll need a bit more in this one. For our example, we’ll use this:

<h3><txp:title /></h3>
<txp:body />

That’s it for the forms. Open your template for the section, and wherever you want the content, place the following code, replacing the div IDs, category and section names as needed.

<txp:if_article_list>
<div id="webdesign">
  <h3>Website Design</h3>
  <ul>
   <txp:article_custom section="portfolio" form="portfolio_list" category="webdesign" sortdir="asc" />
  </ul>
</div>
<div id="printdesign">
  <h3>Print Design</h3>
  <ul>
   <txp:article_custom section="portfolio" form="portfolio_list" category="printdesign" sortdir="asc" />
  </ul>
</div>
<div id="logodesign">
  <h3>Logo and Identity</h3>
  <ul>
   <txp:article_custom section="portfolio" form="portfolio_list" category="logodesign" sortdir="asc" />
  </ul>
</div>
<div id="envirodesign">
  <h3>Environmental Graphics</h3>
  <ul>
   <txp:article_custom section="portfolio" form="portfolio_list" category="envirodesign" sortdir="asc" />
  </ul>
</div>
</txp:if_article_list>
<txp:if_individual_article>
<txp:article form="portfolio_article" />
</txp:if_individual_article>

Further Explanation

The conditional tags are critical because they tell Textpattern what to do for a landing page versus an individual article page. Also, because <txp:article_custom /> is non-contextual, we have to repeat the construct for each section, telling TXP specifically what articles from which category to display. In contrast, the <txp:article /> tag is contextual so we only need one—Textpattern knows to use the form “portfolio_article” for any article referenced from this template.

It may seem obtuse to have two different article tags in one CMS, and I agree. I would rather have one master <txp:article /> tag that I can customize til the cows come home, but, alas, I am not smart enough to write something this complex. I have to trust that the people behind the scenes are substantially more clever than myself and know what they’re doing.

commentary + criticism

Chris Griffin

wrote the following on Wednesday November 9, 2005

Nice Read,

I’m currently in the middle of a redesign of my own and I decided to go with TXP as the CMS.

I had it set up in my mind that I would create categories as you did such as “website design” and “print design” and so forth. I would then tag each client with every service I provided for them.

But I ran into a problem, Some of my clients I did more than 2 services for and each article only supports 2 categories. So my tagging method is flawed.

I’ve been reading around and it seems there might be a solution to this problem in the works. Somebody has hacked TXP to give it unlimited categories using a multi-selection list.

But alas, no plugin or mod has been created. It’s kind of aggravating I switched from MT that would of supported this method, but Textpattern is definitely stronger in many more ways.

Kevin

wrote the following on Wednesday November 9, 2005

You could try applying tags (“web,” “print,” “logo,” etc.) to the “keywords” field for each article. Although I do not use this method, I know you can order article lists through keyword value, which would basically be using the method described above but using the attribute “keywords” instead of “category.”

More Info:
article_custom (details sorting articles by keywords)
keywords (a small description of their functionality)

Hope this helps.

Jeff Adams

wrote the following on Wednesday November 9, 2005

I have often wondered why there is two different article tags. txp:article should have all the functionality of txp:article_custom and be context sensitive.

Is there any specific reason to have 2 separate article tags?

The Co-worker

wrote the following on Wednesday November 9, 2005

I think my brain just peed itself.

Kevin

wrote the following on Wednesday November 9, 2005

I don’t know why, exactly, but the developers think it is important to have a context sensitive tag (article) and a non-contextual tag (article_custom). As I stated in my article and on the TXP forums, I would sooner just have a single tag that can accomplish everything.

Chris Griffin

wrote the following on Wednesday November 9, 2005

Thanks for the suggestion Kevin,

Sounds like that should work.

I just started using TXP about a week ago and beforehand I had absolutely no experience with it.

Coming from MT it took me about a day and a half to fully grasp how it works because the template structure is much different.

james

wrote the following on Tuesday December 6, 2005

Thank you very much for this article. I kept wondering how to use two forms on the same page without getting the same content displayed twice. Thanks a lot.