Chargement gravatar en utilisant jquery

Question

Juste essayer de caisse une forme simple commentaire sur un blog. Je veux charger le gravatar de l'utilisateur (en utilisant jQuery) quand il / elle écrit ceci dans la boîte e-mail.

Comment puis-je faire?

Answer 1

L'URL gravatar ressemble à ceci:

http://www.gravatar.com/avatar/<md5hashofemail>

Voici le reste des options pour l'URL.

Donc tout ce que vous allez avoir à faire est inclure une fonction appelée md5 qui retourne le md5 de messagerie de l'utilisateur. Il y a beaucoup en ligne que cela, mais je crois que https: // GitHub. com / blueimp / JavaScript MD5 / blob / maître / README.md fonctionne bien. Après cela, il suffit de faire:

// get the email
var email = $('#email').val();
// -- maybe validate the email? 

// create a new image with the src pointing to the user's gravatar
var gravatar = $('<img>').attr({src: 'http://www.gravatar.com/avatar/' + md5(email)});
// append this new image to some div, or whatever
$('#my_whatever').append(gravatar);

// OR, simply modify the source of an image already on the page
$('#image').attr('src', 'http://www.gravatar.com/avatar/' + md5(email));

Je pensais que cela était évident, mais je vais l'ajouter pour l'amour de la postérité:

Si des e-mails de l'utilisateur si vous regardez sont privés et vous démontrons ce ala-stackoverflow dans une liste, vous êtes probablement mieux de coder l'e-mail sur le serveur afin que les e-mails des utilisateurs ne sont pas visibles publiquement à la source.

Answer 2

consultez mon violon assurant la fonction

get_gravatar_image_url (email, size, default_image, allowed_rating, force_default)

Seulement fournir l'e-mail est obligatoire -. Le reste utilise des valeurs par défaut

Assurez-vous d'inclure également de facto standard MD5 générateur fichier JS de Joseph Myers avec

<script src="http://www.myersdaily.org/joseph/javascript/md5.js"></script>

Answer 3

Wow merci pour ce post. Mais si, dans le cas où vous avez votre propre image vierge et que vous voulez l'utiliser au lieu du gravatar.

<script src="md5.js"></script>

<img id="image" src="images/mydefault.png" />

<script>

    var src = 'http://www.gravatar.com/avatar/' + 
                  md5('yourmail@gmail.com') + '?default=' + encodeURIComponent(GetRootDomain() + '/Content/images/nopic-small.png');

    $('#image').attr('src', src);

</script>

Answer 4

La partie la plus délicate génère l'URL en utilisant une mise en oeuvre de hachage MD5, qui est séparée de jQuery. Je trouve que le blueimp-md5 bibliothèque a le plus d'étoiles des différents forfaits MD5 sur GitHub, et il est à peu près autonome (environ 6kb minified). Si vous utilisez nœud et / ou Browserify, cette solution pourrait bien fonctionner pour vous:

var md5 = require("blueimp-md5");
function gravatar(email){
  var base = "http://www.gravatar.com/avatar/";
  var hash = md5(email.trim().toLowerCase());
  return base + hash;
}

Ensuite, vous pouvez définir un attribut src d'image en utilisant jQuery comme ceci:

var email = "someone@example.com";
$("#image").attr("src", gravatar(email));