You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Jul 03

Implementation of my comments in Expression Engine

2006 at 01.45 am posted by Veerle Pieters

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 static XHTML 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:

the EE template code using the switch variable

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 complete EE template 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

gravatar

1

permalink this comment Xavier Catchot Mon Jul 3, 2006 at 05.42 am

Thanks for the tutorial.


gravatar

2

permalink this comment Kalle Mon Jul 3, 2006 at 06.06 am

Nice tutorial, even though I’m not using EE I managed to understand a bit of it!


gravatar

3

permalink this comment Michal Pukacz Mon Jul 3, 2006 at 07.50 am

Realy nice tutorial, thanks for it.


gravatar

4

permalink this comment Xavier Catchot Mon Jul 3, 2006 at 08.01 am

I read somewhere it is more reasonable in comments to use definition lists like DL instead of divs. What do you think?


gravatar

5

permalink this comment James John Malcolm (AkaXakA) Mon Jul 3, 2006 at 09.03 am

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.


gravatar

6

permalink this comment James John Malcolm (AkaXakA) Mon Jul 3, 2006 at 09.13 am

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 ;)


gravatar

7

permalink this comment Matthew Anderson Mon Jul 3, 2006 at 09.25 am

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


gravatar

8

permalink this comment Fabiaan Mon Jul 3, 2006 at 11.42 am

Is that BBEdit? That striped effect is really cool.


gravatar

9

permalink this comment Dominik Lenk Mon Jul 3, 2006 at 12.17 pm

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)


gravatar

10

permalink this comment Colin Mon Jul 3, 2006 at 12.50 pm

I read somewhere it is more reasonable in comments to use definition lists like DL instead of divs . What do you think?

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 cite and p in the li‘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, h3 and so on, simply for making smaller headings. Any h2 should be expanding upon an earlier h1, and so on.


gravatar

11

permalink this comment Colin Mon Jul 3, 2006 at 02.15 pm

Yuck! The code elements are set to block. Kinda kills readability. Darn, misleading preview :)


gravatar

12

permalink this comment Xavier Catchot Tue Jul 4, 2006 at 01.50 am

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/


gravatar

13

permalink this comment Veerle Tue Jul 4, 2006 at 02.47 am

Matthew Anderson said:

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?

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:

Is that BBEdit? That striped effect is really cool.

The look of the code boxes are inspired by the color settings I use in BBEdit.

Dominik Lenk said:

Nice article (again). Is is perhaps not better (less code) to create a different look for your posts using a dynamic created CSS style?

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.

In my opinion comments needs semantically other tags than just use divs.

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.


gravatar

14

permalink this comment Ján Varhol Tue Jul 4, 2006 at 01.51 pm

I like things (and designs too) simple. But you are one of them, who do it bit complicated but still great.


gravatar

15

permalink this comment Jenny Wed Jul 5, 2006 at 12.34 am

wow nice tutorial. but sadly i run on wordpress. and my coding skills are the suxorz. but yea, your designs are always uber awesome.


gravatar

16

permalink this comment Suraj Sharma Thu Jul 6, 2006 at 04.51 am

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!!!


gravatar

17

permalink this comment Blue Thu Jul 6, 2006 at 10.24 am

Veerle, thanks for tutorial. It’s not easy to understand, but with your help it can be easier


gravatar

18

permalink this comment Aaron Kuzemchak Fri Jul 7, 2006 at 02.59 pm

You could also forgo the conditionals that test for the author’s URL by using the {url_as_author} variable. Good tutorial!


gravatar

19

permalink this comment Hyunlab Sat Jul 8, 2006 at 03.51 am

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!


gravatar

20

permalink this comment Sean Sperte Sat Jul 8, 2006 at 06.50 pm

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}


gravatar

21

permalink this comment Brian Leon Tue Jul 25, 2006 at 11.05 am

Very good tutorial on building the comments area. Brava!



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist