Replace Images With Gravatar Avatars - jQuery GravaLay

GravaLay is a small jQuery plugin which loads and replaces the regular images (default avatar images) with configurable Gravatar avatars.

The plugin checks if an image exists and replaces if it does via AJAX requests.

How to use it:

1. Insert the default image into the webpage and pass the hashed value of an email address as a data-gravalay-hash attribute:

<img
  class="example"
  src="default-avatar.jpg"
  data-gravalay-hash="hash here"
>

2. Insert jQuery library and the jQuery GravaLay plugin into the html page.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="jquery.gravalay.js"></script>

3. Call the function on the img tag and done.

$(function(){

  $('.example').gravalay();

});

4. Customize the image size of the Gravatar avatar.

<img
  class="example"
  src="default-avatar.jpg"
  data-gravalay-hash="hash here"
  data-gravalay-size="200"
>

5. You can also insert the email address via the data-gravalay-mail attribute:

<img
  class="example"
  src="default-avatar.jpg"
  data-gravalay-hash="hash here"
  data-gravalay-size="200",
  data-gravalay-mail="[email protected]"
>

---

This awesome jQuery plugin is developed by michz. For more Advanced Usages, please check the demo page or visit the official website.