Textpattern: Building a Better Portfolio.

10 January 2005 • Filed under Textpattern, Coding

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.

⇡

Comments

Addison Hall » 10 January 2005 #

Man, I wish more Textpattern folks would blog more about how they implement their sites. Because it is such a custom program, many times the effect you want to achieve is so simple, but you just can’t quite put your finger on it. Don’t get me wrong—the Textpattern forum is great, but nothing beats real world examples.

BTW, love the new “subtle” changes you’ve made.

Shawn Grimes » 10 January 2005 #

Jared,

I really like the look of your portfolio, not to mention the actual work itself. I myself use wordpress on my blog becuase I didn’t even know about textpattern until recently, but it may be worth looking into after seeing what you have done with your layout and presentation. Nice job.

Jared » 10 January 2005 #

Man, I wish more Textpattern folks would blog more about how they implement their sites.
Me too. I can’t tell you how invaluable Jon Hicks’ writeups were in helping me get a hold of the commenting system. Even with all the effort being made in the TXP community, there is still a lack of articles explaining “real-world” applications of TXP code.

I have had several people recommend WordPress to me, but the truth is that the Textpattern community has been awesome when it comes to helping each other out with various issues. Not that the WordPress crowd does any less, but I just feel comfortable with TXP and see no reason to change in the foreseeable future.

gb » 10 January 2005 #

While I can’t say this post enthralled me as much as the others (I use wordpress, myself… but I figure I’ll give Textpattern a go one of these days on a side project), I felt compelled to comment on the Essential Audio… I enjoyed Sunfall Festival for quite a while (they being locals of Salt Lake), and it’s really sad that they’ve stopped making music together. Great to see them featured, though. SLC has had (and still does have) some great bands that get bupkis in way of exposure.

Jeff Smith » 11 January 2005 #

Great work with this Jared. I had something similar set up for my portfolio back when I was using MovableType on jeffsmithdesigns.com. I’ve since switched over to Wordpress, mostly because of comment spam and a faster development cycle, but perhaps when I get a little bit of time I’ll look in to TXP. Thanks for the write-up!

Viking Karwur » 13 April 2005 #

Hi Jared,

Thanks for the info… Currently I’m building my website with MovableType.

How about writting tutorial about “building online portfolio with textpattern : step-by-step” ?

Thanks Jared!

Jared Christensen » 13 April 2005 #

Viking – There is currently a step-by-step tutorial I helped write at Text Book. You can access it here.

Jon M » 10 September 2005 #

Thanks for the great article – just one question!

How do you stop the thumbnail excerpt from being wrapped in a tag?

many thanks,
Jon

Jon M » 10 September 2005 #

ah – I mean a paragraph tag .

Cheers
Jon

Jon M » 10 September 2005 #

D’oh i got it!

Turn off textile for the excerpt.

(Hangs head in shame…..)

Up Next

Golden Delicious.

Previously

Winter Wonderland.