Lädt gravatar mit jquery

Question

Nur versuchen, ein einfaches Kommentarformular in einem Blog zu kisten. Ich möchte den Gravatar des Benutzers laden (mit jQuery), wenn er dies in der E-Mail-Box schreibt.

Wie kann ich das tun?

Answer 1

Die Gravatar URL sieht wie folgt aus:

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

Here are the rest of the options for the URL.

Also alles, was Sie gehen zu müssen, ist zu tun, um eine Funktion namens md5 enthalten, die den MD5-Hash der E-Mail des Benutzers zurückgibt. Es gibt viele online, die das tun, aber ich glaube, https://github.com/blueimp/JavaScript-MD5/blob/master/README.md funktioniert gut. Danach wird nur tun:

// 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)); 

Ich dachte, das war offensichtlich, aber ich werde es aus Gründen der Nachwelt hinzufügen:

Wenn Benutzer E-Mails privat sind und Sie diese ala-Stackoverflow in einer Auflistung sind zeigt, Sie sollten die E-Mail auf dem Server wahrscheinlich besser verschlüsseln, damit Benutzer-E-Mails nicht öffentlich sichtbar sind, wenn Sie sich die Quelle ansehen.

Answer 2

Check-out my fiddle die Funktion bereitstellt

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

Nur die E-Mail-Bereitstellung ist obligatorisch - der Rest Standardwerte verwendet.

Seien Sie sicher, gehören auch die de-facto-Standard MD5-generator JS file von Joseph Myers mit

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

Answer 3

Wow Dank für diesen Beitrag. Aber wenn Sie ein eigenes leeres Bild haben und es anstelle des Gravatar verwenden möchten.

Answer 4

Der schwierige Teil ist die Generierung der URL mit einer MD5-Hash-Implementierung, die von jQuery getrennt ist. Ich fand, dass die blueimp-md5 Bibliothek die meisten Sterne der verschiedenen MD5-Pakete auf GitHub hat, und es ist ziemlich selbstständig (ungefähr 6kb verkleinert). Wenn Sie Knoten und/oder Browserify verwenden, kann diese Lösung auch für Sie arbeiten:

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

Dann können Sie ein Bild gesetzt src Attribut mit jQuery wie folgt aus:

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