jquery - paginas - khan academy r

Cargando gravatar usando jquery

Question

Solo intento crear un simple formulario de comentarios en un blog. Quiero cargar el gravatar del usuario (usando jQuery) cuando él / ella escribe esto en la casilla de correo electrónico.

¿Cómo puedo hacer eso?

Answer 1

Echa un vistazo a mi violín que proporciona la función

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

Solo proporcionar el correo electrónico es obligatorio, el resto utiliza valores predeterminados.

Asegúrese de incluir también el archivo JS-generador MD5 de facto de Joseph Myers con

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

Answer 2

La parte difícil es generar la URL utilizando una implementación de hash MD5, que es independiente de jQuery. Descubrí que la biblioteca blueimp-md5 tiene la mayoría de las estrellas de los diversos paquetes de MD5 en GitHub, y es bastante autónoma (aproximadamente 6kb minified). Si está utilizando Node y / o Browserify, esta solución podría funcionar bien para usted:

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

Luego puedes establecer un atributo de imagen src usando jQuery como este:

var email = "[email protected]";
$("#image").attr("src", gravatar(email));

Answer 3

La url gravatar se ve así:

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

Aquí están el resto de las opciones para la URL.

Así que todo lo que tendrá que hacer es incluir una función llamada md5 que devuelva el hash md5 del correo electrónico del usuario. Hay muchos en línea que hacen esto, pero creo que https://github.com/blueimp/JavaScript-MD5/blob/master/README.md funciona bien. Después de eso, simplemente haz:

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

Pensé que esto era obvio, pero lo añadiré por la posteridad:

Si los correos electrónicos de los usuarios son privados y está mostrando este ala- en una lista, es probable que esté mejor codificando el correo electrónico en el servidor para que los correos electrónicos de los usuarios no sean visibles públicamente si observa la fuente.

Answer 4

Wow gracias por este post Pero si es que tiene su propia imagen en blanco y quiere usarla en lugar 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>