refactor: theme changes for buildAvatar (nodebb/nodebb#7681)

* fix: using new avatar helper

* fix: using helper in flag details page

* feat: using new avatar helper

* fix: more changes to use buildAvatar

* fix: bump nbbpm.compatibility to exclude 1.12.x

less/account.less

@@ -398,10 +398,6 @@
 			margin-bottom: 1rem;
 		}
 
-		.timestamp {
-			font-weight: bold;
-		}
-
 		.expiry {
 			font-size: 1.25rem;
 			font-style: italic;

less/category.less

@@ -39,13 +39,14 @@
 				}
 
 				.fa-check {
-					padding: 14px;
+					padding: 14.5px;	/* 14.5*2 + 15 + 2px border = 46px */
 					border-radius: 50%;
 					position: absolute;
 					font-size: 15px;
 					opacity: 0;
 					top: 0px;
 					left: 0px;
+					border: 1px solid transparent;
 
 					&:before {
 						.pointer;
@@ -56,11 +57,11 @@
 					}
 				}
 
-				.user-img, .user-icon {
+				.avatar {
 					opacity: 1;
 				}
 
-				.fa-check, .user-img, .user-icon {
+				.fa-check, .avatar {
 					.transition(.2s ease-in-out all);
 				}
 
@@ -68,7 +69,7 @@
 			}
 
 			.avatar .select:hover {
-				.user-img, .user-icon {
+				.avatar {
 					opacity: 0;
 				}
 
@@ -80,7 +81,7 @@
 			}
 
 			&.selected {
-				.select .user-img, .select .user-icon {
+				.select .avatar {
 					opacity: 0;
 				}
 

less/topic.less

@@ -86,9 +86,8 @@
 				}
 			}
 
-			img, .user-icon {
+			.avatar {
 				margin-right: 15px;
-				.user-icon-style(46px, 2.4rem, 50%);
 			}
 		}
 
@@ -349,9 +348,8 @@
 				}
 			}
 
-			img, .user-icon {
+			.avatar {
 				margin-right: 15px;
-				.user-icon-style(46px, 2.4rem, 50%);
 			}
 		}
 

less/users.less

@@ -43,10 +43,6 @@
 		vertical-align: top;
 		width: 104px;
 
-		img, .user-icon {
-			.user-icon-style(80px, 4rem, 50%);
-		}
-
 		a {
 			max-width: 94px;
 			text-overflow: ellipsis;
@@ -70,10 +66,8 @@
 		vertical-align: middle;
 	}
 
-	.anon-user {
+	.anon-user .avatar {
-		.user-icon {
+		background: @gray-lighter;
-			background: @gray-lighter;
+		color: white;
-			color: white;
-		}
 	}
 }

package.json

@@ -2,7 +2,7 @@
   "name": "nodebb-theme-persona",
   "version": "9.1.38",
   "nbbpm": {
-    "compatibility": "^1.12.0"
+    "compatibility": "^1.13.0"
   },
   "description": "Persona theme for NodeBB",
   "main": "theme.less",

templates/account/info.tpl

@@ -122,13 +122,10 @@
 						<!-- BEGIN history.bans -->
 						<li>
 							<p>
-								<a href="{config.relative_path}/user/{history.bans.user.userslug}">
+								<a href="{config.relative_path}/user/{history.bans.user.userslug}">{buildAvatar(history.bans.user, "sm", true)}</a>
-									<!-- IF history.bans.user.picture -->
+								<strong>
-									<img title="{history.bans.user.username}" class="avatar avatar-sm avatar-rounded" src="{history.bans.user.picture}" />
+									<a href="<!-- IF history.bans.user.userslug -->{config.relative_path}/user/{history.bans.user.userslug}<!-- ELSE -->#<!-- ENDIF history.bans.user.userslug -->" itemprop="author" data-username="{history.bans.user.username}" data-uid="{history.bans.user.uid}">{history.bans.user.username}</a>
-									<!-- ELSE -->
+								</strong>
-									<span title="{history.bans.user.username}" class="avatar avatar-sm avatar-rounded user-icon" style="background-color: {history.bans.user.icon:bgColor};">{history.bans.user.icon:text}</span>
-									<!-- ENDIF history.bans.user.picture -->
-								</a>
 								<span class="timestamp timeago" title="{../timestampISO}"></span> &mdash; {../timestampReadable}<br />
 								<!-- IF ../until -->
 								<span class="expiry">[[user:info.banned-until, {../untilReadable}]]</span><br />
@@ -160,17 +157,8 @@
 						<hr/>
 
 						<div class="clearfix">
-							<div class="icon pull-left">
-								<a href="<!-- IF moderationNotes.user.userslug -->{config.relative_path}/user/{moderationNotes.user.userslug}<!-- ELSE -->#<!-- ENDIF moderationNotes.user.userslug -->">
-									<!-- IF moderationNotes.user.picture -->
-									<img class="avatar avatar-sm" component="user/picture" data-uid="{moderationNotes.user.uid}" src="{moderationNotes.user.picture}" align="left" itemprop="image" />
-									<!-- ELSE -->
-									<div class="avatar avatar-sm" component="user/picture" data-uid="{moderationNotes.user.uid}" style="background-color: {moderationNotes.user.icon:bgColor};">{moderationNotes.user.icon:text}</div>
-									<!-- ENDIF moderationNotes.user.picture -->
-								</a>
-							</div>
-
 							<div class="pull-left">
+								<a href="<!-- IF moderationNotes.user.userslug -->{config.relative_path}/user/{moderationNotes.user.userslug}<!-- ELSE -->#<!-- ENDIF moderationNotes.user.userslug -->">{buildAvatar(moderationNotes.user, "sm", true)}</a>
 								<strong>
 									<a href="<!-- IF moderationNotes.user.userslug -->{config.relative_path}/user/{moderationNotes.user.userslug}<!-- ELSE -->#<!-- ENDIF moderationNotes.user.userslug -->" itemprop="author" data-username="{moderationNotes.user.username}" data-uid="{moderationNotes.user.uid}">{moderationNotes.user.username}</a>
 								</strong>

templates/flags/detail.tpl

@@ -16,13 +16,7 @@
 		<!-- IF type_bool.post -->
 		<div class="media">
 			<div class="media-left">
-				<a href="{config.relative_path}/user/{target.user.userslug}">
+				<a href="{config.relative_path}/user/{target.user.userslug}">{buildAvatar(target.user, "lg", false, "media-object")}</a>
-					<!-- IF target.user.picture -->
-					<img class="media-object avatar avatar-lg" src="{target.user.picture}" alt="{target.user.username}" />
-					<!-- ELSE -->
-					<div class="media-object avatar avatar-lg" style="background-color: {target.user.icon:bgColor}">{target.user.icon:text}</div>
-					<!-- ENDIF target.user.picture -->
-				</a>
 			</div>
 			<div class="media-body">
 				<h4 class="media-heading"><a href="{config.relative_path}/user/{target.user.userslug}">{target.user.username}</a></h4>
@@ -34,13 +28,7 @@
 		<!-- IF type_bool.user -->
 		<div class="media">
 			<div class="media-left">
-				<a href="{config.relative_path}/user/{target.userslug}">
+				<a href="{config.relative_path}/user/{target.userslug}">{buildAvatar(target, "lg", false, "media-object")}</a>
-					<!-- IF target.picture -->
-					<img class="media-object avatar avatar-lg" src="{target.picture}" alt="{target.username}" />
-					<!-- ELSE -->
-					<div class="media-object avatar avatar-lg" style="background-color: {target.icon:bgColor}">{target.icon:text}</div>
-					<!-- ENDIF target.picture -->
-				</a>
 			</div>
 			<div class="media-body">
 				<h4 class="media-heading"><a href="{config.relative_path}/user/{target.userslug}">{target.username}</a></h4>
@@ -65,11 +53,7 @@
 						<div class="col-sm-6">
 							<label>[[flags:reporter]]</label>
 							<div>
-								<!-- IF reporter.picture -->
+								{buildAvatar(reporter, "sm", false, "media-object")}
-								<img class="media-object avatar avatar-sm" src="{reporter.picture}" alt="{reporter.username}" />
-								<!-- ELSE -->
-								<div class="media-object avatar avatar-sm" style="background-color: {reporter.icon:bgColor}">{reporter.icon:text}</div>
-								<!-- ENDIF reporter.picture -->
 								<a href="{config.relative_path}/user/{reporter.userslug}">{reporter.username}</a>
 							</div>
 						</div>
@@ -122,13 +106,7 @@
 					<!-- BEGIN notes -->
 					<div class="media">
 						<div class="media-left">
-							<a href="{config.relative_path}/user/{../user.userslug}">
+							<a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(notes.user, "md", false, "media-object")}</a>
-								<!-- IF ../user.picture -->
-								<img class="media-object avatar avatar-md" src="{../user.picture}" alt="{../user.username}" />
-								<!-- ELSE -->
-								<div class="media-object avatar avatar-md" style="background-color: {../user.icon:bgColor}">{../user.icon:text}</div>
-								<!-- ENDIF ../user.picture -->
-							</a>
 						</div>
 						<div class="media-body">
 							<h4 class="media-heading">
@@ -171,13 +149,7 @@
 					<!-- BEGIN history -->
 					<div class="media">
 						<div class="media-left">
-							<a href="{config.relative_path}/user/{../user.userslug}">
+							<a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(history.user, "md", false, "media-object")}</a>
-								<!-- IF ../user.picture -->
-								<img class="media-object avatar avatar-md" src="{../user.picture}" alt="{../user.username}" />
-								<!-- ELSE -->
-								<div class="media-object avatar avatar-md" style="background-color: {../user.icon:bgColor}">{../user.icon:text}</div>
-								<!-- ENDIF ../user.picture -->
-							</a>
 						</div>
 						<div class="media-body">
 							<h4 class="media-heading">

templates/flags/list.tpl

@@ -51,11 +51,7 @@
 						</a>
 					</td>
 					<td>
-						<!-- IF ../reporter.picture -->
+						{buildAvatar(../reporter, "sm")}
-						<img class="avatar avatar-sm" src="{../reporter.picture}" />
-						<!-- ELSE -->
-						<div class="avatar avatar-sm" style="background-color: {../reporter.icon:bgColor};">{../reporter.icon:text}</div>
-						<!-- ENDIF ../reporter.picture -->
 						{../reporter.username}
 					</td>
 					<td><span class="timeago" title="{../datetimeISO}"></span></td>

templates/groups/details.tpl

@@ -73,11 +73,7 @@
 					<!-- BEGIN group.pending -->
 					<tr data-uid="{group.pending.uid}">
 						<td>
-							<!-- IF group.pending.picture -->
+							<a href="{config.relative_path}/user/{group.pending.userslug}">{buildAvatar(group.pending, "sm", true)}</a>
-							<a href="{config.relative_path}/user/{group.pending.userslug}"><img class="avatar avatar-sm avatar-rounded" src="{group.pending.picture}" /></a>
-							<!-- ELSE -->
-							<div class="avatar avatar-sm avatar-rounded" style="background-color: {group.pending.icon:bgColor};">{group.pending.icon:text}</div>
-							<!-- ENDIF group.pending.picture -->
 						</td>
 						<td class="member-name">
 							<a href="{config.relative_path}/user/{group.pending.userslug}">{group.pending.username}</a>
@@ -125,11 +121,7 @@
 					<!-- BEGIN group.invited -->
 					<tr data-uid="{group.invited.uid}">
 						<td>
-							<!-- IF group.invited.picture -->
+							<a href="{config.relative_path}/user/{group.invited.userslug}">{buildAvatar(group.invited, "sm", true)}</a>
-							<a href="{config.relative_path}/user/{group.invited.userslug}"><img class="avatar avatar-sm avatar-rounded" src="{group.invited.picture}" /></a>
-							<!-- ELSE -->
-							<div class="avatar avatar-sm avatar-rounded" style="background-color: {group.invited.icon:bgColor};">{group.invited.icon:text}</div>
-							<!-- ENDIF group.invited.picture -->
 						</td>
 						<td class="member-name">
 							<a href="{config.relative_path}/user/{group.invited.userslug}">{group.invited.username}</a>

templates/partials/categories/lastpost.tpl

@@ -3,13 +3,7 @@
 	<!-- IF @first -->
 	<div component="category/posts">
 		<p>
-			<a href="{config.relative_path}/user/{../user.userslug}">
+			<a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(posts.user, "sm", true)}</a>
-				<!-- IF ../user.picture -->
-				<img class="user-img" title="{../user.username}" alt="{../user.username}" src="{../user.picture}">
-				<!-- ELSE -->
-				<span class="user-icon user-img" title="{../user.username}" style="background-color: {../user.icon:bgColor};">{../user.icon:text}</span>
-				<!-- ENDIF ../user.picture -->
-			</a>
 			<a class="permalink" href="{config.relative_path}/topic/{../topic.slug}<!-- IF ../index -->/{../index}<!-- ENDIF ../index -->">
 				<small class="timeago" title="{../timestampISO}"></small>
 			</a>

templates/partials/chats/message.tpl

@@ -1,12 +1,6 @@
 <li component="chat/message" class="chat-message clear<!-- IF ../deleted --> deleted<!-- END -->" data-index="{messages.index}" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-self="{messages.self}" data-break="{messages.newSet}" data-timestamp="{messages.timestamp}">
 	<div class="message-header">
-		<a href="{config.relative_path}/user/{messages.fromUser.userslug}">
+		<a href="{config.relative_path}/user/{messages.fromUser.userslug}">{buildAvatar(messages.fromUser, "md", true, "not-responsive")}</a>
-			<!-- IF messages.fromUser.picture -->
-			<img class="chat-user-image not-responsive" src="{messages.fromUser.picture}">
-			<!-- ELSE -->
-			<div class="user-icon chat-user-image" style="background-color: {messages.fromUser.icon:bgColor};">{messages.fromUser.icon:text}</div>
-			<!-- ENDIF messages.fromUser.picture -->
-		</a>
 		<strong><span class="chat-user"><a href="{config.relative_path}/user/{messages.fromUser.userslug}">{messages.fromUser.username}</a></span></strong>
 		<!-- IF ../fromUser.banned -->
 		<span class="label label-danger">[[user:banned]]</span>

templates/partials/chats/user.tpl

@@ -1,7 +1 @@
-<a href="{config.relative_path}/user/{rooms.users.userslug}">
+<a href="{config.relative_path}/user/{rooms.users.userslug}">{buildAvatar(rooms.users, "sm", true)}</a>
-	<!-- IF rooms.users.picture -->
-	<img class="user-img avatar avatar-sm avatar-rounded" src="{rooms.users.picture}" title="{rooms.users.username}">
-	<!-- ELSE -->
-	<div class="user-img avatar avatar-sm avatar-rounded" title="{rooms.users.username}" style="background-color: {rooms.users.icon:bgColor};">{rooms.users.icon:text}</div>
-	<!-- ENDIF rooms.users.picture -->
-</a>

templates/partials/groups/list.tpl

@@ -8,13 +8,7 @@
 				<ul class="members">
 					<!-- BEGIN members -->
 					<li>
-						<a href="{config.relative_path}/user/{groups.members.userslug}">
+						<a href="{config.relative_path}/user/{groups.members.userslug}">{buildAvatar(groups.members, "sm", true)}</a>
-							<!-- IF groups.members.picture -->
-							<img class="avatar avatar-sm avatar-rounded" src="{groups.members.picture}" title="{groups.members.username}" />
-							<!-- ELSE -->
-							<div class="avatar avatar-sm avatar-rounded" style="background-color: {groups.members.icon:bgColor};" title="{groups.members.username}">{groups.members.icon:text}</div>
-							<!-- ENDIF groups.members.picture -->
-						</a>
 					</li>
 					<!-- END members -->
 					<!-- IF groups.truncated -->

templates/partials/groups/memberlist.tpl

@@ -17,13 +17,7 @@
 	<!-- BEGIN group.members -->
 	<tr data-uid="{group.members.uid}">
 		<td>
-			<a href="{config.relative_path}/user/{group.members.userslug}">
+			<a href="{config.relative_path}/user/{group.members.userslug}">{buildAvatar(group.members, "sm", true)}</a>
-				<!-- IF group.members.picture -->
-				<img class="avatar avatar-sm avatar-rounded" src="{group.members.picture}" />
-				<!-- ELSE -->
-				<div class="avatar avatar-sm avatar-rounded" style="background-color: {group.members.icon:bgColor};">{group.members.icon:text}</div>
-				<!-- ENDIF group.members.picture -->
-			</a>
 		</td>
 		<td class="member-name">
 			<a href="{config.relative_path}/user/{group.members.userslug}">{group.members.username}</a> <i title="[[groups:owner]]" class="fa fa-star text-warning <!-- IF !group.members.isOwner -->invisible<!-- ENDIF !group.members.isOwner -->"></i>

templates/partials/menu.tpl

@@ -67,11 +67,7 @@
 
 					<li id="user_label" class="dropdown">
 						<label for="user-control-list-check" class="dropdown-toggle" data-toggle="dropdown" id="user_dropdown" title="[[global:header.profile]]" role="button">
-							<!-- IF user.picture -->
+							{buildAvatar(user, "md", true)}
-							<img component="header/userpicture" src="{user.picture}" alt="{user.username}"/>
-							<!-- ELSE -->
-							<span component="header/usericon" class="user-icon" style="background-color: {user.icon:bgColor}; display: block;">{user.icon:text}</span>
-							<!-- ENDIF user.picture -->
 							<span id="user-header-name" class="visible-xs-inline">{user.username}</span>
 						</label>
 						<input type="checkbox" class="hidden" id="user-control-list-check" aria-hidden="true">

templates/partials/modals/votes_modal.tpl

@@ -1,22 +1,10 @@
 <h3>[[global:upvoters]] <small>({upvoteCount})</small></h3>
 <!-- BEGIN upvoters -->
-<a href="{config.relative_path}/user/{upvoters.userslug}">
+<a href="{config.relative_path}/user/{upvoters.userslug}">{buildAvatar(upvoters, "sm", false)}</a>
-<!-- IF upvoters.picture -->
-<img class="avatar avatar-sm" src="{upvoters.picture}" title="{upvoters.username}"/>
-<!-- ELSE -->
-<div class="avatar avatar-sm" style="background-color: {upvoters.icon:bgColor};">{upvoters.icon:text}</div>
-<!-- ENDIF upvoters.picture -->
-</a>
 <!-- END upvoters -->
 <!-- IF showDownvotes -->
 <h3>[[global:downvoters]] <small>({downvoteCount})</small></h3>
 <!-- BEGIN downvoters -->
-<a href="{config.relative_path}/user/{downvoters.userslug}">
+<a href="{config.relative_path}/user/{downvoters.userslug}">{buildAvatar(downvoters, "sm", false)}</a>
-<!-- IF downvoters.picture -->
-<img class="avatar avatar-sm" src="{downvoters.picture}" title="{downvoters.username}"/>
-<!-- ELSE -->
-<div class="avatar avatar-sm" style="background-color: {downvoters.icon:bgColor};">{downvoters.icon:text}</div>
-<!-- ENDIF downvoters.picture -->
-</a>
 <!-- END downvoters -->
 <!-- ENDIF showDownvotes -->

templates/partials/posts_list.tpl

@@ -14,13 +14,7 @@
 			<small class="topic-category"><a href="{config.relative_path}/category/{posts.category.slug}">[[global:posted_in, {posts.category.name}]]</a></small>
 
 			<div class="post-info">
-				<a href="{config.relative_path}/user/{posts.user.userslug}">
+				<a href="{config.relative_path}/user/{posts.user.userslug}">{buildAvatar(posts.user, "md", true, "user-img")}</a>
-					<!-- IF posts.user.picture -->
-					<img title="{posts.user.username}" class="img-rounded user-img" src="{posts.user.picture}">
-					<!-- ELSE -->
-					<div class="user-icon user-img" style="background-color: {posts.user.icon:bgColor};" title="{posts.user.username}">{posts.user.icon:text}</div>
-					<!-- ENDIF posts.user.picture -->
-				</a>
 
 				<div class="post-author">
 					<a href="{config.relative_path}/user/{posts.user.userslug}">{posts.user.username}</a><br />

templates/partials/quick-search-results.tpl

@@ -1,21 +1,17 @@
 <!-- BEGIN posts -->
 <li>
-    <a href="{config.relative_path}/post/{posts.pid}">
+	<a href="{config.relative_path}/post/{posts.pid}">
-        <!-- IF posts.user.picture -->
+		{buildAvatar(posts.user, "sm", true)}
-        <img title="{posts.user.username}" class="avatar avatar-sm avatar-rounded" src="{posts.user.picture}" />
+		<span class="quick-search-title">{posts.topic.title}</span>
-        <!-- ELSE -->
+		<br/>
-        <span title="{posts.user.username}" class="avatar avatar-sm avatar-rounded" style="background-color: {posts.user.icon:bgColor};">{posts.user.icon:text}</span>
+		<p class="snippet">
-        <!-- ENDIF posts.user.picture -->
+		{posts.snippet}
-        <span class="quick-search-title">{posts.topic.title}</span>
+		</p>
-        <br/>
+		<small class="post-info pull-right">
-        <p class="snippet">
+			<span class="fa-stack" style="{function.generateCategoryBackground, posts.category}"><i style="color:{posts.category.color};" class="fa {posts.category.icon} fa-stack-1x"></i></span> {posts.category.name} &bull;
-        {posts.snippet}
+			<span class="timeago" title="{posts.timestampISO}"></span>
-        </p>
+		</small>
-        <small class="post-info pull-right">
+	 </a>
-            <span class="fa-stack" style="{function.generateCategoryBackground, posts.category}"><i style="color:{posts.category.color};" class="fa {posts.category.icon} fa-stack-1x"></i></span> {posts.category.name} &bull;
-            <span class="timeago" title="{posts.timestampISO}"></span>
-        </small>
-     </a>
 </li>
 <!-- IF !@last -->
 <li role="separator" class="divider"></li>
@@ -23,8 +19,8 @@
 <!-- END posts -->
 <!-- IF multiplePages -->
 <li class="text-center">
-    <a href="{url}">
+	<a href="{url}">
-        [[search:see-more-results, {matchCount}]]
+		[[search:see-more-results, {matchCount}]]
-    </a>
+	</a>
 </li>
 <!-- ENDIF multiplePages -->

templates/partials/slideout-menu.tpl

@@ -1,10 +1,6 @@
 <div class="menu-profile">
 	<!-- IF user.uid -->
-	<!-- IF user.picture -->
+	{buildAvatar(user, "lg", true, "user-icon")}
-	<img src="{user.picture}"/>
-	<!-- ELSE -->
-	<div class="user-icon" style="background-color: {user.icon:bgColor};">{user.icon:text}</div>
-	<!-- ENDIF user.picture -->
 	<i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i>
 	<!-- ENDIF user.uid -->
 </div>

templates/partials/topic/post.tpl

@@ -1,13 +1,8 @@
 <div class="clearfix post-header">
 	<div class="icon pull-left">
 		<a href="<!-- IF posts.user.userslug -->{config.relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->">
-			<!-- IF posts.user.picture -->
+			{buildAvatar(posts.user, "46", true, "", "user/picture")}
-			<img component="user/picture" data-uid="{posts.user.uid}" src="{posts.user.picture}" align="left" itemprop="image" />
-			<!-- ELSE -->
-			<div component="user/picture" data-uid="{posts.user.uid}" class="user-icon" style="background-color: {posts.user.icon:bgColor};">{posts.user.icon:text}</div>
-			<!-- ENDIF posts.user.picture -->
 			<i component="user/status" class="fa fa-circle status {posts.user.status}" title="[[global:{posts.user.status}]]"></i>
-
 		</a>
 	</div>
 
@@ -87,11 +82,7 @@
 	<a component="post/reply-count" href="#" class="threaded-replies no-select <!-- IF !posts.replies.count -->hidden<!-- ENDIF !posts.replies.count -->">
 		<span component="post/reply-count/avatars" class="avatars <!-- IF posts.replies.hasMore -->hasMore<!-- ENDIF posts.replies.hasMore -->">
 			<!-- BEGIN posts.replies.users -->
-			<!-- IF posts.replies.users.picture -->
+			{buildAvatar(posts.replies.users, "xs", true, "")}
-			<span><img component="user/picture" data-uid="{posts.replies.users.uid}" title="{posts.replies.users.username}" class="avatar" src="{posts.replies.users.picture}"  itemprop="image" /></span>
-			<!-- ELSE -->
-			<div component="user/picture" data-uid="{posts.replies.users.uid}" title="{posts.replies.users.username}" class="user-icon" style="background-color: {posts.replies.users.icon:bgColor};">{posts.replies.users.icon:text}</div>
-			<!-- ENDIF posts.replies.users.picture -->
 			<!-- END posts.replies.users -->
 		</span>
 

templates/partials/topic/quickreply.tpl

@@ -2,11 +2,7 @@
 <div class="clearfix quick-reply">
 	<div class="icon pull-left hidden-xs">
 		<a href="<!-- IF posts.user.userslug -->{config.relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->">
-			<!-- IF loggedInUser.picture -->
+			{buildAvatar(loggedInUser, "46", true, "", "user/picture")}
-			<img component="user/picture" data-uid="{loggedInUser.uid}" src="{loggedInUser.picture}" align="left" itemprop="image" />
-			<!-- ELSE -->
-			<div component="user/picture" data-uid="{loggedInUser.uid}" class="user-icon" style="background-color: {loggedInUser.icon:bgColor};">{loggedInUser.icon:text}</div>
-			<!-- ENDIF loggedInUser.picture -->
 			<!-- IF loggedInUser.status -->
 			<i component="user/status" class="fa fa-circle status {loggedInUser.status}" title="[[global:{loggedInUser.status}]]"></i>
 			<!-- ENDIF loggedInUser.status -->

templates/partials/topics_list.tpl

@@ -11,11 +11,7 @@
 					<!-- IF topics.thumb -->
 					<img src="{topics.thumb}" class="user-img not-responsive" />
 					<!-- ELSE -->
-					<!-- IF topics.user.picture -->
+					{buildAvatar(topics.user, "46", true, "not-responsive")}
-					<img component="user/picture" data-uid="{topics.user.uid}" src="{topics.user.picture}" class="user-img not-responsive" />
-					<!-- ELSE -->
-					<div class="user-icon" style="background-color: {topics.user.icon:bgColor};">{topics.user.icon:text}</div>
-					<!-- ENDIF topics.user.picture -->
 					<!-- ENDIF topics.thumb -->
 					<i class="fa fa-check"></i>
 				</div>
@@ -26,11 +22,7 @@
 					<!-- IF topics.thumb -->
 					<img src="{topics.thumb}" class="user-img not-responsive" />
 					<!-- ELSE -->
-					<!-- IF topics.user.picture -->
+					{buildAvatar(topics.user, "46", true, "not-responsive")}
-					<img component="user/picture" data-uid="{topics.user.uid}" src="{topics.user.picture}" class="user-img not-responsive" />
-					<!-- ELSE -->
-					<div class="user-icon" style="background-color: {topics.user.icon:bgColor};">{topics.user.icon:text}</div>
-					<!-- ENDIF topics.user.picture -->
 					<!-- ENDIF topics.thumb -->
 				</a>
 				<!-- ENDIF !showSelect -->
@@ -106,13 +98,7 @@
 				<!-- ELSE -->
 				<!-- IF topics.teaser.pid -->
 				<p>
-					<a href="{config.relative_path}/user/{topics.teaser.user.userslug}">
+					<a href="{config.relative_path}/user/{topics.teaser.user.userslug}">{buildAvatar(topics.teaser.user, "24", true, "not-responsive")}</a>
-						<!-- IF topics.teaser.user.picture -->
-						<img title="{topics.teaser.user.username}" class="user-img not-responsive" src="{topics.teaser.user.picture}" />
-						<!-- ELSE -->
-						<span title="{topics.teaser.user.username}" class="user-icon user-img" style="background-color: {topics.teaser.user.icon:bgColor};">{topics.teaser.user.icon:text}</span>
-						<!-- ENDIF topics.teaser.user.picture -->
-					</a>
 					<a class="permalink" href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}">
 						<span class="timeago" title="{topics.teaser.timestampISO}"></span>
 					</a>

templates/partials/users_list.tpl

@@ -1,12 +1,6 @@
 <!-- BEGIN users -->
 <li class="users-box registered-user" data-uid="{users.uid}">
-	<a href="{config.relative_path}/user/{users.userslug}">
+	<a href="{config.relative_path}/user/{users.userslug}">{buildAvatar(users, "lg", true)}</a>
-		<!-- IF users.picture -->
-		<img src="{users.picture}" />
-		<!-- ELSE -->
-		<div class="user-icon" style="background-color: {users.icon:bgColor};">{users.icon:text}</div>
-		<!-- ENDIF users.picture -->
-	</a>
 	<br/>
 	<div class="user-info">
 		<span>

templates/search.tpl

@@ -188,13 +188,7 @@
 
 					<small>
 						<span class="pull-right post-preview-footer">
-							<a href="{config.relative_path}/user/{posts.user.userslug}">
+							<a href="{config.relative_path}/user/{posts.user.userslug}">{buildAvatar(posts.user, "sm", true)}</a>
-								<!-- IF posts.user.picture -->
-								<img class="user-img" title="{posts.user.username}" src="{posts.user.picture}"/>
-								<!-- ELSE -->
-								<div class="user-icon user-img" title="{posts.user.username}" style="background-color: {posts.user.icon:bgColor};">{posts.user.icon:text}</div>
-								<!-- ENDIF posts.user.picture -->
-							</a>
 							<a href="{config.relative_path}/category/{posts.category.slug}">[[global:posted_in, {posts.category.name}]] <i class="fa {posts.category.icon}"></i> <span class="timeago" title="{posts.timestampISO}"></span></a>
 						</span>
 					</small>

templates/users.tpl

@@ -34,7 +34,7 @@
 		<!-- IMPORT partials/users_list.tpl -->
 		<!-- IF anonymousUserCount -->
 		<li class="users-box anon-user">
-			<div class="user-icon">G</div>
+			<div class="avatar avatar-lg avatar-rounded">G</div>
 			<br/>
 			<div class="user-info">
 				<span id="online_anon_count">{anonymousUserCount}</span>