Wat moest ik hiervoor doen?
1. Allereerst de Gravatar plugin downloaden en installeren in de plugin directory in Movable Type. Ik koos voor de 2e optie nl. de CommentBodyPlusGravatar Plugin. Die zorgt ervoor dat de reactie en het plaatje als een geheel behandeld wordt.
2. Daarna de template Individual Comment aanpassen. In plaats van de commentbody tag staat er nu het volgende:

<div class="comment-content">

            <div class="comment-content-inner">

<mt:IfNonEmpty tag="CommenterUserpic">

       <mt:CommenterUserpicAsset>

           <img src="<mt:AssetThumbnailURL width="40" height="40">" width="40" height="40" alt="<mt:CommentAuthor />" class="avatar" />

<$mt:CommentBody$>

       </mt:CommenterUserpicAsset>

   <mt:Else>

<$MTCommentBodyPlusGravatar class="floatimgright" size="40" rating="G" default="http://www.hansmestrum.com/mt4/mt-static/images/gravatar.gif"$>

                    <br style="clear: both" />

</mt:IfNonEmpty>

            </div>

        </div>

Zoals je ziet wordt er eerst gekeken of er een plaatje in Movable Type is van de reageerder. Zo zal hij dus mijn userpic ophalen. Daarna wordt er gekeken naar een avatar die bij Gravatar is geuploaded. Dus als je een plaatje daar hebt geuploaded dan wordt dat in de reactie toegepast. De tag mtcommentbodygravatar zorgt dat op basis van je emailadres gechecked wordt of je een plaatje hebt bij gravatar. Is allemaal gratis. En Gravatar kan voor heel veel websites en services gebruikt worden.
Verder zie je in de code de grootte van het plaatje, de default rating van Gravatar en de style="clear:both" om er voor te zorgen dat de volgende reactie niet bovenop de voorgaande komt.
Mocht er geen plaatje voorhanden zijn dan wordt een standaard plaatje geladen.
3. In mijn stylesheet heb ik nog de class=floatimgright toegevoegd om er voor te zorgen dat het plaatje rechts in de tekst komt te staan en er een mooie border omheen komt.

.floatimgright, .avatar {

float:right;

margin-top:10px;

margin-left:10px;

margin-bottom:10px;

border: 1px solid #ddddd9;

padding: 3px;

}

4. Herpubliceren en klaar. Eens kijken straks als mijn testblog live komt hoe het bevalt.

Update: ik kreeg een reactie van Toni met daarin wat aanpassing in de codes. Zo is de <$mt:CommentBody$> code toegevoegd bij de userpic code en is aan de css code .floatimgright, .avatar toegevoegd zodat de stijl bij de userpics en de gravatar hetzelfde is.

The post Gravatar en userpics in reactie in Movable Type 4 appeared first on Hans ON Experience.