Skip to content

Instantly share code, notes, and snippets.

@guilhermeteodoro

guilhermeteodoro/avatar.html

Created October 5, 2017 17:38
Show Gist options
  • Save guilhermeteodoro/04e5ee2d375145b794e740244caf2b9c to your computer and use it in GitHub Desktop.
Save guilhermeteodoro/04e5ee2d375145b794e740244caf2b9c to your computer and use it in GitHub Desktop.
Download ZIP
an html to generate avatars from urls
Raw
avatar.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<style>
.container {
width: 100%;
margin-bottom: 20px;
}
.photo {
display: inline-block;
width: 120px;
height: 120px;
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
var photos = [
'https://ca.slack-edge.com/T2S3R5HEZ-U5WQDAW85-4fee08ee5b30-1024',
'https://ca.slack-edge.com/T2S3R5HEZ-U6RHDKB4M-8b16fa6c6b3c-1024',
'https://ca.slack-edge.com/T2S3R5HEZ-U2SQ8TS07-9aa49c302051-1024',
'https://ca.slack-edge.com/T2S3R5HEZ-U2S3KBV4N-d3dd9e452d2f-1024',
'https://ca.slack-edge.com/T2S3R5HEZ-U3Z8AN28Y-ef4035b6e461-1024',
'https://ca.slack-edge.com/T2S3R5HEZ-U5LQ3DULR-4aa63ce51f34-1024'
]
var $el = $('#app');
var render = function () {
$container = $el.append('<div class="container"></div>')
photos.map(function(photo) {
$container.append('<span class="photo" style="background-image: url(\''+ photo +'\')"></span>');
});
}
render();
render();
render();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment