Serendipity comments via an unordered list

Serendipity uses threaded comments by default. Threaded comments make it easier to understand which comments are replies to other comments by indenting replies. Each comment contains a comment depth value indicating where in the hierarchy that particular comment belongs.

For example, a comment to the original post, and not a reply to any other comment, has a comment "depth" of 0. A reply to that comment would have a comment depth of 1. A reply to that reply would have a comment depth of 2. And so on.

To achieve the desired indented appearance, the original default comments template (comments.tpl) used inline styling. The comment depth was multipled by 20 to produce an inline left padding value:

<div id="serendipity_comment_{$comment.id}" class="serendipity_comment serendipity_comment_author_{$comment.author|@makeFilename} {if $entry.author == $comment.author}serendipity_comment_author_self{/if} {cycle values="comment_oddbox, comment_evenbox"}" style="padding-left: {$comment.depth*20}px">

The Bulletproof template did nearly the exact same thing, but used left margin instead of padding:

<div id="serendipity_comment_{$comment.id}" class="serendipity_comment serendipity_comment_author_{$comment.author|@makeFilename} {if $entry.author == $comment.author}serendipity_comment_author_self{/if} {cycle values="comment_oddbox, comment_evenbox"}" style="margin-left: {$comment.depth*10}px">

As I looked at these examples, two thoughts occurred to me. The first was that I would like to eliminate inline styling, and the second was that the indented appearance reminded me of a different html element, that being an unordered list.

By its very design, unordered lists offer natural indentation:

• List item 1
  • List item 1 sub 1
• List item 2
  • List item 2 sub 1
  • List item 2 sub 2
• List item 3

Another advantage is that when left margin is applied to a particular list item, it is relative to where that list item is in the hierarchy - there is no reason to keep increasing the margin to force further indentation, as is done in the default template. Bonus!

The challenge for me was to properly build the unordered list using the comment depth value in comments.tpl. The idea is that each time through the loop, we close previously opened elements before opening the next element. The final pass through the loop, we check to see which elements remain open, and close them. The entire thing relies simply on the value of the current and previous comments' respective depth.

In the example code below, the exact html code building the comment has been removed for simplicity:

<ul class="comment-list">
{foreach from=$comments item=comment name="comments"}
    {if $smarty.foreach.comments.first}{assign var="prevdepth" value=$comment.depth}{/if}
    {if ($comment.depth == $prevdepth) && !$smarty.foreach.comments.first}
        </li>
    {elseif $comment.depth < $prevdepth}
        {for $i=1 to $prevdepth}
            </li>
            </ul>
        {/for}
        </li>
    {elseif $comment.depth > $prevdepth}
        <ul class="comment-children">
    {/if}
    <li id="comment-{$comment.id}" class="comment-list-item">
        <!-- comment html structure goes here -->
    {if $smarty.foreach.comments.last}
        {if $comment.depth>0}    
            {for $i=1 to $comment.depth}
                </li>
                </ul>
            {/for}
        {/if}
        </li>
    {/if}
    {assign var="prevdepth" value=$comment.depth}    
{foreachelse}
    <li class="comment-list-item"><div class="serendipity_center nocomments">{$CONST.NO_COMMENTS}</div></li>
{/foreach}
</ul>

In the code example above, each time comment depth increases, a new <ul> is opened using the same class of "comment-children". That class will have a left margin assigned to it, but because this is an unordered list, the margin is relative to that particular list's position in the hierarchy, and therefore pushes that list item further right.

You can see a screenshot of my test using this method by clicking on the photo at the top of this article. Below you can download a zipfile containing the smarty templates comments.tpl and trackbacks.tpl. The styles have been included within comments-style.css. These are all the styles I wanted to achieve my desired appearance, but only a few are actually necessary to achieve the indented appearance I was seeking.

Disclaimer: I did not use html5 elements in my example because the template I was using is not html5. It should be pretty easy to modify this using html elements like <article>, <time> etc. Also, the smarty code above requires s9y version 1.7 or higher.