Skip to content

llaumgui/jquery-async-gravatar

Repository files navigation

jQuery async Gravatar

Author Software License Build Status Latest Version

Quality Gate Status Coverage Maintainability Rating Reliability Rating Security Rating

An asynchronous loading method for Gravatar images.

Installation

With NPM

npm i jquery-async-gravatar

Standalone

Include script after the jQuery library (unless you are packaging scripts somehow else):

<script src="/path/to/jquery.async-gravatar.min.js"></script>

Do not include the script directly from GitHub. The file is being served as text/plain and as such being blocked in Internet Explorer on Windows 7 for instance (because of the wrong MIME type). Bottom line: GitHub is not a CDN.

Usage

  • Use a default image instead of Gravatar image and pass the hash as a "data-gravatar_hash" attribute:
<img class="gravatar" alt="Gravatar" src="./test/default.jpg" data-gravatar_hash="THE_USER_GRAVATAR_HASH_HERE" />
  • Select all images and load asynchronous the Gravatars:
$( ".gravatar" ).asyncGravatar( {} );

Options

Option Description Default value
size Image size, which will be dynamically delivered from Gravatar. 64
default_img What happens when an email address has no matching Gravatar image? mm
force_https If you're displaying Gravatars on a page that is being served over SSL and it's not detected. false
rating Gravatar allows users to self-rate their images so that they can indicate if an image is appropriate for a certain audience. g

For more explication see official documentation.

Example

Example with images of "50px", with "identicon" as default image, with rating "pg" and using https:

$(".gravatar").asyncGravatar({
    "size": "50",
    "default_img": "identicon",
    "force_https": true,
    "rating": "pg"
} );

Data attributes

You can also use data attributes on each images:

<img class="gravatar" alt="Gravatar" src="./test/default.jpg"
     data-gravatar_hash="HASH"
     data-gravatar_size="SIZE"
     data-gravatar_default="DEFAULT_IMG"
     data-gravatar_rating="RATING" />

License

Released under the MIT license.