Two Sample Templates

2 April, 2002

I recently promised I would write an article on the template behind my photo pages. (NOTE: these no longer exist; I couldn't afford the bandwidth.) So here it is. Last week I restructured the site to use XHTML and CSS. As part of that restructuring, I created a couple of new templates.

The Index Template

The first template I created was an "Index" template. This is what is behind my front page, the archives, and the section pages (basically everything that the menu links to).

<HTML>
<HEAD>
  <TITLE>{$.headline$}</TITLE>
  <link rel="stylesheet" type="text/css"
    href="../idxstyle.css" />
</HEAD>
<BODY bgcolor="#ffffff">
{$ setDateTimeFormat "English"
    "dddd, MMMM dd, yyyy" "hh:mm" $}

<p id="sitename">{$ .SiteName $}</p>

<div class="sidebar">

<div class="menu">
{$.Menu$}
</div>
{$ if nonblank .sidebar $}
{$.sidebar$}
{$ endif $}
</div> <!-- end sidebar -->
<div class="container">

<div class="headline">
<span class="title">{$.headline$}</span><br />
</div>
<div class="body">

{$.body$}

</div> <!-- end body -->

</div> <!-- end container -->

</BODY></HTML>

I'll go through this piece by piece. In the TITLE tags, I have the headline field. This is pretty standard.

Right after the title, I have a link to the stylesheet that I use for all of the index pages. Note that the magic name is what I have in the href field. (CityDesk will replace it on this page when I publish this article and there isn't a straightforward way of preventing that, so you'll see idxstyle.css.)

I set the date/time format first in the body so that any dates that appear in any index are formatted the way I want.

Next I have a section for the site name. This is the banner that appears at the top of all of my pages. I keep it in a variable called SiteName for convenience and consistency.

After the sitename, I create a div for my sidebar. This isn't the CityDesk sidebar field, it's what I call the area of the page where I display a brief menu, my bio (on pages where it is appropriate) and other stuff (including the CityDesk sidebar when the page is an article). On Index pages, the sidebar contains my menu (which, again is stored in the variable Menu) and the sidebar for the page if there is one.

Finally, I have another set of divs with the headline and the body.

It's pretty straightforward, really -- but you have to know some X/HTML and/or CSS to be able to set something like this up. The magic of the formatting is all contained in the CSS associated with this index (idxstyle.css).

The Gallery Template

Here's the template I use for the gallery pages (not the main index page, that uses the template described above):

<HTML>
<HEAD>
<TITLE>{$.headline$}</TITLE>
<link rel="stylesheet" type="text/css"
    href="../gallery.css" />
</HEAD>
<body>
<div class="bigimage">
<A href="{$.extra1$}.jpg">
  <IMG src="{$.extra1$}-sm.jpg"
      alt="click for full size">
</A>
</div>

<div class="caption">
  {$.teaser$}<
/div>

<div class="about">{$.about$}</div>
<div class="menu">{$.Menu$}</div>
</body>
</html>

This one is even simpler! Again, most of the formatting and positioning magic is done in the css. This template imposes some usage requirements on the articles. First, each image in the gallery must have a small and full-size version. The small version is the same name as the full-size version with the addition of "-sm" in the filename part (i.e. pic.jpg would have a small version named pic-sm.jpg). I import both of these images into the same folder as the articles. When I create a new image for the gallery, I put the filename into the extra1 field in the article. This is slightly fragile, because I'm not using the magic name for the image file -- since there are two of them. When the article is published, the small version of the picture appears on the page with a link to the full-size version. This allows people to take a quick look at the picture to see if they want to take the time to grab a large (around 600k) file.

My gallery index page uses a little extra magic. In each image article, I put either "left" or "right" into the extra2 field. Then in the gallery index I have:

{$if nonblank x.extra2$}
  <div style="float: {$x.extra2$};">
{$endif$}
{$if blank x.extra2$}
  <div style="float: left;">
{$endif$}
<a href="{$x.link$}">
  <IMG height=100
      src="images/Gallery/{$x.extra1$}-sm.jpg"
      alt="{$x.headline$}">
</a>
</div>
<div>
  {$x.teaser$}
</div>

I use "left" or "right" to control the direction in which the image should float. This is how I get the alternating pattern of left/right oriented images. Also worth noting is that I force the image height to be 100 so that you can see small thumbnails of a bunch of images.

Things On My Todo List...

Some things that I want to fix, change, or create: