Customizing previews for commenting (upcoming) 4.0.2

Now you can finally put the preview where you think it belongs and change and customize how it looks to your desire. So what does it practically gain you?

For example now you can truly have a 2-column layout with the article on one side and the comments, comments-form and comments-preview on the other side. Up to now, the preview would always appear hardcoded in front of the article. Of course everything is backwards-compatible, so if you leave your templates as they are the preview will still be where it used to be.

Here is a code example

<txp:if_comments_preview>
  <div id="cpreview" style="background-color:#ff0">
    <b>Hello, the following is only a preview. Please re-read your comment for clarity and hit submit once you approve of it.</b>
    <txp:comments_preview form="my_preview" />
    <txp:comments_form />
  </div>
</txp:if_comments_preview>

You can see that we enclosed it in the new preview-conditionals.

  1. First we add an anchor id="cpreview" so that the browser can scroll to the correcct spot on the page during preview. We also highlight the enclosing div with a yellow background to inform users that here is something to pay attention to.
  2. Then there’s a textual message to inform the user this is only a preview.
  3. Next, <txp:comments_preview /> is called which renders the comment with a form called my_preview (which looks just like a regular display form for comments like the built-in comments which is used by default).
  4. Next is the <txp:comments_form /> is called.

The key element in all this is the <txp:comments_preview /> tag. If that is encountered anywhere on the page, the old behaviour of prepending comments is automatically turned off. This also means you can use the conditional independant of customized previews, for example to simply show a message at the top of your page.

Sidenote: While we are talking about comments, the comments_invite tag has also seen a bit of a renovation. It has three new attributes, which you can see here:

<comments_invite showcount="0" textonly="1" showalways="1" />

showcount will show or hide the number of comments next to the invite. textonly will return the invite text as just text, without a link. And finally if showalways is set to 1, the invite will also display on individual article pages (which it doesn’t by default, for historical reasons).

Comments

  1. Bravo! I love it. Thank you for all you do. :)

    Can’t wait to play with 4.0.2.

  2. Great idea! Looking forward to customizing things.

  3. when will be release 4.02 ?

  4. The next version be released when it is ready!!!

  5. I was looking everywhere for this. Thanks!

  6. Hey – I was using WP but how TXP is handeling with tags and style is SUPER COOL – now I have stable system which I can really easily modify.

    I’m just asking how I can donate this project – as I am from Czech Republic and I don’t have paypal account etc.

  7. What file do you place the comment preview code in with 4.0.3?

  8. great , i spend so many time to try search this one

  9. your snippet on the comments invite is missing txp: in the tag. while on the subject, is there more documenation on this invite. textbook is not entirely clear. thanks for info on previews!

  10. Okay—but what really anoys me is that when you hit preview on a comment—the page jumps to the top—I assume lots of readers don’t think to scroll back down the page so they can hit submit.

    I wonder how many comments are “unsubmitted” because of this.

  11. I’ve had many a thought on how to make the Comment preview thang easier to the uninitiated. I think I’m on the right lines with my latest effort – you can see it in action here: http://theparkerproject.com/article/19/previewing-comments-in-textpattern

    Rather than try and override or hide textpattern’s methods, I’ve brought them to the fore. Please, let me know what you think.

    Chris.

Commenting has expired for this article.