Customizing Graffiti CMS, part IV

(In which I continue taking apart a Wordpress theme to make it work with Graffiti. Part I. Part II. Part III.)

We're finally ready for the last piece of the jigsaw. I've created the layout.view file that determines the common look-n-feel for the site based on the Chronicles theme, and the index.view file that determines what a list of posts looks like. It's now time for the post.view file, the view that determines how to display a single blog post.

Apart from the comments, in effect this is much the same as a single post in a list of posts, so we can reuse the HTML/Chalk code we have from index.view. Of course, there's no list of posts, and we use $post.Body and not $post.Excerpt  but that's pretty obvious.

Onto the comments section, then. Here's the PHP code for that.

<?php comments_template(); ?>

Yeah, well, that's brilliant, that. There's no analog in Graffiti, so we're just going to have to roll our own. The best way to do this is to go to the Chronicles webpage, and click on the Test Run link. You'll get an example blog with the theme. Click on the comments link on one of the fake posts, and you'll get an example single post with a comments section. From this you can "view page as source" in your browser, and copy/paste the comment HTML into your post.view file.

From this, and viewing one of the supplied Graffiti themes (so you can get the loop code and the names of the comments properties) it's a piece of cake to roll up the loop again into a chunk o' Chalk. Here's what I got:

   1: #foreach($comment in $comments)
   2:     #beforeall
   3:         #if($comments.Count == 0)
   4:             <h3 id="comments">No responses to $post.title</h3>
   5:         #elseif($comments.Count == 1) 
   6:             <h3 id="comments">1 response to $post.title</h3>
   7:         #else 
   8:             <h3 id="comments">$comments.Count responses to $post.title</h3>
   9:        #end
  10:        <dl class="commentlist">
  11:    #nodata
  12:        #if($post.EnableNewComments)
  13:            <div class="entry">
  14:                <p>Feel free to add a comment...</p>
  15:            </div>
  16:        #else
  17:            <div class="entry">
  18:                <p>No new comments allowed.</p>
  19:            </div>
  20:        #end
  21:    #each
  22:        <dt id="comment-$comment.Id" #if($comment.CreatedBy == $post.CreatedBy) class="author" #end>
  23:            <span class="comment_num">
  24:                <a href="#comment-$comment.Id" title="Permalink to this comment">#$count</a>
  25:            </span>
  27:            <strong>
  28:                <a href="$comment.WebSite">$comment.Name</a>
  29:            </strong>
  31:            on $comment.Published.ToString("MMM dd yyyy") at $comment.Published.ToString("h:mm tt")
  32:        </dt>
  34:        <dd id="comment-body-$comment.Id" class="entry#if($comment.CreatedBy == $post.CreatedBy) author#end">
  35:            $comment.Body 
  36:            #if($isUser)
  37:                <a href="javascript:void(0);" 
  38:                    onclick="Comments.deleteComment('$urls.AdminAjax', $comment.Id,'comment-$comment.Id','comment-body-$comment.Id'); return false">
  39:                    Delete Comment
  40:                </a>
  41:            #end
  42:        </dd>
  43:    #afterall
  44:        </dl>
  45: end
  47: if($post.EnableNewComments)
  48:    <h3 id="respond">Leave a Comment</h3>
  49:    <form action="$url" method="post" id="comment_form">
  51:        #if($isUser)
  52:            <p class="unstyled">
  53:                Logged in as $user.ProperName <a href="$urls.Logout">[Logout]</a>
  54:            </p>
  55:        #else
  56:            <p>
  57:                <input class="text_input" type="text" name="author" id="author" value="" tabindex="1" />
  58:                <label for="author"><small>Name (required)</small></label>
  59:            </p>
  60:            <p>
  61:                <input class="text_input" type="text" name="email" id="email" value="" tabindex="2" />
  62:                <label for="email"><small>Mail (will not be published) (required)</small></label>
  63:            </p>
  64:            <p>
  65:                <input class="text_input" type="text" name="url" id="url" value="" tabindex="3" />
  66:                <label for="url"><small>Website</small></label>
  67:            </p>
  68:        #end
  70:        <p>
  71:            <textarea class="text_input text_area" name="comment" id="comment" rows="7" tabindex="4"></textarea>
  72:        </p>
  73:        <p>
  74:            $macros.CommentButton("%{id='submit', tabindex='5', value='Submit'}") 
  75:            <div style="display:none;" id="comment_status"></div>
  76:            <input type="hidden" name="comment_post_ID" value="$post.Id" />                
  77:        </p>
  78:    </form>
  79: end

This code also contains the comment form, should the post allow further comments.

Actually, I discovered after a week or so that this code had a bug that I'd copied directly from one of the supplied Graffiti themes. If you look carefully, it attempts to identify whether a comment was written by the author of the post or not, and displays the comment differently.

#if($comment.CreatedBy == $post.CreatedBy)

Although $post.CreatedBy is the correct property on the post, $comment.CreatedBy does not exist for the comment. It's obvious from reading the rest of the code that it should be $comment.Name, but it did cause me a couple of anxious minutes. With this change in place, my comments get highlighted in a contrasting background color.

And with that, I've come to the end of my small set of posts on how to change a Wordpress theme into Graffiti. I'll admit to having made more changes than just those I've described here (I've widened the basic theme display — it suits posts with code better), but once you have the basics, you can tweak to your heart's content.


Now playing:
Everything But the Girl - The Heart Remains a Child
(from Walking Wounded)

Loading similar posts...   Loading links to posts on similar topics...

No Responses

Feel free to add a comment...

Leave a response

Note: some MarkDown is allowed, but HTML is not. Expand to show what's available.

  •  Emphasize with italics: surround word with underscores _emphasis_
  •  Emphasize strongly: surround word with double-asterisks **strong**
  •  Link: surround text with square brackets, url with parentheses [text](url)
  •  Inline code: surround text with backticks `IEnumerable`
  •  Unordered list: start each line with an asterisk, space * an item
  •  Ordered list: start each line with a digit, period, space 1. an item
  •  Insert code block: start each line with four spaces
  •  Insert blockquote: start each line with right-angle-bracket, space > Now is the time...
Preview of response