Not a developer? Go to MovableType.com

Documentation

MT4’s Comment Templates for Users of MT 3.x or Earlier

A clean set of MT Comments for your Entries


If you have been using Movable Type’s templates for a while, MT4’s default templates might have you scratching your head. A great way to learn how the new system works, and how to adapt your current templates to the new system, is to start with a concrete example. What we’ll learn:

  • How a default MT4 template looks
  • What all those crazy includes and variables do
  • How to simplify includes and variables into a “flat” template
  • What conditional tags like MTIfCommentsActive can do to help us
  • What a basic commenting form looks like, so we can reuse it in an existing design
  • How to create a comment experience that supports MT4’s built-in CAPTCHA, user registration and OpenID support

One of the most practical examples of the things most people want to do with MT4’s new abilities is figuring out how to update your comment form to use all of MT4’s new features. To get started, we’ll look at the default templates that MT4 comes with. Here’s what the MT4 default Entry template looks like:

<MTSetVar name=”body_class” value=”mt-archive-listing mt-entry-archive”>
<MTSetVar name=”sidebar” value=”1”>
<MTSetVar name=”module_about_context” value=”1”>
<MTSetVar name=”body_onload” value=”individualArchivesOnLoad(commenter_name)”>
<MTSetVarBlock name=”page_title”><$MTEntryTitle remove_html=”1”$></MTSetVarBlock>

<$MTInclude module=”Header”$>

<$MTInclude module=”Entry Detail”$>

<$MTInclude module=”TrackBacks”$>

<$MTInclude module=”Comments”$>

<$MTInclude module=”Footer”$>


Pretty straightforward, especially once you know that the MTInclude tags are bringing in content from the module templates of the same name. We want to find the pieces we need to add a comment form to our own sites, so it’s helpful to remember that <$MTInclude module="Comments"$> inserts the contents of the “Comments” module. That looks like this:

<MTIfCommentsActive>
<div id=”comments” class=”comments”>
    <MTIf name=”comment_preview_template”>
    <$MTInclude module=”Comment Form”$>
    </MTIf>
    <MTComments>
        <MTCommentsHeader>
    <h2 class=”comments-header”><$MTEntryCommentCount$> Comments</h2>
    <div class=”comments-content”>
        </MTCommentsHeader>
        <$MTInclude module=”Comment Detail”$>
        <MTCommentsFooter>
    </div>
        </MTCommentsFooter>
    </MTComments>
    <MTUnless name=”comment_preview_template”>
    <$MTInclude module=”Comment Form”$>
    </MTUnless>
</div>
</MTIfCommentsActive>

What Does All That Stuff Do?

There are a few things going on here — we’ve got the MTCommentsHeader, which encloses everything you’d want as a header above your comment listing. MTCommentsFooter does the same thing for the content you’d want below your comment listing. Two modules called “Comment Detail” and “Comment Form” display the list of comments themselves, as well as (obviously) the form for submittting new comments.

And then there’s something interesting: <MTUnless name="comment_preview_template">. The Comment Preview Template is one of those special system templates — it’s only displayed when someone types in a comment on your site, and then clicks “Preview” to see what it looks like. The MTUnless tag here basically says, “Publish the content in here only if you know that someone is not previewing a comment”. That does smart stuff like put the comment form at the top of the list of comments if you’re previewing, but at the bottom of the list if you’re not.

How does MT know if it’s including this content on a Comment Preview Template? Well, the default Comment Preview Template sets a variable where it defines its own name as “comment_preview_template”, which makes MT do the right thing here. If you weren’t using the default template and didn’t set this variable on your own, this wouldn’t work. For now, we’ll take all the Comment Preview things out of our templates to keep them as simple as possible.

Simplifying Our Template A Bit

So, let’s expand the regular “Comments” module into an example of a straightforward comments block that you could just copy and paste into an existing template. To make this easier to read, let’s remove most of the semantic HTML around the basic MT tags, and get rid of the stuff that handles comment previews:

<MTIfCommentsActive>
    <MTComments>
        <MTCommentsHeader>
            <$MTEntryCommentCount$> Comments
        </MTCommentsHeader>
        <$MTInclude module=”Comment Detail”$>
        <MTCommentsFooter>
        </MTCommentsFooter>
    </MTComments>
    <$MTInclude module=”Comment Form”$>
</MTIfCommentsActive>

Putting It All Together

Now that we’ve got that “Comment Detail” module and the “Comment Form” module included at the bottom, let’s bring in the contents of those includes, again removing the HTML, and this time adding in some explanatory comments.

<—
To begin, we see whether comments are enabled on this entry.
// —>

<MTIfCommentsActive>
    <MTComments>
   
        <—
        Then we’ll display a header, in this case just showing a count of how many comments have been published so far.
        // —>
       
        <MTCommentsHeader>
            <$MTEntryCommentCount$> Comments
        </MTCommentsHeader>
       
        <— We’ll want to display the comment author’s info —>
       
        <div class=”comment” id=”comment-<$MTCommentID$>”>
            <$MTCommentAuthorLink default_name=”Anonymous” show_email=”0”$>
           
            <!— And we check if we’ve got a name for the author; If so, it’ll be published. —>
            <MTIfNonEmpty tag=”CommentAuthorIdentity”>
                <$MTCommentAuthorIdentity$>
            </MTIfNonEmpty> said:
        </div>
       
        <— Here’s the actual text of the comment itself. —>

        <$MTCommentBody$>
       
        <—
        And then the link to and date for the comment. We could have a footer for all of our comments, too, but we’ll leave it blank.
        // —>

        <a href=”#comment-<$MTCommentID$>” title=”Permalink to this comment”><$MTCommentDate format=”%x %X”$></a>

        <MTCommentsFooter>
        </MTCommentsFooter>
    </MTComments>

    <—
    First, we test if this entry or page allows additional comments in the first place. If it does, we’ll show all the commenting info here.
    // —>
   
    <MTEntryIfCommentsOpen>
   
        <h2>Leave a comment</h2>
   
        <MTIfRegistrationAllowed>
       
            <!—
            If your site allows registration, then show signed-in users their name.
            // —>
       
            <script type=”text/javascript”>
            <!—
            writeCommenterGreeting(commenter_name, <$MTEntryID$>, <$MTEntryBlogID$>, commenter_id, commenter_url);
            // —>
            </script>
           
        </MTIfRegistrationAllowed>
       
        <!—
        The main comment form starts here. Most of these form elements are self-explanatory.
        // —>
       
        <form method=”post” action=”<$MTCGIPath$><$MTCommentScript$>” name=”comments_form” id=”comments-form” onsubmit=”if (this.bakecookie.checked) rememberMe(this)”>
       
            <input type=”hidden” name=”static” value=”1” />
            <input type=”hidden” name=”entry_id” value=”<$MTEntryID$>” />
            <input type=”hidden” name=”__lang” value=”<$MTBlogLanguage$>” />
   
            <label for=”comment-author”>Name</label>
            <input id=”comment-author” name=”author” size=”30” value=”” />
   
            <label for=”comment-email”>Email Address</label>
            <input id=”comment-email” name=”email” size=”30” value=”” />
   
            <label for=”comment-url”>URL</label>
            <input id=”comment-url” name=”url” size=”30” value=”” />
           
            <label for=”comment-bake-cookie”>
            <input type=”checkbox” id=”comment-bake-cookie” name=”bakecookie” onclick=”if (!this.checked) forgetMe(document.comments_form)” value=”1” />Remember personal info?
            </label>
           
            <—
            Here’s another conditional If tag: If HTML’s allowed in your comments, the template will tell your users they can use it.
            // —>
   
            <label for=”comment-text”>Comments
            <MTIfAllowCommentHTML>(You may use HTML tags for style)</MTIfAllowCommentHTML>
            </label>
            <textarea id=”comment-text” name=”text” rows=”15” cols=”50”></textarea>
   
            <—
            Okay, this one’s a little tricky. We’re deciding whether to show a CAPTCHA to users based on whether comments are allowed, registration is enabled, and CAPTCHA has been turned on in MT. So that’s three different If tags nested inside each other.
            // —>
   
            <MTIfNonEmpty tag=”MTCaptchaFields”>
           
                <MTIfCommentsAccepted>
                    <MTIfRegistrationAllowed>
                        <MTElse><$MTCaptchaFields$>
                    </MTIfRegistrationAllowed>
                </MTIfCommentsAccepted>
               
                <div id=”comments-open-captcha”>
                </div>
               
            </MTIfNonEmpty>
           
            <input type=”submit” accesskey=”v” name=”preview” id=”comment-preview” value=”Preview” />
            <input type=”submit” accesskey=”s” name=”post” id=”comment-submit” value=”Submit” />
   
        </form>
    </MTEntryIfCommentsOpen>
</MTIfCommentsActive>

It Works!

Phew! We’ve accommodated pretty much everything you’d want to do with comments, and made a clean set of template tags that we can use to plug in to our existing site’s HTML and CSS. Then, if we want to make sure our Comment Previews look just right, we can copy the same tags into our Comment Preview template and just tweak them slightly to accommodate the changes for a good previewing experience.

Back

6 Comments

ender on October 1, 2007, 9:11 p.m. Reply

Unfortunately, there’s an error in that code if you’re copying and pasting it into your template. I don’t know if this was a recent change or just a typo or something. The code below is uptaded to the correct code (brackets had to be turned into [ and ]) with the “added” tag in italics.:

[!— Okay, this one’s a little tricky. We’re deciding whether to show a CAPTCHA to users based on whether comments are allowed, registration is enabled, and CAPTCHA has been turned on in MT. So that’s three different If tags nested inside each other. —]

[MTIfNonEmpty tag=”MTCaptchaFields”]

[MTIfCommentsAccepted] [MTIfRegistrationAllowed] [MTElse>

[div id=”comments-open-captcha”] [mt:CaptchaFields /] [/div][/MTElse]

[/MTIfNonEmpty]

Nelly on February 27, 2008, 11:05 p.m. Reply

will some body answer me? i want to have such a site, but i don’t know how to link!!! rapidshare search

needfornews on March 24, 2008, 7:23 a.m. Reply

urls to the latest world news.needfornews.com

lee on June 23, 2009, 10:19 p.m. Reply

This is really useful…and it would be great to see this for other templates. But for anyone straining to grasp the templates, modules and tags concept, this can be applied elsewhere. (wish i’d found it sooner!)

ywoel on August 11, 2009, 2:42 a.m. Reply

urls to the latest world news.needfornews.com

Jermaine Love Poems & Quotes on November 16, 2009, 8:14 a.m. Reply

The codes look pretty good to me!

Jay Pleas, Work At Home To Make Money Online Romantic Love poems & Quotes