graphicpush

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.

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.