graphicpush

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

Textpattern Notes: Creating the Archive

When I initially developed this site with Textpattern, there was no easy way to create a page showing all entries ordered by date. Enter the versatile rss_suparchive plug-in and some sweet JavaScript, and graphicPUSH boasts a useful archive page. This is my story.

Over the past week or so after the official launch of the new graphicPUSH (technically version 3), I have been tweaking, shifting, pushing and adding to the site. One of the larger additions has been a comprehensive archive of all news items.

When I initially built Version 3’s architecture, one of the biggest stumbling blocks was providing a comprehensive archive list of all news entries, something easily achieved in Movable Type. While Textpattern is flexile, the default tags are more restricting and there was no simple way to display a dynamically built, chronological list of articles.

After a bit of rooting around the Textpattern forum, I came across a wonderfully simple plug-in that accomplishes exactly what I needed. Written by Rob Sable, rss_suparchive deeply extends TXP’s output capability with a single tag that employs dozens of variables for output customization.

Creating the Page and Redirect

Since I use clean URL mode, I wanted to create a clean path to the archive, specifically http://www.graphicpush.com/archive. I created a new Section called “archive,” along with the accompanying .htaccess redirect and extensionless PHP file to simulate the directory:

<?php
include "./textpattern/config.php";
$s = "archive";
include $txpcfg["txpath"]."/publish.php";
textpattern();
?>

I then created a new Page called “archive,” so the output could be completely customized without running afoul of “default” or any other page template. (Anyone with even a small amount of Textpattern experience will understand the previous steps. For the rest of you … well, it just gets denser. Sorry.)

The rss_suparchive Plug-In

I installed the rss_suparchive plug-in. Inside the “archive” Page template, I inserted the following code:

<txp:rss_suparchive section="news" dateformat="F Y" showsubdate="1" />

Even though Rob has provided a host of options (such as displaying the author or adding specific class attributes), I required only a few key variables. section="news" defines that only content from my “news” Section will be pulled, which is basically everything that appears on the homepage and excludes the rest of the site’s content (like articles, tutorials, colophon, the contact page—all of which have their own respective Sections). dafeformat="F Y" defines the format of the header date above the entries. In this case, each month is represented like October 2004. showsubdate="1" simply turns on the feature to show the day of the month in front of the entry title.

When I rendered the page, I received a string of PHP errors at the top of the page. I posted this problem directly to Rob’s site, and received an answer in hours—it seemed the culprit was another plug-in call zem_debug, which displays errors that might otherwise be silent. I deactivated this second plug-in and the errors (which didn’t actually affect the HTML output) disappeared.

rss_suparchive also comes with another “sub-plug-in” called rss_suparchive_bycat which displays entries by Category instead of by date. Intrigued, I began playing around with the tags and discovered this could also be of value to my readers—after all, someone might be more interested in reading business-related entries than my inane ramblings on browsers.

The JavaScript Switch

I did not want a single page showing two huge lists, nor did I want another item in the main navigation. Wouldn’t it be nice if the user could just switch the view dynamically right in the page?

Enter a wonderful site called Dynamic Drive and a beautiful, efficient script called “Tab Content Script.” This piece of JavaScript allows for displaying a single <div> while hiding others—a technique commonly used for tabbed boxes.

After dropping the code into my page and stripping out the pre-formatted CSS, it was a simple matter of customizing the provided example (which was just an unordered list for the menu and a group of <div>’s with unique IDs for the content).

For those looking to employ this script, I have two tips:

  1. Don’t change the class or ID attributes that are provided. They are referenced in the JavaScript.
  2. Delete all the CSS except for one tag: .tabcontent{display:none;} This one is important to the functionality of the script.

At the end of the day, my TXP code looks like this:

<h2>News Archive</h2>
<ul id="tablist">
<li><a href="http://www.graphicpush.com" class="current" onClick="return expandcontent('sc1', this)">Archive By Date</a> | </li>
<li><a href="http://www.graphicpush.com" onClick="return expandcontent('sc2', this)">Archive By Category</a></li>
</ul>
<div id="tabcontentcontainer">
<div id="sc1" class="tabcontent">
<h2>Archive By Date</h2>
<txp:rss_suparchive section="news" dateformat="F Y" showsubdate="1" />
</div>
<div id="sc2" class="tabcontent">
<h2>Archive By Category</h2>
<txp:rss_suparchive_bycat section="news" showcatcount=&rdquo;0&rdquo; />
</div>
</div>

Modifying rss_suparchive

There was one snag. rss_suparchive renders all its HTML as handsome, sematic definition lists—the month is the title and the entries are individual definition descriptions. However, rss_suparchive_bycat renders its list with a <div> for the subhead and unordered lists for the entries. Not only does this not make sense semantically, it played havoc with my design since my <dl>s are styled differently than my <ul>s.

In the end, I went into the actual plug-in code to alter the output. I did not change any of the actual functionality—my great contribution consisted of replacing the <div> with a <dl> and the <li>s with <dd>s. I also removed the link on the Category name, since it just linked to a page showing all the entries in that Category—which was my intention with the archive page in the first place.

Beyond the Archive

After the success of the archive page, I employed the same technique on my Link Library. This latter section is still being refined and content is still being aggregated, but so far I think the technique is a success.

And in the spirit of Categories and proper organization, I am creating a new Category called “Textpattern,” which I hope will house more diatribes like this. Since I am not too technically inclined these posts might be slow in coming, but hey—at least they’ll be easy to find.

commentary + criticism

zeus

wrote the following on Sunday January 9, 2005

Congrats on the design.

Your story will be in handy.

Bobby

wrote the following on Monday January 10, 2005

This will help when I make the shift from blogger to Textpattern. Thanks for sharing your experenices. Nice articles, you are bookmarked :)

cheers!

david gouch

wrote the following on Tuesday January 18, 2005

For your date/category toggling there is a simpler, more flexible (name IDs what you want), and smaller script: ExpandCollapse

Kevin

wrote the following on Tuesday January 18, 2005

David—That is a good, simple script, but the one I use simultaneously shows a div then hides other divs. Since I don’t write JavaScript, it would be hard for me to use anything other than an “out-of-the-box” solution. In any case, great link to a site I’ve never been!

david gouch

wrote the following on Wednesday January 19, 2005

Kevin:
The small script does the same thing: it toggles whatever divs you put in parentheses. So, expandCollapse('div-name') will display div-name as “block” or “none” depending on what it is initially.

Here’s an example, out-of-the-box solution