Plaatje van reageerder
Weer wat van mijnn lijstje af. Mooi! En weer veel geleerd. Ik wilde bij de reacties een klein plaatje hebben van degene die reaggerde als dat voorhanden is. Zo heb ik nu gravatar met een userpic gecombineer. De blog zoekt dus eerst of er een plaatje beschikbaar is in Movable Type en daarna bij Gravatar.
Ik werd geinspireerd door deze blogposting en deze informatie uit een wiki.
Op mijn testblog werkt het feilloos.

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.

Ook interessant om te lezen:

1. Extra check op spam toegevoegd

   Als je een reactie wilt geven op deze blog, word je onder het reactieveld gevraagd om een woord in te vullen. Dit is een extra...

2. links for 2009-07-25

   Twitter Commenters – Comment Auth using Twitter – MT Hacks Twitter Commenters is a plugin for Movable Type that enables commenters to sign-in and comment...

3. Test met Auto Featured Image plugin

   Hoe kan ik een Featured Image automatisch toe laten voegen als ik een plaatje in een blog heb staan? Een test....

4. Foto bij je reactie

   Ik heb een nieuwe optie bij je reactie, nl. je foto. Kijk maar eens bij deze posting. Ik vind dit mooi, omdat het wat persoonlijker over...

5. Daily Diigo Links 08/07/2011

   - Snapshot Backup Plugin for Wordpress — The WP Guru...