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-defaultattribute 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>