X-Gravatar: HTML5 Web Component for Displaying Gravatar Profiles

I’ve just added a new component to my HTML5 Web Components gallery. X-Gravatar is a custom tag, using Gravatar‘s REST API to display Gravatar profiles.

Usage

[sourcecode language=”html”]
<acidjs-xgravatar mode="full" hash="14804fe005220d42595e1c2adb65c658"></acidjs-xgravatar>
<acidjs-xgravatar mode="compact" hash="johnsmith"></acidjs-xgravatar>
<acidjs-xgravatar mode="minimal" hash="johndoe"></acidjs-xgravatar>
[/sourcecode]

HTML Attributes

Apart from the standard HTML attributes (style, class, id, etc.), the tag also supports the following component-specific attributes:

• hash – Required username of the gravatar profile to show or MD5-hashed email of the user. You can create MD5 hashes here online. Examples: johnsmith or 14804fe005550d42595e1c2adb65c234.
• mode – Optional display mode of the component, one of the following "full" (default), "compact" or "minimal".
• width – Optional width of the component in pixels or percentage. Default: "100%".
• height – Optional height of the component in pixels Default: "auto".

JavaScript Methods, Getters and Setters

The component does not expose any custom methods, setters or getters and all standard JavaScript APIs are supported.

Have a great weekend, and don’t forget to check the demo on this page.

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.