gravatar

by xanderiel

HTML

<script src="http://www.myersdaily.org/joseph/javascript/md5.js"></script>
<input type="email" id="email" placeholder="email" value="[email protected]"/>
<a id="submit">OK</a>
<div id="url">&nbsp;</div>
<div>
    <img id="image"/>
</div>

CSS

#email
{
    
}

#submit
{
    cursor: pointer;
    color: green;
    
    padding: 10px 30px 10px 30px;
    background-color: green;
    color: white;
    font-weight: bold;
}

#url
{
    margin: 20px 5px 20px 5px;
}
#url:before
{
   content: "gravatar image url: ";
}

#image
{
    margin: 20px;
}

JavaScript

var email = $('#email').val();
$('#submit').click(function ()
{
    var gravatar_image_url = get_gravatar_image_url (email, 200);
    
    $('#url').html(gravatar_image_url);
    
    $('#image').attr('src', gravatar_image_url);
});


function get_gravatar_image_url (email, size, default_image, allowed_rating, force_default)
{
    email = typeof email !== 'undefined' ? email : '[email protected]';
    size = (size >= 1 && size <= 2048) ? size : 80;
    default_image = typeof default_image !== 'undefined' ? default_image : 'mm';
    allowed_rating = typeof allowed_rating !== 'undefined' ? allowed_rating : 'x';
    force_default = force_default === true ? 'y' : 'n';
    
    return ("https://secure.gravatar.com/avatar/" + md5(email.toLowerCase().trim()) + "?size=" + size + "&default=" + encodeURIComponent(default_image) + "&rating=" + allowed_rating + (force_default === 'y' ? "&forcedefault=" + force_default : ''));
}