Textpattern: Building a Better Portfolio.
You may or may not have noticed that the Portfolio has changed a bit. Since I have had a few people inquire as to how I was able to make the Portfolio behave the way it does, using Textpattern, I’ve decided to write up a quick explanation.
This article assumes that the reader has a general understanding of Textpattern semantics and building blocks, such as forms and page templates. Tested only on Textpattern 1.0rc1.
Before moving this site to Textpattern, my portfolio was set up—well—the way you see it now. Up until a few days ago, I had been using a reasonable substitute for my original portfolio navigation by running a link list down the right hand column, but it wasn’t optimal. I wanted my thumbnail-based menu back.
And it turns out it was easier than I thought it would be. Getting the thumbnails to appear instead of text links was easy enough to do by creating a form with the syntax <txp:permlink><txp:excerpt /></txp:permlink> and then using it as a listform. By using an img tag in each portfolio item article’s excerpt field, this form would output a thumbnail wrapped in a hyperlink that directed itself to the correct portfolio piece. Just like an article permalink.
The difficulty came with getting the thumbnail menu to disappear from the individual article pages, and only appear on the “front page” of the Portfolio section. As it stood, the thumbs were showing up beneath the portfolio articles on every page, and that just looked bad.
The solution to this formatting problem was the standard <txp:if_article_list> and <txp:if_individual_article> tags. The first tag encloses data that will appear only if the current page being displayed is the section’s front page, while the second tag encloses data that will appear only if the current page being displayed is an individual article’s page.
With that knowledge in place, I edited my Portfolio page template by enclosing the thumbnail menu like so:
<txp:if_article_list>
<div class="pthumbs">
<h3>Web</h3>
<txp:article_custom category="web" sortby="Posted" sortdir="desc" listform="excerpt_portfolio" />
</div>
<div class="pthumbs">
<h3>Interactive</h3>
<txp:article_custom category="interactive" sortby="Posted" sortdir="desc" listform="excerpt_portfolio" />
</div>etc...</txp:if_article_list>
Right below that, I enclosed the individual article tag like so:
<txp:if_individual_article>
<txp:article limit="1" form="portfolio" />
</txp:if_individual_article>
The result was exactly what I desired; my Portfolio page now displays thumbnail images, instead of text links, and the thumbnails disappear on all other Portfolio pages.
Thanks go to Pedro Palazón, Rob Sable and the kind folks at the TXP Support forums for their assistance.
