There probably are a magnitude of techniques on how to customize and personalize comment previews. In ExpressionEngine, by default, the comment preview's functions are stored in a separate template.

For my design, I've decided to reduce the amount of templates used. For this very blog, I am using a single template to retrieve data. I have done away with the single article template (comments template by default), the categories template, the tags template (I use solspace's magnificient tag module) and will most likely use this single template for the search and archives as well.

As this design is very young and not completely done - you may have taken notice of the absence of a search feature and the lack of an archive - I have set out to complete the site by end of the week and iron out the few remaining bugs (such as incompatibility with IE6, oh the love of my life) and other quirks and hiccups that are currently present.

But anyway, onto the comment live preview. Being immensely taken by and favourable of Jason Santamaria's live comment preview, I decided that this is something I wanted, needed too. As I am using jQuery - And a sweet tool it is indeed - I went on a hunt on how to possibly accomplish this task with very few lines of code using jQuery. And, alas, I found a great resource that would help me in writing my tiny weeny little function for the live commenting feature.

Firstly, the code:

  1. // Live Comment Preview jQuery function
  2. $(function() {
  3. $('#comment').one('focus',function() {
  4. });
  5. var $comment = '';
  6. $('#comment').keyup(function() {
  7. $comment = $(this).val();
  8. $comment = $comment.replace(/\n/g, "<br />").replace(/\n\n+/g, '<br ><br />').replace(/(<\/?)script/g,"$1noscript");
  9. $('p.live-preview').html($comment);
  10. });
  11. });

As you can see, I have adapted the code provided by Karl Swedberg, hence all credits go to him. I have merely tweaked the function to suit my needs.

Secondly, you will need to create the according markup for it, depending on where you'd like to have your live preview displayed. Here, I have simply used a floated div element and assigned it the class .comment-preview. In this div tag, I tell jQuery to add a paragraph with the class of .live-preview.

I have placed the code inside the template that renders my single articles just below the comment form, so it would look something like this:

  1. <div class="comment-preview">
  2. <h3>My Comment Preview</h3>
  3. <p class="live-preview">placeholder text</p>
  4. </div>