Jul 03
Implementation of my comments in Expression Engine
2006 at 01.45 am posted by Veerle
Some of you asked for an Expression Engine tutorial a while ago and I thought today would be a good moment to explain how I implemented the comment boxes on my site. There is a lot to talk about so lets move ahead and get on to it…
What's on the EE menu today:
- Alternating comment boxes and your own comment box
- The use of gravatars
- Permalink a comment
- Number the comments
- Hide the e-mail address and show URL
- Date and time stamp
Alternating comment boxes and your own comment box
Having the comment boxes alternate in style is a must. It gives a nice overview, it's more pleasing for the eye. Having your own comment box is even better. It's not that difficult to implement. I'll show you how.
The static XHTML code
Let's have a look first at our static code:
The outer div has a class "comment-box". This div will get another class named "comment-box-alt" for the alternate style of this box and a class "comment-box-v" for the style of the box when I enter a comment.
The EE code
And here is the EE code:
What I did is using the "switch" variable. BTW, you can add more then just 2 styles.
To give my box a special style, I used a conditional variable, which allows you to conditionally show or hide information based on criteria being met. In case you want to highlight your own comment box, you could check this by using your e-mail address. "!=" means "not equal to" "==" means "equal to".
Have a look at the complete EE code
The use of gravatars
For the gravatars I use Les Jenkins' plugin which works with gravatar.com. Just download the plugin and place it in EE's plugins folder on your server. Then add the proper EE code (shown in the image above).
Permalink a comment
To give each comment a permalink I use the comment_id variable. Because these are pure numbers and I want my code 100% W3C valid, I added "c_" in front.
Number the comments
Just add the variable count (the word count between curly brackets) to number your comments.
Hide the e-mail address and show URL
To hide the e-mail address of user, make sure that the "Automatically turn URLs and email addresses into links?" EE Admin is set to "No". You'll find this in Admin > Weblog Management > The name of your blog > Comment Posting Preferences.
As you can see I've used conditionals again: if the URL field in the form is not (!=) empty, then render the link and if not than the link won't be rendered and you'll only see the name. Notice how I added this conditional around the "a" element in 2 separate parts. I added it around the opening tag and a second time around the closing tag.
Date and time stamp
The date and time stamps are also pretty easy to do. Well, everything is, you just need to find the proper code :) I always browse to this overview of the date and time formats you can use in EE.
Additional info
The word "comment" between curly brackets will render the comment. The "link" between curly brackets is a variable I've created that replaces my URL. So each time I want to use this 'path' I just type "link".
Hope you enjoyed my mini EE tutorial. Don't forget to browse the user manual. You'll find a bunch of information there. And if you just start on implementing your templates, make sure you copy the default templates in a separate template group and use them to learn from. Well, that's how I did it ;)
21served
1
Thanks for the tutorial.
2
Nice tutorial, even though I’m not using EE I managed to understand a bit of it!
3
Realy nice tutorial, thanks for it.
4
I read somewhere it is more reasonable in comments to use definition lists like DL instead of divs. What do you think?
5
Nice article Veerle - handy!
Xavier: While it’s a nice idea semantically, it’s not so nice for screenreaders. Screenreader programmes tend to say (dt) equals (dd) equals (dd) equals (dd), and so on. It just sounds a bit confusing.
Also, semantically, you could argue they are divisions of the page (everyone their own voice/opinion) anyway, so the div-tag was made for it.
6
P.S. Veerle, it’s also a good idea to add a ‘ size="32" ‘ to your EE-tag for the gravatars, as now you’re requesting the 80x80 icon and letting the browser resize it. A server-based resize on their end makes my icon a lot prettier ;)
7
Veerle, just a thought. Since you’re not showing e-mail addresses, why not use the e-mail address field as a password field when writing your own comments. That way, it would be more difficult for someone to fake your identity?
I implemented something similar in MovableType a while back: http://www.losifer.net/greymatter/archives/2005/07/author_highligh.html
8
Is that BBEdit? That striped effect is really cool.
9
Nice article (again). Is is perhaps not better (less code) to create a different look for your posts using a dynamic created CSS style? (http://eewiki.com/wiki/Highlight_Author_Comments)
10
I would say, semantically speaking, using a definition list is the wrong thing to do. Personally, I think it’s best, semantically, to use an ordered list with
citeandpin theli‘s.The definition list might make the comments appear nicely with styles turned off, but remember that it’s not the function of XHTML to make things look nice. Same argument for not using
h2, h3and so on, simply for making smaller headings. Anyh2should be expanding upon an earlierh1, and so on.11
Yuck! The code elements are set to block. Kinda kills readability. Darn, misleading preview :)
12
In my opinion comments needs semantically other tags than just use divs. Wordpress uses OL and blogger DL. Here’s a page where they discussed this: http://www.cre8d-design.com/blog/2006/03/03/should-comments-be-coded-as-definition-lists/
13
Matthew Anderson said:
Well I have a bit more trust in humanity I guess. I don’t want to suffer from paranoia. Those who abuse it will be dealt with accordingly. And about other security implementations, I just want to keep things as easy as possible for the user. If they need to become a member first then use catpcha etc. I bet I won’t get much comments and it will kill the interesting discussion, which is the mean purpose. Most people won’t do the extra efforts.
Fabiaan said:
The look of the code boxes are inspired by the color settings I use in BBEdit.
Dominik Lenk said:
I don’t have experience with this kind of CSS coding. I also like to keep my CSS styles separate and clean, as I understand it now, you need to add this CSS in your head tag.
As for the semantics. I think divs are certainly OK. If the look of my comment boxes would be very basic then a list would be OK, but as you can see my design is rather complicated and I don’t think you can style it using just lists or definition lists. I use headings and paragraphs as well. Definition lists are usually hard to style, I always run into trouble. My designs are mostly too complicated to use them.
14
I like things (and designs too) simple. But you are one of them, who do it bit complicated but still great.
15
wow nice tutorial. but sadly i run on wordpress. and my coding skills are the suxorz. but yea, your designs are always uber awesome.
16
Hey Veerle,
Just wanted to thank you and your blog for giving me all the information and inspiration i needed while redesigning mine. Your blog totally rocks!!!
17
Veerle, thanks for tutorial. It’s not easy to understand, but with your help it can be easier
18
You could also forgo the conditionals that test for the author’s URL by using the {url_as_author} variable. Good tutorial!
19
Rolling up my sleeves now to get down & dirty trying out your tutorial. Thanks a bunch for your write up on how you implemented the commenting system!!! Hooray for Veerle & EE!
20
Another great EE post. I’m so glad you’re continuing this series ... keep ‘em coming!
One tip: When using conditional variables (especially when you’re testing for just two conditions), you can cut back a little code by using the {if:else} tag. Example:
{if email == “name@domain.be"}
Content for you
{if:else}
Content for everyone else
{/if}
You could take this a step further and do something like:
{if email == “name@domain.be"}
Content for you
{if:elseif member_group == “2"}
Content for members, be sure to use your member group ID number where I used 2
{if:else}
Content for everyone else
{/if}
21
Very good tutorial on building the comments area. Brava!