Solo cercando di creare un semplice modulo di commento su un blog. Voglio caricare il gravatar dell'utente (usando jQuery) quando lo scrive nella casella di posta elettronica.Caricamento gravatar utilizzando jquery
Come posso farlo?
Solo cercando di creare un semplice modulo di commento su un blog. Voglio caricare il gravatar dell'utente (usando jQuery) quando lo scrive nella casella di posta elettronica.Caricamento gravatar utilizzando jquery
Come posso farlo?
L'url gravatar assomiglia a questo:
http://www.gravatar.com/avatar/<md5hashofemail>
Here are the rest of the options for the URL.
Quindi tutto quello che sta andando ad avere a che fare è includere una funzione chiamata MD5 che restituisce l'hash md5 di posta elettronica dell'utente. Ci sono molti online che fanno questo, ma credo che lo https://github.com/blueimp/JavaScript-MD5/blob/master/README.md funzioni bene. Dopo di che, basta fare:
// 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));
Ho pensato che questo era ovvio, ma vorrei aggiungere che per amore dei posteri:
Se le email degli utenti sono privati e si sta mostrando questa ala-StackOverflow in un profilo, probabilmente stai meglio codificando l'e-mail sul server in modo che le e-mail degli utenti non siano pubblicamente visibili se guardi all'origine.
check out my fiddle fornendo la funzione
get_gravatar_image_url (email, size, default_image, allowed_rating, force_default)
fornendo solo l'e-mail è obbligatoria - il resto utilizza i valori predefiniti.
Assicurarsi di includere anche la de-facto standard MD5-generator JS file da Joseph Myers con
<script src="http://www.myersdaily.org/joseph/javascript/md5.js"></script>
Ho provato quel violinista e non ha funzionato . – erm3nda
Wow, grazie per questo post. Ma se nel caso hai la tua immagine vuota e vuoi usarla al posto del gravatar.
<script src="md5.js"></script>
<img id="image" src="images/mydefault.png" />
<script>
var src = 'http://www.gravatar.com/avatar/' +
md5('[email protected]') + '?default=' + encodeURIComponent(GetRootDomain() + '/Content/images/nopic-small.png');
$('#image').attr('src', src);
</script>
La parte difficile sta generando l'URL utilizzando un'implementazione di hash MD5, che è separata da jQuery. Ho scoperto che la libreria blueimp-md5 ha il maggior numero di stelle dei vari pacchetti MD5 su GitHub ed è praticamente autosufficiente (circa 6kb minified). Se si utilizza il nodo e/o Browserify, questa soluzione potrebbe funzionare bene per voi:
var md5 = require("blueimp-md5");
function gravatar(email){
var base = "http://www.gravatar.com/avatar/";
var hash = md5(email.trim().toLowerCase());
return base + hash;
}
Quindi è possibile impostare un'immagine src
attributo utilizzando jQuery come questo:
var email = "[email protected]";
$("#image").attr("src", gravatar(email));
Ti salverò un google search: http://www.webtoolkit.info/javascript-md5.html –
quindi c'è un problema con l'utilizzo di javascript per caricare gravatars, perché non è una buona idea per l'output dei tuoi utenti email e client hash md5 –
@Sander Versluys : Non ci sono problemi se lo carichi da una casella di testo appena l'utente inserisce la sua email. –