metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="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."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Gravatar - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Gravatar</a></li> <li class="toc-entry"><a href="#_gravatar_how_to">How to</a></li> <li class="toc-entry"><a href="#_gravatar_size">Gravatar size</a></li> <li class="toc-entry"><a href="#_gravatar_default">Defaults</a></li> <li class="toc-entry"><a href="#_gravatar_runtime">Runtime</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Gravatar</h1> <p class="text-leader"> 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. </p>  <p class="remark info"> Read more about Gravatar on the <a href="https://en.gravatar.com/">official website</a>. </p> <h3 id="_gravatar_how_to">How to</h3> <p> Setting up Gravatars on your site with Metro 4 is simple and easy. </p> <div class="example"> <div class="d-inline" data-role="gravatar" data-email="sergey@pimenov.com.ua"></div> <img class="d-inline" data-role="gravatar" data-email="sergey@pimenov.com.ua"> </div> <pre class=""><code> <div data-role="gravatar" data-email="sergey@pimenov.com.ua"></div> <img data-role="gravatar" data-email="sergey@pimenov.com.ua"> </code></pre> <h3 id="_gravatar_size">Gravatar size</h3> <p> 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 <code>data-size=value</code> where value is your size in pixels. </p> <div class="example"> <img class="d-inline" data-role="gravatar" data-email="sergey@pimenov.com.ua" data-size="40"> <img class="d-inline" data-role="gravatar" data-email="sergey@pimenov.com.ua" data-size="80"> <img class="d-inline" data-role="gravatar" data-email="sergey@pimenov.com.ua" data-size="120"> <img class="d-inline" data-role="gravatar" data-email="sergey@pimenov.com.ua" data-size="160"> <img class="d-inline" data-role="gravatar" data-email="sergey@pimenov.com.ua" data-size="200"> </div> <pre class=""><code> <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"> </code></pre> <p> You may request images anywhere from <strong>1px up to 2048px</strong>, however note that many users have lower resolution images, so requesting larger sizes may result in pixelation/low-quality images. </p>  <h3 id="_gravatar_default">Gravatar defaults</h3> <p> 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 <code>data-default</code>attribute to an image request: </p> <ul> <li><strong>404</strong>: do not load any image if none is associated with the email hash, instead return an HTTP 404 (File Not Found) response</li> <li><strong>mm</strong>: (mystery-man) a simple, cartoon-style silhouetted outline of a person (does not vary by email hash)</li> <li><strong>identicon</strong>: a geometric pattern based on an email hash</li> <li><strong>monsterid</strong>: a generated 'monster' with different colors, faces, etc</li> <li><strong>wavatar</strong>: generated faces with differing features and backgrounds</li> <li><strong>retro</strong>: awesome generated, 8-bit arcade-style pixelated faces</li> <li><strong>blank</strong>: a transparent PNG image (border added to HTML below for demonstration purposes)</li> </ul> <div class="example"> <img class="d-inline" data-role="gravatar" data-email="a@b.com" data-default="mm"> <img class="d-inline" data-role="gravatar" data-email="a@b.com" data-default="identicon"> <img class="d-inline" data-role="gravatar" data-email="a@b.com" data-default="monsterid"> <img class="d-inline" data-role="gravatar" data-email="a@b.com" data-default="wavatar"> <img class="d-inline" data-role="gravatar" data-email="a@b.com" data-default="retro"> <img class="d-inline" data-role="gravatar" data-email="a@b.com" data-default="robohash"> <img class="d-inline" data-role="gravatar" data-email="a@b.com" data-default="blank"> </div> <pre class=""><code> <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="robohash"> <img data-role="gravatar" data-email="a@b.com" data-default="blank"> </code></pre> <h4>Your own default image</h4> <p> 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 <code>data-default</code> attribute. The URL should be URL-encoded to ensure that it carries across correctly. Your own default image will returned in original size. </p> <div class="example"> <img class="d-inline" data-role="gravatar" data-email="a@b.com" data-default="https://metroui.org.ua/images/jeki_chan.jpg"> </div> <pre class=""><code> <img data-role="gravatar" data-email="a@b.com" data-default="https://metroui.org.ua/images/jeki_chan.jpg"> </code></pre> <p> 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: </p> <ul> <li>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.</li> <li>MUST be accessible via HTTP or HTTPS on the standard ports, 80 and 443, respectively.</li> <li>MUST have a recognizable image extension (jpg, jpeg, gif, png)</li> <li>MUST NOT include a querystring (if it does, it will be ignored)</li> </ul> <h3 id="_gravatar_runtime">Runtime</h3> <p> You can change atributes at runtime and Gravatar plugin change same values. </p> <div class="example"> <form action="javascript:void(0)" onsubmit="getGravatar(this)" class="d-flex mb-2"> <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"> </div> <pre class=""><code> <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> </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script> <script> function getGravatar(f){ var val = Number(f.elements['gravatar_size'].value); var size = val !== "" && Metro.utils.isInt(val) ? val : 0; $('#gravatar_runtime_demo_1').attr('data-size', size); } </script>    </body> </html>