client/general: correct A:R for thumbnails

client/css/main.css

@@ -148,3 +148,15 @@ nav.text-nav ul li.active a {
     border: 1px solid var(--message-success-border-color);
     background: var(--message-success-background-color);
 }
+
+.thumbnail {
+    /*background-image: attr(data-src url);*/ /* not available yet */
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+}
+.thumbnail img {
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+}

client/css/users.css

@@ -45,7 +45,7 @@
 #user .text-nav {
     margin-bottom: 1.5em;
 }
-#user-summary img {
+#user-summary .thumbnail {
     width: 6em;
     height: 6em;
     margin: 0 1.5em 1.5em 0;

client/html/user_summary.hbs

@@ -1,5 +1,5 @@
 <div id='user-summary'>
-    <img src='{{this.user.avatarUrl}}' alt='{{this.user.name}}&rsquo;s avatar'/>
+    {{thumbnail this.user.avatarUrl}}
     <ul class='basic-info'>
         <li>Registered: {{reltime this.user.creationTime}}</li>
         <li>Last seen: {{reltime this.user.lastLoginTime}}</li>

client/js/util/handlebars-helpers.js

@@ -10,6 +10,14 @@ handlebars.registerHelper('reltime', function(time) {
         '</time>');
 });
 
+handlebars.registerHelper('thumbnail', function(url) {
+    return new handlebars.SafeString(
+        '<div class="thumbnail" ' +
+        'style="background-image: url(\'' + url + '\')">' +
+        '<img alt="thumbnail" src="' + url + '"/>' +
+        '</div>');
+});
+
 handlebars.registerHelper('toLowerCase', function(str) {
     return str.toLowerCase();
 });