st-gravatar-img
v1.0.0
Published
Web Component to display Gravatar Image
Downloads
6
Readme
A simple web component to display gravatar images based on stencil
Install this component
By cdn (cdn hosted)
<script src="https://unpkg.com/st-gravatar-img@latest/dist/st-gravatar-img.js"></script>
By npm (self hosted)
npm install st-gravatar-img --save
<script src="node_modules/st-gravatar-img/dist/st-gravatar-img.js"></script>
Use this component
<!-- by md5 hash of your email -->
<st-gravatar-img hash="322b70sg015ith31u69b49cc1c81315f"></st-gravatar-img>
<!-- or by email -->
<st-gravatar-img email="[email protected]"></st-gravatar-img>
Attributes
| Attribute | Type | Default | Description |
| --------- | -------- | ---------------------------------- | ---------------------------------------------------------- |
| hash
| string | 322b70sg015ith31u69b49cc1c81315f
| MD5 hash of your email (avoid to expose your email) |
| email
| string | [email protected]
| Gravatar account email (warning email will be exposed) |
| size
| number | 120
| Size (px) of the image |
CSS Variables
CSS Variables can be used to style the web component:
Available variables
| Attribute | Default | Description |
| ------------------------------ | ------- | ------------------------------------------------------ |
| --gravatar-img-border
| none | Defines border
property of the img
element |
| --gravatar-img-border-radius
| none | Defines border-radiues
property of the img
element |
| --gravatar-img-background
| none | Defines background
property of the img
element |
Example usage
st-gravatar-img {
--gravatar-img-border: 10px solid #a52525;
--gravatar-img-border-radius: 100%;
--gravatar-img-background: #a52525;
}
How to create a hash
Images on Gravatar can be accessed by a MD5
hash of your email address.
How to use createHash
method
This web component offers the possibility to create a hash based on your email address by the exposed createHash
method.
let gravatarImg = document.querySelector('st-gravatar-img');
// method is available when component is ready
gravatarImg.componentOnReady().then(() => {
// create hash
const hash = gravatarImg.createHash('[email protected]');
// now you can apply the hash on the web component
gravatarImg.setAttribute('hash', hash);
});