BlogCFC Author Comments

One common design technique you will see on blogs is the distinct separation between a user comment and an author comment. Just by taking a quick glance at a group of comments you should be able to see where the Author has responded. In BlogCFC this is snap to do and I want to walk you through how I did it on my blog. Here is a quick snapshot of what my comments look like now in case they change in the future.

This first thing we need to do is setup our structure for our css. I took this completely out of the code so you could see it raw. You will notice that we have a container for all comments (comments) along with a comments section header (h3). Next we have a container for individual comments (comment). Each comment will have a head (commet-head) that contains information like the current comment number, the posters name and when the comment was posted. Finally each comment will have a body (comment-body) which is the actually comment. When we have multiple comments the single comment will just repeat itself.

Now that we have an idea of the structure for a single comment lets look at the structure for our example above. Below we have added the author comment. The first thing you will notice is that our first comment now has a class of comment-odd. This is because I changed the style for odd number comments, I think this just makes it easier to read. We will get into the code later for now we will just focus on the structure. Next I have added a class around the post number, for the author posts you will see that the class changes from comment-number to comment-number-author. Finally at the end of the comment head for the author post we have a class author-comment with the words Author Comment to easily distinguish between user and author comments.

Now that we understand the structure of how we are going to set it up we need to write some code. BlogCFC makes it very easy to distinguish between users and the author by requiring a email address when posting a comment. This is the field we will use to pick out our authors. Our code below is where we actually loop the comments for an entry. The first thing we do is look at the current row and if it is an odd row we use a grayish background defined in the comment-odd class. Next we want to style the comment number if this an author post we can do that by checking the comments.email variable, since all posts require an email address this will tell us if this post is from the author. I have just hard coded my email address in there but I am sure you could throw it in the config and grab it as a property. Finally we do the same thing for the words Author Comment. We check to see if comments email address equals that of our authors and if it does display our class.

This is by no means full proof because of course you could have cases where there are multiple authors for a single blog. Another problem is if a user decides to be a funny guy and put your email address as his. This however should work for most authors. Enjoy!