Gravatar là chữ viết tắt của “Globally Recognized Avatar“, dịch sang Tiếng Việt gọi là ảnh đại diện được nhận dạng trên toàn cầu. Đây là một hình ảnh có kích thước nhỏ nằm gần tên của bạn trong khi bạn gửi bài viết hoặc bình luận trên blog WordPress hoặc các dịch vụ liên quan.
Ả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.
Để 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:
404
mp
identicon
monsterid
wavatar
retro
robohash
blank
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 protected]';
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!
Không có bình luận.