Site icon Init HTML

Hiển thị ảnh đại diện Gravatar sử dụng JavaScript

Admin

Ảnh đại diện Gravatar được lưu cho từng email, và chúng ta cần gửi mã md5 của email đó đến Gravatar để lấy ảnh đại diện. Nếu sử dụng PHP, các bạn chỉ cần sử dụng md5() là có thể sử dụng như bài hướng dẫn này.

Bài viết này hướng dẫn sử dụng Gravatar bằng JavaScript, chính xác hơn là jQuery.

Tài nguyên sử dụng

Bạn cần tải về jQuery MD5.JS.

Tải về

Để sử dụng, bạn cần có jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="jquery.md5.min.js"></script>

Giới thiệu Gravatar

Để lấy ảnh đại diện, các bạn gửi mã md5 của email về địa chỉ https://www.gravatar.com/avatar/....

Ví dụ: https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50 sẽ được kết quả.

Để chỉnh kích thước, bạn cần thêm biến số ?s=, kích thước hỗ trợ là từ 1px đến 2048px.

Ví dụ: https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=500.

Trường hợp không có ảnh, bạn cần hiển thị một ảnh mặc định. Gravatar hỗ trợ 7 loại ảnh mặc định:







Sử dụng bằng cách truyền vào biến số ?d=, ví dụ: https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?d=retro.

Sử dụng với Javascript

Sau khi chèn jQuery và MD5, các bạn sử dụng như sau.

var userEmail = 'email@email.com';
var md5Email = $.MD5(userEmail);
var avtUrl = 'https://gravatar.com/avatar/' + md5Email + '?&d=retro&size=65';
document.write('<img src="' + avtUrl + '" alt="Avatar" />');

Chúc các bạn thành công!

Exit mobile version