Publishing Comments with Userpics

One of the most popular features of Movable Type is the ability for users to upload userpics for themselves and have them displayed alongside their comments.

The simplest code snippet one can add to display a user pic is the following:

<a href="<mt:If tag="CommenterID"><$mt:CommenterURL$><mt:Else><$mt:CommentURL$></mt:If>">
<img src="<mt:If tag="CommenterUserpic"><$mt:CommenterUserpicURL$><mt:Else><$mt:StaticWebPath$>images/default-userpic-90.jpg</mt:If>" 
     width="36" height="36" alt="user-pic" />
</a>

This code will display the userpic of a commenter if they have one. If not it will display Movable Type’s default userpic.

Here is a more complete template fragment that displays all the comments associated with an entry. Keep in mind that this code fragment is unstyled and pretty bare. You may need to modify the HTML output by this template code to achieve the look and feel you want.

<mt:Comments>
    <mt:CommentsHeader>
<h2 class="comments-header">Comments</h2>
<ol class="comments-content">
    </mt:CommentsHeader>
    <li id="comment-<$mt:CommentID$>">
        <div class="comment-header">
            <a href="<mt:If tag="CommenterID"><$mt:CommenterURL$><mt:Else><$mt:CommentURL$></mt:If>">
                <img src="<mt:If tag="CommenterUserpic"><$mt:CommenterUserpicURL$><mt:Else><$mt:StaticWebPath$>images/default-userpic-90.jpg</mt:If>" width="36" height="36" alt="user-pic" />
            </a>
            <$mt:CommentAuthorIdentity$>
            <mt:IfCommentParent>
                <$mt:CommentAuthorLink$> replied to <mt:CommentParent><a href="<$mt:CommentLink$>">comment from <$mt:CommentAuthor$></a></mt:CommentParent>
            <mt:Else>
                <$mt:CommentAuthorLink$>
            </mt:IfCommentParent>
            | <a href="<$mt:CommentLink$>"><abbr class="published" title="<$mt:CommentDate format_name="iso8601"$>"><$mt:CommentDate$></abbr></a>
            <mt:IfCommentsAccepted>
            | <$mt:CommentReplyToLink$>
            </mt:IfCommentsAccepted>
        </div>
        <div class="comment-body">
            <$mt:CommentBody$>
        </div>
    </li>
    <mt:CommentsFooter>
</ol>
    </mt:CommentsFooter>
</mt:Comments>