I recently rebuilt the Photo section of my site and added a photo-blog type of capability. Here's what I did. 

File
Because of the limitation in the number of file objects allowed under the Home license, I created a new CD file for the photos. The drag of this is that you can't use Magic Names to navigate from one CD file to the other.

Templates
I simplified the templates from those I use on the text part of the site after reading about how tables hamper site accessibility and that the W3C recommends against using tables to format pages.

I didn't want to go all the way using stylesheets to format the page because the different browsers render the pages differently. I'm an Opera snob, and I've learned the hard way that there are major differences in the way IE and Opera render <div> layouts.

My compromise is to create the basic structure using a table with one <tr> row and two <td> columns. Within the columns I use <div>s to provide the detailed structure. Like so:

Tagging example here.

Blog
Index.html is the main blog page. I have a for loop that pulls from a folder "blog". I had hoped that I could call just the .jpg files from the folder, but that didn't work. So I create an article for each image, insert the .jpg file as the body of the article, and then call for the body of the article in the loop. (This means that each image takes up two CD objects, so there is a limit of 250 images to be displayed).

I display only the 5 most recent images, just to keep the download time reasonable for the user. I then have an Archive article that lists the headline of each article as a link. Click the link, see the image.

To do: So far I've only had one or two images I've wanted to post for a particular day. I can foresee having a group of images that I want to post for a day. I need to figure out how I want to link from the blog page and how I want to display the group.

Stories
Stories are a linked group of images, usually combined with text. So far the stories are things I did pre-CD. Some I imported into CD, some I left outside of CD.

The table of contents is another loop that calls the intro page article of each story. The thumbnail is called from Extra1, where I put the Magic Name of the thumbnail image. Each of the current stories represents a differnt way of dealing with the intro article.

• In one case, the body of the intro article is an image that links to an outside story. (Martinique)
• In another case, I imported the story into CD and reworked all the links by replacing the existing with the proper Magic Name. (Garagart)
• In a third case, I imported the story into CD, created a new index page and put a meta tag redirect from the original index page to the new one. This way, I could use Magic Name links to the story's index page without having to rework all the other pages. (Pigeons)
• In the fourth case, I kept the story outside of CD and just created an index article within CD that redirected to the index page of the story. (Albany)
• And because they're in a differeint CD file, I don't feel like going through the hassle of figuring out the links. So there.

For those stories that I kept outside of CD, I decided to play it safe and tagged the Home link as a full URL.

To do: I haven't made any new stories since working with CD, so I don't know how I'm going to approach the task. One consideration will be how much I can play within CD. Another one, quite frankly, will be object overhead.

Loops

Here's the loop for the Blog page:

{$ foreach 5x in (folder "blog") $}
<DIV class=photo>{$x.body$}</DIV>
<DIV class=location01>{$x.teaser$}. </div><div class=date01>{$x.extra1$}</DIV>{$ next $}

Here's the loop for the Archive page:

{$ foreach x in (folder "blog") $}
<DIV class=photo02><A class=head1 href="{$x.link$}">{$x.headline$}</A>:</DIV>
<DIV class=location02>{$x.teaser$}.</DIV>
<DIV class=date02>{$x.extra1$}</DIV>{$ next $}

The stylesheet classes in the above two loops provide formating only -- text-alignment and font styles. 

The Stories table of contents depends on some style commands to work properly. The loop is:

<DIV class=photo03><A href="{$x.link$}"><IMG border=0 src="{$x.extra1$}" width=130></A></DIV>
<DIV class=location03><A class=head href="{$x.link$}">{$x.headline$}</a><br/>
{$x.teaser$}<BR>{$x.extra2$}</div><div style="clear: left;"></div>{$ next $}

The germane stylesheet element is:

div.photo03 {padding: 0px 10px 15px 30px; float: left;}

The keys are the float element and the clear element. The float element in <div class=photo03> sets the image to the left margin and allows <div class=location03> to display next to the image to the right. Without the float element, <div class=location03> would stack underneath <div class=photo03> . The float is cancelled by <div style="clear: left;">. Without the clear element, the next image stacks underneath <div class=location03>, next to the thumbnail above, rather than stacking underneath <div class=photo03> thumbnail.

And finally, here's what I used for the redirects:

<meta http-equiv="refresh" content="1; url=http://www.satterlee.com/albany/default.htm">