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.
Thanks for this, I’ve added your userpic code to my site but have lost the comments for those with userpics. This will need a closer look at the template. But got the pics to work. Thank you
Hi Toni,
thanks for your reply.
I found the code in the wiki and thought it would work. I could not find any explanation in where to put the code and how to style it.
I think it is a styling issue in the CSS. What do you think? If you have a solution, please let me know.
Success
Hello Hans,
The code for gravitar plus uses the mtCommentBody tag in the gravatar tag. The first part of the if statement is missing the mtCommentBody, hence the missing comments.
I placed the mtCommentBody code before the closing mt:CommenterUserpicAsset, and my comments were back. Then I styled the userpic by adding avatar to the css like so:
.floatimgright, .avatar
now both are working happily together. 🙂
@toni Woopie that’s great. I changed the code. Is it ok in this way?
Mmm… gravatar. I love it
Ahh, I see the problem, remove the ; from the end of avatar in your css and it should be right
oops changed. Let give it a try. Thanks for the code!