Gravatar
Your Gravatar is an image that follows you from site to site appearing beside your name when you do things like comment or post on a blog. Avatars help identify your posts on blogs and web forums.
Read more about Gravatar on the official website.
How to
Setting up Gravatars on your site with Metro 4 is simple and easy.
<div data-role="gravatar" data-email="sergey@pimenov.com.ua"></div>
<img data-role="gravatar" data-email="sergey@pimenov.com.ua">
Gravatar size
By default, images are presented at 80px by 80px.
You may request a specific image size, which will be dynamically delivered from Gravatar by using add attribute data-size=value
where value is your size in pixels.
<img data-role="gravatar" data-email="sergey@pimenov.com.ua" data-size="40">
<img data-role="gravatar" data-email="sergey@pimenov.com.ua" data-size="80">
<img data-role="gravatar" data-email="sergey@pimenov.com.ua" data-size="120">
<img data-role="gravatar" data-email="sergey@pimenov.com.ua" data-size="160">
<img data-role="gravatar" data-email="sergey@pimenov.com.ua" data-size="200">
You may request images anywhere from 1px up to 2048px, however note that many users have lower resolution images, so requesting larger sizes may result in pixelation/low-quality images.
Gravatar defaults
What happens when an email address has no matching Gravatar image?
Gravatar has a number of built in options which you can also use as defaults.
Most of these work by taking the requested email hash and using it to generate a themed image that is unique to that email address.
To use these options, just pass one of the following keywords as the data-default
attribute to an image request:
- 404: do not load any image if none is associated with the email hash, instead return an HTTP 404 (File Not Found) response
- mm: (mystery-man) a simple, cartoon-style silhouetted outline of a person (does not vary by email hash)
- identicon: a geometric pattern based on an email hash
- monsterid: a generated 'monster' with different colors, faces, etc
- wavatar: generated faces with differing features and backgrounds
- retro: awesome generated, 8-bit arcade-style pixelated faces
- blank: a transparent PNG image (border added to HTML below for demonstration purposes)
<img data-role="gravatar" data-email="a@b.com" data-default="404">
<img data-role="gravatar" data-email="a@b.com" data-default="mm">
<img data-role="gravatar" data-email="a@b.com" data-default="identicon">
<img data-role="gravatar" data-email="a@b.com" data-default="monsterid">
<img data-role="gravatar" data-email="a@b.com" data-default="wavatar">
<img data-role="gravatar" data-email="a@b.com" data-default="retro">
<img data-role="gravatar" data-email="a@b.com" data-default="blank">
Your own default image
If you'd prefer to use your own default image (perhaps your logo, a funny face, whatever),
then you can easily do so by supplying the URL to an image in the data-default
attribute.
The URL should be URL-encoded to ensure that it carries across correctly.
Your own default image will returned in original size.
<img data-role="gravatar"
data-email="a@b.com"
data-default="https://metroui.org.ua/images/jeki_chan.jpg">
When you include a default image, Gravatar will automatically serve up that image if there is no image associated with the requested email hash. There are a few conditions which must be met for default image URL:
- MUST be publicly available (e.g. cannot be on an intranet, on a local development machine, behind HTTP Auth or some other firewall etc). Default images are passed through a security scan to avoid malicious content.
- MUST be accessible via HTTP or HTTPS on the standard ports, 80 and 443, respectively.
- MUST have a recognizable image extension (jpg, jpeg, gif, png)
- MUST NOT include a querystring (if it does, it will be ignored)
Runtime
You can change atributes at runtime and Gravatar plugin change same values.
<form action="javascript:void(0)" onsubmit="getGravatar(this)">
<input type="number" placeholder="Enter gravatar size" name="gravatar_size">
<button class="button">Get image</button>
</form>
<img data-role="gravatar" data-email="sergey@pimenov.com.ua"
data-default="404" id="gravatar_runtime_demo_1">
<script>
function getGravatar(f){
var val = Number(f.elements['gravatar_size'].value);
var size = val !== "" && Metro.utils.isInt(val) ? val : 0;
console.log(size);
$('#gravatar_runtime_demo_1').attr('data-size', size);
}
</script>