Select Page

Gravatar en userpics in reactie in Movable Type 4

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.

About The Author

Hans Mestrum

Hans is al 12 jaar bezig op het gebied van Social & Media. Momenteel is hij vlogger bij de Hogeschool van Arnhem en Nijmegen (HAN). Daarvoor houdt hij o.a. deze weblog bij met videoblogs van projecten, evenementen etc. Daarnaast schrijft hij op persoonlijke titel over trends, zijn (professionele) leven en overwegingen. Bekijk ook zijn profiel website

7 Comments

  1. Toni Hambilton

    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

    Antwoord
  2. Hans Mestrum

    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

    Antwoord
  3. Toni Hambilton

    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. 🙂

    Antwoord
  4. Hans Mestrum

    @toni Woopie that’s great. I changed the code. Is it ok in this way?

    Antwoord
  5. Toni Hambilton

    Ahh, I see the problem, remove the ; from the end of avatar in your css and it should be right

    Antwoord
  6. Hans Mestrum

    oops changed. Let give it a try. Thanks for the code!

    Antwoord

Leave a reply

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

Welkom!

hansmestrum About me
Hans Mestrum

Leuk dat je hier op mijn weblog bent. De video's en foto's die je hier vindt, zijn door mij gemaakt voor o.a. de Hogeschool van Arnhem en Nijmegen (HAN), waar ik videoblogger en social mediaspecialist ben.

Laatste video’s

Recente Tweets

Archieven

Categorieën

Zonnemeter

Hoeveel Watt produceren mijn zonnepanelen op dit moment?

Pin It on Pinterest

Shares
Share This