Direct avatar rendering (#13649)

* Direct avatar rendering

This adds new template helpers for avatar rendering which output image
elements with direct links to avatars which makes them cacheable by the
browsers.

This should be a major performance improvment for pages with many avatars.

* fix avatars of other user's profile pages

* fix top border on user avatar name

* uncircle avatars

* remove old incomplete avatar selector

* use title attribute for name and add it back on blame

* minor refactor

* tweak comments

* fix url path join and adjust test to new result

* dedupe functions

templates/base/head_navbar.tmpl

@@ -47,7 +47,7 @@
 		<div class="right stackable menu">
 			<div class="ui dropdown jump item poping up" tabindex="-1" data-content="{{.i18n.Tr "user_profile_and_more"}}" data-variation="tiny inverted">
 				<span class="text">
-					<img class="ui tiny avatar image" width="24" height="24" src="{{.SignedUser.RelAvatarLink}}">
+					{{avatar .SignedUser 24 "tiny"}}
 					<span class="sr-only">{{.i18n.Tr "user_profile_and_more"}}</span>
 					<span class="mobile-only">{{.SignedUser.Name}}</span>
 					<span class="fitted not-mobile" tabindex="-1">{{svg "octicon-triangle-down"}}</span>
@@ -102,7 +102,7 @@
 
 			<div class="ui dropdown jump item poping up" tabindex="-1" data-content="{{.i18n.Tr "user_profile_and_more"}}" data-variation="tiny inverted">
 				<span class="text">
-					<img class="ui tiny avatar image" width="24" height="24" src="{{.SignedUser.RelAvatarLink}}">
+					{{avatar .SignedUser 24 "tiny"}}
 					<span class="sr-only">{{.i18n.Tr "user_profile_and_more"}}</span>
 					<span class="mobile-only">{{.SignedUser.Name}}</span>
 					<span class="fitted not-mobile" tabindex="-1">{{svg "octicon-triangle-down"}}</span>

templates/explore/organizations.tmpl

@@ -7,7 +7,7 @@
 		<div class="ui user list">
 			{{range .Users}}
 				<div class="item">
-				  <img class="ui avatar image" src="{{.RelAvatarLink}}">
+					{{avatar .}}
 				  <div class="content">
 					<span class="header">
 						<a href="{{.HomeLink}}">{{.Name}}</a> {{.FullName}}

templates/explore/repo_list.tmpl

@@ -2,9 +2,7 @@
 	{{range .Repos}}
 		<div class="item">
 			<div class="ui header">
-				{{if .RelAvatarLink}}
-					<img class="ui avatar image" src="{{.RelAvatarLink}}">
-				{{end}}
+				{{avatar .}}
 				<a class="name" href="{{.Link}}">
 					{{if or $.PageIsExplore $.PageIsProfileStarList }}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}}
 				</a>

templates/explore/users.tmpl

@@ -7,7 +7,7 @@
 		<div class="ui user list">
 			{{range .Users}}
 				<div class="item">
-				  <img class="ui avatar image" src="{{.RelAvatarLink}}">
+					{{avatar .}}
 				  <div class="content">
 					<span class="header"><a href="{{.HomeLink}}">{{.Name}}</a> {{.FullName}}</span>
 					<div class="description">

templates/org/header.tmpl

@@ -3,7 +3,7 @@
 		<div class="ui vertically grid head">
 			<div class="column">
 				<div class="ui header">
-					<img class="ui image" src="{{.SizedRelAvatarLink 100}}">
+					{{avatar . 100}}
 					<span class="text thin grey"><a href="{{.HomeLink}}">{{.DisplayName}}</a></span>
 					<span class="org-visibility">
 						{{if .Visibility.IsLimited}}<div class="ui medium orange horizontal label">{{$.i18n.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}

templates/org/home.tmpl

@@ -1,9 +1,7 @@
 {{template "base/head" .}}
 <div class="page-content organization profile">
-	{{/* overflow: auto is the clearfix - this avoids the image going beyond
-	the container where it is supposed to stay inside. */}}
-	<div class="ui container" style="overflow: auto">
-		<img class="ui left" id="org-avatar" src="{{.Org.SizedRelAvatarLink 140}}"/>
+	<div class="ui container df">
+		{{avatar .Org 140 "org-avatar"}}
 		<div id="org-info">
 			<div class="ui header">
 				{{.Org.DisplayName}}
@@ -53,7 +51,9 @@
 					{{$isMember := .IsOrganizationMember}}
 					{{range .Members}}
 						{{if or $isMember (.IsPublicMember $.Org.ID)}}
-							<a href="{{.HomeLink}}" title="{{.Name}}{{if .FullName}} ({{.FullName}}){{end}}"><img class="ui avatar" src="{{.RelAvatarLink}}"></a>
+							<a href="{{.HomeLink}}" title="{{.Name}}{{if .FullName}} ({{.FullName}}){{end}}">
+								{{avatar .}}
+							</a>
 						{{end}}
 					{{end}}
 				</div>

templates/org/member/members.tmpl

@@ -8,7 +8,7 @@
 			{{ range .Members}}
 				<div class="item ui grid">
 					<div class="ui one wide column">
-						<img class="ui avatar" src="{{.SizedRelAvatarLink 48}}">
+						{{avatar . 48}}
 					</div>
 					<div class="ui three wide column">
 						<div class="meta"><a href="{{.HomeLink}}">{{.Name}}</a></div>

templates/org/team/members.tmpl

@@ -33,7 +33,7 @@
 								</form>
 							{{end}}
 							<a href="{{.HomeLink}}">
-								<img class="ui avatar image" src="{{.RelAvatarLink}}">
+								{{avatar .}}
 								{{.DisplayName}}
 							</a>
 						</div>

templates/org/team/teams.tmpl

@@ -32,7 +32,7 @@
 					<div class="ui attached segment members">
 						{{range .Members}}
 							<a href="{{.HomeLink}}" title="{{.Name}}">
-								<img class="ui avatar image" src="{{.RelAvatarLink}}">
+								{{avatar .}}
 							</a>
 						{{end}}
 					</div>

templates/repo/commit_page.tmpl

@@ -38,14 +38,14 @@
 			<div class="ui stackable grid">
 				<div class="nine wide column">
 					{{if .Author}}
-						<img class="ui avatar image" src="{{.Author.RelAvatarLink}}" />
-					{{if .Author.FullName}}
-					<a href="{{.Author.HomeLink}}"><strong>{{.Author.FullName}}</strong></a>
+						{{avatar .Author}}
+						{{if .Author.FullName}}
+							<a href="{{.Author.HomeLink}}"><strong>{{.Author.FullName}}</strong></a>
+						{{else}}
+							<a href="{{.Author.HomeLink}}"><strong>{{.Commit.Author.Name}}</strong></a>
+						{{end}}
 					{{else}}
-					<a href="{{.Author.HomeLink}}"><strong>{{.Commit.Author.Name}}</strong></a>
-					{{end}}
-					{{else}}
-						<img class="ui avatar image" src="{{AvatarLink .Commit.Author.Email}}" />
+						{{avatarByEmail .Commit.Author.Email .Commit.Author.Email 12}}
 						<strong>{{.Commit.Author.Name}}</strong>
 					{{end}}
 					<span class="text grey" id="authored-time">{{TimeSince .Commit.Author.When $.Lang}}</span>
@@ -53,10 +53,10 @@
 						<div class="committed-by">
 							<span class="text grey">{{svg "octicon-git-commit"}}{{.i18n.Tr "repo.diff.committed_by"}}</span>
 							{{if ne .Verification.CommittingUser.ID 0}}
-								<img class="ui avatar image" src="{{.Verification.CommittingUser.RelAvatarLink}}" />
+								{{avatar .Verification.CommittingUser}}
 								<a href="{{.Verification.CommittingUser.HomeLink}}"><strong>{{.Commit.Committer.Name}}</strong></a>
 							{{else}}
-								<img class="ui avatar image" src="{{AvatarLink .Commit.Committer.Email}}" />
+								{{avatarByEmail .Commit.Committer.Email .Commit.Committer.Name}}
 								<strong>{{.Commit.Committer.Name}}</strong>
 							{{end}}
 						</div>
@@ -98,13 +98,13 @@
 						{{else}}
 							<span class="ui text">{{.i18n.Tr "repo.commits.signed_by_untrusted_user_unmatched"}}:</span>
 						{{end}}
-						<img class="ui avatar image" src="{{.Verification.SigningUser.RelAvatarLink}}" />
+						{{avatar .Verification.SigningUser}}
 						<a href="{{.Verification.SigningUser.HomeLink}}"><strong>{{.Verification.SigningUser.Name}}</strong></a>
 						<span class="pull-right"><span class="ui text">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span> {{.Verification.SigningKey.KeyID}}</span>
 					{{else}}
 						<span title="{{.i18n.Tr "gpg.default_key"}}">{{svg "gitea-lock-cog"}}</span>
 						<span class="ui text">{{.i18n.Tr "repo.commits.signed_by"}}:</span>
-						<img class="ui avatar image" src="{{AvatarLink .Verification.SigningEmail}}" />
+						{{avatarByEmail .Verification.SigningEmail ""}}
 						<strong>{{.Verification.SigningUser.Name}}</strong>
 						<span class="pull-right"><span class="ui text">{{.i18n.Tr "repo.commits.gpg_key_id"}}:</span> <i class="cogs icon" title="{{.i18n.Tr "gpg.default_key"}}"></i>{{.Verification.SigningKey.KeyID}}</span>
 					{{end}}

templates/repo/commits_list.tmpl

@@ -18,9 +18,10 @@
 								{{if .User.FullName}}
 									{{$userName = .User.FullName}}
 								{{end}}
-								<img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/>&nbsp;&nbsp;<a href="{{AppSubUrl}}/{{.User.Name}}">{{$userName}}</a>
+								{{avatar .User 28 "mr-2"}}<a href="{{AppSubUrl}}/{{.User.Name}}">{{$userName}}</a>
 							{{else}}
-								<img class="ui avatar image" src="{{AvatarLink .Author.Email}}" alt=""/>&nbsp;&nbsp;{{$userName}}
+								{{avatarByEmail .Author.Email .Author.Name 28 "mr-2"}}
+								{{$userName}}
 							{{end}}
 						</td>
 						<td class="sha">

templates/repo/commits_list_small.tmpl

@@ -7,9 +7,11 @@
 	<div class="singular-commit" id="{{$tag}}">
 		<span class="badge badge-commit">{{svg "octicon-git-commit"}}</span>
 		{{if .User}}
-			<a class="ui avatar image" href="{{AppSubUrl}}/{{.User.Name}}"><img src="{{.User.RelAvatarLink}}" alt=""/></a>
+			<a href="{{AppSubUrl}}/{{.User.Name}}">
+				{{avatar .User}}
+			</a>
 		{{else}}
-			<img class="ui avatar image" src="{{AvatarLink .Author.Email}}" alt=""/>
+			{{avatarByEmail .Author.Email .Author.Name}}
 		{{end}}
 
 		<span class="ui float right shabox">

templates/repo/create.tmpl

@@ -14,18 +14,18 @@
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
 							<span class="text" title="{{.ContextUser.Name}}">
-								<img class="ui mini image" src="{{.ContextUser.RelAvatarLink}}">
+								{{avatar .ContextUser 28 "mini"}}
 								{{.ContextUser.ShortName 20}}
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu">
 								<div class="item" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
-									<img class="ui mini image" src="{{.SignedUser.RelAvatarLink}}">
+									{{avatar .SignedUser 28 "mini"}}
 									{{.SignedUser.ShortName 20}}
 								</div>
 								{{range .Orgs}}
 									<div class="item" data-value="{{.ID}}" title="{{.Name}}">
-										<img class="ui mini image" src="{{.RelAvatarLink}}">
+										{{avatar . 28 "mini"}}
 										{{.ShortName 20}}
 									</div>
 								{{end}}

templates/repo/diff/comments.tmpl

@@ -6,7 +6,7 @@
 		<span class="avatar"><img src="/img/avatar_default.png"></span>
 	{{else}}
 		<a class="avatar" {{if gt .Poster.ID 0}}href="{{.Poster.HomeLink}}"{{end}}>
-			<img src="{{.Poster.RelAvatarLink}}">
+			{{avatar .Poster}}
 		</a>
 	{{end}}
 	<div class="content comment-container">

templates/repo/editor/commit_form.tmpl

@@ -1,5 +1,5 @@
 <div class="commit-form-wrapper">
-	<img width="48" height="48" class="ui image commit-avatar" src="{{.SignedUser.RelAvatarLink}}">
+	{{avatar .SignedUser 48 "commit-avatar"}}
 	<div class="commit-form">
 		<h3>{{- if .CanCommitToBranch.WillSign}}
 			<span title="{{.i18n.Tr "repo.signing.will_sign" .CanCommitToBranch.SigningKey}}">{{svg "octicon-lock" 24}}</span>

templates/repo/forks.tmpl

@@ -8,7 +8,7 @@
 		<div class="ui list">
 			{{range .Forks}}
 				<div class="item">
-					<img class="ui avatar image" src="{{.Owner.RelAvatarLink}}">
+					{{avatar .Owner}}
 					<div class="link">
 						<a href="{{AppSubUrl}}/{{.Owner.Name}}">{{.Owner.Name}}</a>
 						/

templates/repo/graph/commits.tmpl

@@ -67,9 +67,11 @@
 							{{if $commit.User.FullName}}
 								{{$userName = $commit.User.FullName}}
 							{{end}}
-							<img class="ui avatar image" src="{{$commit.User.RelAvatarLink}}" alt=""/><a href="{{AppSubUrl}}/{{$commit.User.Name}}">{{$userName}}</a>
+							{{avatar $commit.User}}
+							<a href="{{AppSubUrl}}/{{$commit.User}}">{{$userName}}</a>
 						{{else}}
-							<img class="ui avatar image" src="{{AvatarLink $commit.Commit.Author.Email}}" alt=""/>{{$userName}}
+							{{avatarByEmail $commit.Commit.Author.Email $userName}}
+							{{$userName}}
 						{{end}}
 					</span>
 					<span class="time df ac">{{$commit.Date}}</span>

templates/repo/header.tmpl

@@ -3,8 +3,8 @@
 	<div class="ui container">
 		<div class="repo-header">
 			<div class="ui huge breadcrumb repo-title">
-				{{if .RelAvatarLink}}
-					<img class="ui avatar image" src="{{.RelAvatarLink}}">
+				{{if .Name}}
+					{{avatar .}}
 				{{else}}
 					{{template "repo/header_icon" .}}
 				{{end}}

templates/repo/header_icon.tmpl

@@ -7,7 +7,7 @@
 		{{else if and (not $.IsMirror) (not $.IsFork) ($.Owner)}}
 			{{svg "octicon-repo" 32}}
 			{{if $.Owner.Visibility.IsPrivate}}
-				<img class="ui avatar image" src="{{$.Owner.RelAvatarLink}}">
+				{{avatar $.Owner}}
 			{{end}}
 		{{else if $.IsMirror}}
 			{{svg "octicon-mirror" 32}}

templates/repo/issue/list.tmpl

@@ -70,7 +70,9 @@
 						<div class="menu">
 							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}">{{.i18n.Tr "repo.issues.filter_assginee_no_select"}}</a>
 							{{range .Assignees}}
-								<a class="{{if eq $.AssigneeID .ID}}active selected{{end}} item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{.ID}}"><img src="{{.RelAvatarLink}}"> {{.GetDisplayName}}</a>
+								<a class="{{if eq $.AssigneeID .ID}}active selected{{end}} item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{.ID}}">
+									{{avatar .}}
+								</a>
 							{{end}}
 						</div>
 					</div>
@@ -173,7 +175,7 @@
 							</div>
 							{{range .Assignees}}
 								<div class="item issue-action" data-element-id="{{.ID}}" data-url="{{$.RepoLink}}/issues/assignee">
-									<img src="{{.RelAvatarLink}}"> {{.GetDisplayName}}
+									{{avatar .}}
 								</div>
 							{{end}}
 						</div>

templates/repo/issue/milestone_issues.tmpl

@@ -68,7 +68,10 @@
 						<div class="menu">
 							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}">{{.i18n.Tr "repo.issues.filter_assginee_no_select"}}</a>
 							{{range .Assignees}}
-								<a class="{{if eq $.AssigneeID .ID}}active selected{{end}} item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&assignee={{.ID}}"><img src="{{.RelAvatarLink}}"> {{.GetDisplayName}}</a>
+								<a class="{{if eq $.AssigneeID .ID}}active selected{{end}} item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&assignee={{.ID}}">
+									{{avatar . 28 "mr-2"}}
+									{{.GetDisplayName}}
+								</a>
 							{{end}}
 						</div>
 					</div>
@@ -151,7 +154,8 @@
 							</div>
 							{{range .Assignees}}
 								<div class="item issue-action" data-element-id="{{.ID}}" data-url="{{$.RepoLink}}/issues/assignee">
-									<img src="{{.RelAvatarLink}}"> {{.GetDisplayName}}
+									{{avatar . 28 "mr-2"}}
+									{{.GetDisplayName}}
 								</div>
 							{{end}}
 						</div>

templates/repo/issue/new_form.tmpl

@@ -9,7 +9,7 @@
 		<div class="ui comments">
 			<div class="comment">
 				<a class="avatar" href="{{.SignedUser.HomeLink}}">
-					<img src="{{.SignedUser.RelAvatarLink}}">
+					{{avatar .SignedUser}}
 				</a>
 				<div class="ui segment content">
 					<div class="field">
@@ -219,7 +219,7 @@
 							<a class="item muted" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}">
 								<span class="octicon-check invisible">{{svg "octicon-check"}}</span>
 								<span class="text">
-									<img class="ui avatar image" src="{{.RelAvatarLink}}"> {{.GetDisplayName}}
+									{{avatar . 28 "mr-3"}}{{.GetDisplayName}}
 								</span>
 							</a>
 						{{end}}
@@ -231,7 +231,7 @@
 					</span>
 					{{range .Assignees}}
 						<a class="hide item p-2 muted" id="assignee_{{.ID}}" href="{{$.RepoLink}}/issues?assignee={{.ID}}">
-							<img class="ui avatar image" src="{{.RelAvatarLink}}" style="vertical-align: middle;">&nbsp;{{.GetDisplayName}}
+							{{avatar . 28 "mr-3 vm"}}{{.GetDisplayName}}
 						</a>
 					{{end}}
 				</div>

templates/repo/issue/view_content.tmpl

@@ -16,7 +16,7 @@
 				<span class="timeline-avatar"><img src="/img/avatar_default.png"></span>
 			{{else}}
 				<a class="timeline-avatar" {{if gt .Issue.Poster.ID 0}}href="{{.Issue.Poster.HomeLink}}"{{end}}>
-					<img src="{{.Issue.Poster.RelAvatarLink}}">
+					{{avatar .Issue.Poster}}
 				</a>
 			{{end}}
 				<div class="content comment-container">
@@ -93,7 +93,7 @@
 				{{ if and (or .IsRepoAdmin .HasIssuesOrPullsWritePermission (not .Issue.IsLocked)) (not .Repository.IsArchived) }}
 				<div class="timeline-item comment form">
 					<a class="timeline-avatar" href="{{.SignedUser.HomeLink}}">
-						<img src="{{.SignedUser.RelAvatarLink}}">
+						{{avatar .SignedUser}}
 					</a>
 					<div class="content">
 						<form class="ui segment form" id="comment-form" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/comments" method="post">
@@ -144,7 +144,7 @@
 					{{if .Repository.IsArchived}}
 					<div class="timeline-item comment form">
 						<a class="timeline-avatar" href="{{.SignedUser.HomeLink}}">
-							<img src="{{.SignedUser.RelAvatarLink}}">
+							{{avatar .SignedUser}}
 						</a>
 						<div class="content">
 							<form class="ui segment form" id="comment-form" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/comments" method="post">

templates/repo/issue/view_content/comments.tmpl

@@ -15,7 +15,7 @@
 			<span class="timeline-avatar"><img src="/img/avatar_default.png"></span>
 		{{else}}
 			<a class="timeline-avatar" {{if gt .Poster.ID 0}}href="{{.Poster.HomeLink}}"{{end}}>
-				<img src="{{.Poster.RelAvatarLink}}">
+				{{avatar .Poster}}
 			</a>
 		{{end}}
 			<div class="content comment-container">
@@ -92,8 +92,8 @@
 	{{else if eq .Type 1}}
 		<div class="timeline-item event" id="{{.HashTag}}">
 			<span class="badge bg-green text-white">{{svg "octicon-dot-fill"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			<span class="text grey">
 				<a class="author" href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
@@ -107,8 +107,8 @@
 	{{else if eq .Type 2}}
 		<div class="timeline-item event" id="{{.HashTag}}">
 			<span class="badge bg-red text-white">{{svg "octicon-circle-slash"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			<span class="text grey">
 				<a class="author" href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
@@ -122,8 +122,8 @@
 	{{else if eq .Type 28}}
 		<div class="timeline-item event" id="{{.HashTag}}">
 			<span class="badge bg-purple text-white">{{svg "octicon-git-merge"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			<span class="text grey">
 				<a class="author" href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
@@ -147,8 +147,8 @@
 		{{ $createdStr:= TimeSinceUnix .CreatedUnix $.Lang }}
 		<div class="timeline-item event" id="{{.HashTag}}">
 			<span class="badge">{{svg "octicon-bookmark"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			{{if eq .RefAction 3}}<del>{{end}}
 			<span class="text grey">
@@ -164,8 +164,8 @@
 	{{else if eq .Type 4}}
 		<div class="timeline-item event" id="{{.HashTag}}">
 			<span class="badge">{{svg "octicon-bookmark"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			<span class="text grey">
 				<a class="author" href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
@@ -180,8 +180,8 @@
 		{{if or .AddedLabels .RemovedLabels}}
 			<div class="timeline-item event" id="{{.HashTag}}">
 				<span class="badge">{{svg "octicon-tag"}}</span>
-				<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-					<img src="{{.Poster.RelAvatarLink}}">
+				<a href="{{.Poster.HomeLink}}">
+					{{avatar .Poster}}
 				</a>
 				<span class="text grey">
 					<a class="author" href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
@@ -198,8 +198,8 @@
 	{{else if eq .Type 8}}
 		<div class="timeline-item event" id="{{.HashTag}}">
 			<span class="badge">{{svg "octicon-milestone"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			<span class="text grey">
 				<a class="author" href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
@@ -211,8 +211,8 @@
 			<span class="badge">{{svg "octicon-person"}}</span>
 			{{if gt .AssigneeID 0}}
 				{{if .RemovedAssignee}}
-					<a class="ui avatar image" href="{{.Assignee.HomeLink}}">
-						<img src="{{.Assignee.RelAvatarLink}}">
+					<a href="{{.Assignee.HomeLink}}">
+						{{avatar .Assignee}}
 					</a>
 					<span class="text grey">
 						<a class="author" href="{{.Assignee.HomeLink}}">{{.Assignee.GetDisplayName}}</a>
@@ -223,8 +223,8 @@
 						{{ end }}
 					</span>
 				{{else}}
-					<a class="ui avatar image" href="{{.Assignee.HomeLink}}">
-						<img src="{{.Assignee.RelAvatarLink}}">
+					<a href="{{.Assignee.HomeLink}}">
+						{{avatar .Assignee}}
 					</a>
 					<span class="text grey">
 						<a class="author" href="{{.Assignee.HomeLink}}">{{.Assignee.GetDisplayName}}</a>
@@ -240,8 +240,8 @@
 	{{else if eq .Type 10}}
 		<div class="timeline-item event" id="{{.HashTag}}">
 			<span class="badge">{{svg "octicon-pencil"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			<span class="text grey">
 				<a class="author" href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
@@ -251,8 +251,8 @@
 	{{else if eq .Type 11}}
 		<div class="timeline-item event" id="{{.HashTag}}">
 			<span class="badge">{{svg "octicon-git-branch"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			<span class="text grey">
 				<a class="author" href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
@@ -262,8 +262,8 @@
 	{{else if eq .Type 12}}
 		<div class="timeline-item event" id="{{.HashTag}}">
 			<span class="badge">{{svg "octicon-clock"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			<span class="text grey">
 				<a class="author" href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
@@ -273,8 +273,8 @@
 	{{else if eq .Type 13}}
 		<div class="timeline-item event" id="{{.HashTag}}">
 			<span class="badge">{{svg "octicon-clock"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			<span class="text grey">
 				<a class="author" href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
@@ -288,8 +288,8 @@
 	{{else if eq .Type 14}}
 		<div class="timeline-item event" id="{{.HashTag}}">
 			<span class="badge">{{svg "octicon-clock"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			<span class="text grey">
 				<a class="author" href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
@@ -303,8 +303,8 @@
 	{{else if eq .Type 15}}
 		<div class="timeline-item event" id="{{.HashTag}}">
 			<span class="badge">{{svg "octicon-clock"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			<span class="text grey">
 				<a class="author" href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
@@ -314,8 +314,8 @@
 	{{else if eq .Type 16}}
 		<div class="timeline-item event" id="{{.HashTag}}">
 			<span class="badge">{{svg "octicon-clock"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			<span class="text grey">
 				<a class="author" href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
@@ -325,8 +325,8 @@
 	{{else if eq .Type 17}}
 		<div class="timeline-item event" id="{{.HashTag}}">
 			<span class="badge">{{svg "octicon-clock"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			<span class="text grey">
 				<a class="author" href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
@@ -336,8 +336,8 @@
 	{{else if eq .Type 18}}
 		<div class="timeline-item event" id="{{.HashTag}}">
 			<span class="badge">{{svg "octicon-clock"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			<span class="text grey">
 				<a class="author" href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
@@ -347,8 +347,8 @@
 	{{else if eq .Type 19}}
 		<div class="timeline-item event" id="{{.HashTag}}">
 			<span class="badge">{{svg "octicon-package-dependents"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			<span class="text grey">
 				<a class="author" href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
@@ -372,8 +372,8 @@
 	{{else if eq .Type 20}}
 		<div class="timeline-item event" id="{{.HashTag}}">
 			<span class="badge">{{svg "octicon-package-dependents"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			<span class="text grey">
 				<a class="author" href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
@@ -400,7 +400,7 @@
 				{{if .OriginalAuthor }}
 				{{else}}
 				<a class="timeline-avatar"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
-					<img src="{{.Poster.RelAvatarLink}}">
+					{{avatar .Poster}}
 				</a>
 				{{end}}
 				<span class="badge {{if eq .Review.Type 1}}bg-green
@@ -509,7 +509,7 @@
 											<div class="comment code-comment" id="{{.HashTag}}">
 												{{if not .OriginalAuthor }}
 													<a class="avatar">
-														<img src="{{.Poster.RelAvatarLink}}">
+														{{avatar .Poster}}
 													</a>
 												{{end}}
 												<div class="content">
@@ -560,8 +560,8 @@
 	{{else if eq .Type 23}}
 		<div class="timeline-item event" id="{{.HashTag}}">
 			<span class="badge">{{svg "octicon-lock"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			{{ if .Content }}
 				<span class="text grey">
@@ -578,8 +578,8 @@
 	{{else if eq .Type 24}}
 		<div class="timeline-item event" id="{{.HashTag}}">
 			<span class="badge">{{svg "octicon-key"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			<span class="text grey">
 				<a class="author" href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
@@ -589,8 +589,8 @@
 	{{else if eq .Type 25}}
 		<div class="timeline-item event">
 			<span class="badge">{{svg "octicon-git-branch"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			<span class="text grey">
 				<a href="{{.Poster.HomeLink}}">{{.Poster.Name}}</a>
@@ -600,8 +600,8 @@
 	{{else if eq .Type 26}}
 		<div class="timeline-item event" id="{{.HashTag}}">
 			<span class="badge">{{svg "octicon-clock"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			<span class="text grey">
 				<a class="author" href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
@@ -615,8 +615,8 @@
 	{{else if eq .Type 27}}
 		<div class="timeline-item event" id="{{.HashTag}}">
 			<span class="badge">{{svg "octicon-eye"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			<span class="text grey">
 				<a class="author" href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>
@@ -658,8 +658,8 @@
 		{{if not $.UnitProjectsGlobalDisabled}}
 		<div class="timeline-item event" id="{{.HashTag}}">
 			<span class="badge">{{svg "octicon-project"}}</span>
-			<a class="ui avatar image" href="{{.Poster.HomeLink}}">
-				<img src="{{.Poster.RelAvatarLink}}">
+			<a href="{{.Poster.HomeLink}}">
+				{{avatar .Poster}}
 			</a>
 			<span class="text grey">
 				<a class="author" href="{{.Poster.HomeLink}}">{{.Poster.GetDisplayName}}</a>

templates/repo/issue/view_content/pull.tmpl

@@ -9,8 +9,8 @@
 					<div class="review-item">
 						<div class="review-item-left">
 							{{if .User}}
-								<a class="ui avatar image" href="{{.User.HomeLink}}">
-									<img src="{{.User.RelAvatarLink}}">
+								<a href="{{.User.HomeLink}}">
+									{{avatar .User}}
 								</a>
 							{{end}}
 							<span class="text grey">

templates/repo/issue/view_content/sidebar.tmpl

@@ -26,7 +26,7 @@
 							<a class="{{if not .CanChange}}ui poping up{{end}} item {{if .Checked}} checked {{end}} {{if not .CanChange}}ban-change{{end}}" href="#" data-id="{{.ItemID}}" data-id-selector="#review_request_{{.ItemID}}" {{if not .CanChange}} data-content="{{$.i18n.Tr "repo.issues.remove_request_review_block"}}"{{end}}>
 								<span class="octicon-check {{if not .Checked}}invisible{{end}}">{{svg "octicon-check"}}</span>
 								<span class="text">
-									<img class="ui avatar image mr-2" loading="lazy" src="{{.User.RelAvatarLink}}">
+									{{avatar .User 28 "mr-3"}}
 									{{.User.GetDisplayName}}
 								</span>
 							</a>
@@ -56,7 +56,7 @@
 					<div class="item mb-2">
 						{{if .User}}
 							<a class="muted sidebar-item-link" href="{{.User.HomeLink}}">
-								<img class="ui avatar image mr-3" src="{{.User.RelAvatarLink}}">
+								{{avatar .User 28 "mr-3"}}
 								{{.User.GetDisplayName}}
 							</a>
 						{{else if .Team}}
@@ -267,7 +267,7 @@
 						{{end}}
 						<span class="octicon-check {{if not $checked}}invisible{{end}}">{{svg "octicon-check"}}</span>
 						<span class="text">
-							<img class="ui avatar image mr-2" loading="lazy" src="{{.RelAvatarLink}}">
+							{{avatar . 28 "mr-3"}}
 							{{.GetDisplayName}}
 						</span>
 					</a>
@@ -280,7 +280,7 @@
 				{{range .Issue.Assignees}}
 					<div class="item">
 						<a class="muted sidebar-item-link" href="{{$.RepoLink}}/{{if $.Issue.IsPull}}pulls{{else}}issues{{end}}?assignee={{.ID}}">
-							<img class="ui avatar image mr-3" src="{{.RelAvatarLink}}">
+							{{avatar . 28 "mr-3"}}
 							{{.GetDisplayName}}
 						</a>
 					</div>
@@ -295,7 +295,9 @@
 			<div>
 				{{range .Participants}}
 					<a {{if gt .ID 0}}href="{{.HomeLink}}"{{end}}>
-						<img class="ui avatar image poping up" src="{{.RelAvatarLink}}" data-content="{{.GetDisplayName}}" data-position="top center" data-variation="small inverted">
+						<div class="ui poping up" data-content="{{.GetDisplayName}}" data-position="top center" data-variation="small inverted">
+							{{avatar .}}
+						</div>
 					</a>
 				{{end}}
 			</div>
@@ -376,7 +378,7 @@
 						{{range $user, $trackedtime := .WorkingUsers}}
 							<div class="comment">
 								<a class="avatar">
-									<img src="{{$user.RelAvatarLink}}">
+									{{avatar $user}}
 								</a>
 								<div class="content">
 									<a class="author">{{$user.DisplayName}}</a>

templates/repo/migrate/git.tmpl

@@ -48,18 +48,18 @@
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
 							<span class="text" title="{{.ContextUser.Name}}">
-								<img class="ui mini image" src="{{.ContextUser.RelAvatarLink}}">
+								{{avatar .ContextUser}}
 								{{.ContextUser.ShortName 20}}
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu" title="{{.SignedUser.Name}}">
 								<div class="item" data-value="{{.SignedUser.ID}}">
-									<img class="ui mini image" src="{{.SignedUser.RelAvatarLink}}">
+									{{avatar .SignedUser}}
 									{{.SignedUser.ShortName 20}}
 								</div>
 								{{range .Orgs}}
 									<div class="item" data-value="{{.ID}}" title="{{.Name}}">
-										<img class="ui mini image" src="{{.RelAvatarLink}}">
+										{{avatar .}}
 										{{.ShortName 20}}
 									</div>
 								{{end}}

templates/repo/migrate/gitea.tmpl

@@ -82,18 +82,18 @@
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
 							<span class="text" title="{{.ContextUser.Name}}">
-								<img class="ui mini image" src="{{.ContextUser.RelAvatarLink}}">
+								{{avatar .ContextUser}}
 								{{.ContextUser.ShortName 20}}
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu" title="{{.SignedUser.Name}}">
 								<div class="item" data-value="{{.SignedUser.ID}}">
-									<img class="ui mini image" src="{{.SignedUser.RelAvatarLink}}">
+									{{avatar .SignedUser}}
 									{{.SignedUser.ShortName 20}}
 								</div>
 								{{range .Orgs}}
 								<div class="item" data-value="{{.ID}}" title="{{.Name}}">
-									<img class="ui mini image" src="{{.RelAvatarLink}}">
+									{{avatar .}}
 									{{.ShortName 20}}
 								</div>
 								{{end}}

templates/repo/migrate/github.tmpl

@@ -82,18 +82,18 @@
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
 							<span class="text" title="{{.ContextUser.Name}}">
-								<img class="ui mini image" src="{{.ContextUser.RelAvatarLink}}">
+								{{avatar .ContextUser 28 "mini"}}
 								{{.ContextUser.ShortName 20}}
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu" title="{{.SignedUser.Name}}">
 								<div class="item" data-value="{{.SignedUser.ID}}">
-									<img class="ui mini image" src="{{.SignedUser.RelAvatarLink}}">
+									{{avatar .SignedUser 28 "mini"}}
 									{{.SignedUser.ShortName 20}}
 								</div>
 								{{range .Orgs}}
 									<div class="item" data-value="{{.ID}}" title="{{.Name}}">
-										<img class="ui mini image" src="{{.RelAvatarLink}}">
+										{{avatar . 28 "mini"}}
 										{{.ShortName 20}}
 									</div>
 								{{end}}

templates/repo/migrate/gitlab.tmpl

@@ -82,18 +82,18 @@
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
 							<span class="text" title="{{.ContextUser.Name}}">
-								<img class="ui mini image" src="{{.ContextUser.RelAvatarLink}}">
+								{{avatar .ContextUser 28 "mini"}}
 								{{.ContextUser.ShortName 20}}
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu" title="{{.SignedUser.Name}}">
 								<div class="item" data-value="{{.SignedUser.ID}}">
-									<img class="ui mini image" src="{{.SignedUser.RelAvatarLink}}">
+									{{avatar .SignedUser 28 "mini"}}
 									{{.SignedUser.ShortName 20}}
 								</div>
 								{{range .Orgs}}
 									<div class="item" data-value="{{.ID}}" title="{{.Name}}">
-										<img class="ui mini image" src="{{.RelAvatarLink}}">
+										{{avatar . 28 "mini"}}
 										{{.ShortName 20}}
 									</div>
 								{{end}}

templates/repo/projects/view.tmpl

@@ -78,7 +78,6 @@
 					{{if and $.CanWriteProjects (not $.Repository.IsArchived) $.PageIsProjects (ne .ID 0)}}
 						<div class="ui dropdown jump item poping up right" data-variation="tiny inverted">
 							<span class="ui text">
-								<img class="ui tiny avatar image" width="24" height="24">
 								<span class="fitted not-mobile" tabindex="-1">{{svg "octicon-kebab-horizontal" 24}}</span>
 							</span>
 							<div class="menu user-menu" tabindex="-1">

templates/repo/pulls/fork.tmpl

@@ -14,20 +14,20 @@
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
 							<span class="text" title="{{.ContextUser.Name}}">
-								<img class="ui mini image" src="{{.ContextUser.RelAvatarLink}}">
+								{{avatar .ContextUser 28 "mini"}}
 								{{.ContextUser.ShortName 20}}
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu">
 								{{if .CanForkToUser}}
 									<div class="item" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
-										<img class="ui mini image" src="{{.SignedUser.RelAvatarLink}}">
+										{{avatar .SignedUser 28 "mini"}}
 										{{.SignedUser.ShortName 20}}
 									</div>
 								{{end}}
 								{{range .Orgs}}
 									<div class="item" data-value="{{.ID}}" title="{{.Name}}">
-										<img class="ui mini image" src="{{.RelAvatarLink}}">
+										{{avatar . 28 "mini"}}
 										{{.ShortName 20}}
 									</div>
 								{{end}}

templates/repo/release/list.tmpl

@@ -90,7 +90,7 @@
 							<p class="text grey">
 								{{ if gt .Publisher.ID 0 }}
 								<span class="author">
-									<img class="img-10" src="{{.Publisher.RelAvatarLink}}">
+									{{avatar .Publisher 28 "img-10"}}
 									<a href="{{AppSubUrl}}/{{.Publisher.Name}}">{{.Publisher.Name}}</a>
 								</span>
 								{{ end }}
@@ -117,7 +117,7 @@
 								{{if .OriginalAuthor}}
 									{{svg "octicon-mark-github" 16 "mr-2"}}{{.OriginalAuthor}}
 								{{else if .Publisher}}
-									<img class="img-10" src="{{.Publisher.RelAvatarLink}}">
+									{{avatar .Publisher 28 "img-10"}}
 									<a href="{{AppSubUrl}}/{{.Publisher.Name}}">{{.Publisher.GetDisplayName}}</a>
 								{{else}}
 									Ghost

templates/repo/settings/collaboration.tmpl

@@ -13,7 +13,7 @@
 				<div class="item ui grid">
 					<div class="ui five wide column">
 						<a href="{{AppSubUrl}}/{{.Name}}">
-							<img class="ui avatar image" src="{{.RelAvatarLink}}">
+							{{avatar .}}
 							{{.DisplayName}}
 						</a>
 					</div>

templates/repo/settings/lfs_locks.tmpl

@@ -35,7 +35,7 @@
 							</td>
 							<td>
 								<a href="{{AppSubUrl}}/{{$lock.Owner.Name}}">
-									<img class="ui avatar image" src="{{$lock.Owner.RelAvatarLink}}">
+									{{avatar $lock.Owner}}
 									{{$lock.Owner.DisplayName}}
 								</a>
 							</td>

templates/repo/settings/protected_branch.tmpl

@@ -48,7 +48,7 @@
 								<div class="menu">
 									{{range .Users}}
 										<div class="item" data-value="{{.ID}}">
-											<img class="ui mini image" src="{{.RelAvatarLink}}">
+											{{avatar . 28 "mini"}}
 											{{.GetDisplayName}}
 										</div>
 									{{end}}
@@ -98,7 +98,7 @@
 								<div class="menu">
 								{{range .Users}}
 									<div class="item" data-value="{{.ID}}">
-										<img class="ui mini image" src="{{.RelAvatarLink}}">
+										{{avatar . 28 "mini"}}
 									{{.GetDisplayName}}
 									</div>
 								{{end}}
@@ -178,7 +178,7 @@
 								<div class="menu">
 								{{range .Users}}
 									<div class="item" data-value="{{.ID}}">
-										<img class="ui mini image" src="{{.RelAvatarLink}}">
+										{{avatar . 28 "mini"}}
 									{{.GetDisplayName}}
 									</div>
 								{{end}}

templates/repo/shabox_badge.tmpl

@@ -3,10 +3,10 @@
 		<div title="{{if eq .verification.TrustStatus "trusted"}}{{else if eq .verification.TrustStatus "untrusted"}}{{$.root.i18n.Tr "repo.commits.signed_by_untrusted_user"}}: {{else}}{{$.root.i18n.Tr "repo.commits.signed_by_untrusted_user_unmatched"}}: {{end}}{{.verification.Reason}}">
 		{{if ne .verification.SigningUser.ID 0}}
 			{{svg "gitea-lock"}}
-			<img class="ui signature avatar image" src="{{.verification.SigningUser.RelAvatarLink}}" />
+			{{avatar .verification.SigningUser "signature"}}
 		{{else}}
 			<span title="{{$.root.i18n.Tr "gpg.default_key"}}">{{svg "gitea-lock-cog"}}</span>
-			<img class="ui signature avatar image" src="{{AvatarLink .verification.SigningEmail}}" />
+			{{avatarByEmail .verification.SigningEmail "" 28 "signature"}}
 		{{end}}
 		</div>
 	{{else}}

templates/repo/user_cards.tmpl

@@ -8,7 +8,7 @@
 		{{range .Cards}}
 			<li class="item ui segment">
 				<a href="{{.HomeLink}}">
-					<img class="avatar" src="{{.RelAvatarLink}}"/>
+					{{avatar .}}
 				</a>
 				<h3 class="name"><a href="{{.HomeLink}}">{{.DisplayName}}</a></h3>
 

templates/repo/view_list.tmpl

@@ -3,7 +3,7 @@
 		<tr class="commit-list">
 			<th colspan="2">
 				{{if .LatestCommitUser}}
-					<img class="ui avatar image img-12" src="{{.LatestCommitUser.RelAvatarLink}}" />
+					{{avatar .LatestCommitUser 28 "img-12"}}
 					{{if .LatestCommitUser.FullName}}
 						<a href="{{AppSubUrl}}/{{.LatestCommitUser.Name}}"><strong>{{.LatestCommitUser.FullName}}</strong></a>
 					{{else}}
@@ -11,7 +11,7 @@
 					{{end}}
 				{{else}}
 					{{if .LatestCommit.Author}}
-						<img class="ui avatar image img-12" src="{{AvatarLink .LatestCommit.Author.Email}}" />
+						{{avatarByEmail .LatestCommit.Author.Email .LatestCommit.Author.Name 28 "img-12"}}
 						<strong>{{.LatestCommit.Author.Name}}</strong>
 					{{end}}
 				{{end}}

templates/shared/issuelist.tmpl

@@ -121,7 +121,7 @@
 				<div class="issue-item-icon-right text grey">
 					{{range .Assignees}}
 						<a class="ui assignee poping up" href="{{.HomeLink}}" data-content="{{.GetDisplayName}}" data-variation="inverted" data-position="left center">
-							<img class="ui avatar image" src="{{.RelAvatarLink}}">
+							{{avatar .}}
 						</a>
 					{{end}}
 				</div>

templates/user/dashboard/feeds.tmpl

@@ -1,7 +1,7 @@
 {{range .Feeds}}
 	<div class="news">
 		<div class="ui left">
-			<img class="ui avatar image" src="{{.GetActAvatar}}" alt="">
+			{{avatar .ActUser}}
 		</div>
 		<div class="ui grid">
 			<div class="ui fourteen wide column">
@@ -84,7 +84,13 @@
 								{{if $push.Commits}}
 									{{range $push.Commits}}
 										{{ $commitLink := printf "%s/commit/%s" $repoLink .Sha1}}
-										<li><img class="img-8" src="{{$push.AvatarLink .AuthorEmail}}"> <a class="commit-id" href="{{$commitLink}}">{{ShortSha .Sha1}}</a> <span class="text truncate light grey">{{RenderCommitMessage .Message $repoLink $.ComposeMetas}}</span></li>
+										<li>
+											{{avatarByEmail .AuthorEmail .AuthorName 28 "img-8 mr-2"}}
+											<a class="commit-id mr-2" href="{{$commitLink}}">{{ShortSha .Sha1}}</a>
+											<span class="text truncate light grey">
+												{{RenderCommitMessage .Message $repoLink $.ComposeMetas}}
+											</span>
+										</li>
 									{{end}}
 								{{end}}
 								{{if and (gt $push.Len 1) $push.CompareURL}}<li><a href="{{AppSubUrl}}/{{$push.CompareURL}}">{{$.i18n.Tr "action.compare_commits" $push.Len}} »</a></li>{{end}}

templates/user/dashboard/navbar.tmpl

@@ -3,7 +3,7 @@
 		<div class="item">
 			<div class="ui floating dropdown link jump">
 				<span class="text">
-					<img class="ui avatar image" src="{{.ContextUser.RelAvatarLink}}" title="{{.ContextUser.Name}}" width="28" height="28">
+					{{avatar .ContextUser}}
 					{{.ContextUser.ShortName 20}}
 					{{if .ContextUser.IsOrganization}}
 						<span class="org-visibility">
@@ -19,12 +19,11 @@
 					</div>
 					<div class="scrolling menu items">
 						<a class="{{if eq .ContextUser.ID .SignedUser.ID}}active selected{{end}} item" href="{{AppSubUrl}}/{{if .PageIsIssues}}issues{{else if .PageIsPulls}}pulls{{else if .PageIsMilestonesDashboard}}milestones{{end}}">
-							<img class="ui avatar image" src="{{.SignedUser.RelAvatarLink}}" width="28" height="28">
-							{{.SignedUser.Name}}
+							{{avatar .SignedUser}}
 						</a>
 						{{range .Orgs}}
 							<a class="{{if eq $.ContextUser.ID .ID}}active selected{{end}} item" title="{{.Name}}" href="{{AppSubUrl}}/org/{{.Name}}/{{if $.PageIsIssues}}issues{{else if $.PageIsPulls}}pulls{{else if $.PageIsMilestonesDashboard}}milestones{{else}}dashboard{{end}}">
-								<img class="ui avatar image" src="{{.RelAvatarLink}}" width="28" height="28">
+								{{avatar .}}
 								{{.ShortName 20}}
 								<span class="org-visibility">
 									{{if .Visibility.IsLimited}}<div class="ui orange tiny horizontal label">{{$.i18n.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}

templates/user/profile.tmpl

@@ -6,19 +6,19 @@
 				<div class="ui card">
 					{{if eq .SignedUserName .Owner.Name}}
 						<a class="image poping up" href="{{AppSubUrl}}/user/settings" id="profile-avatar" data-content="{{.i18n.Tr "user.change_avatar"}}" data-variation="inverted tiny" data-position="bottom center">
-							<img src="{{.Owner.SizedRelAvatarLink 290}}" title="{{.Owner.Name}}" height="290" width="290"/>
+							{{avatar .Owner 290}}
 						</a>
 					{{else}}
-						<span class="image">
-							<img src="{{.Owner.SizedRelAvatarLink 290}}" title="{{.Owner.Name}}" height="290" width="290"/>
+						<span class="image" id="profile-avatar">
+							{{avatar .Owner 290}}
 						</span>
 					{{end}}
-					<div class="content word-break">
+					<div class="content word-break profile-avatar-name">
 						{{if .Owner.FullName}}<span class="header text center">{{.Owner.FullName}}</span>{{end}}
 						<span class="username text center">{{.Owner.Name}}</span>
 					</div>
 					<div class="extra content word-break">
-						<ul class="text black">
+						<ul>
 							{{if .Owner.Location}}
 								<li>{{svg "octicon-location"}} {{.Owner.Location}}</li>
 							{{end}}
@@ -54,7 +54,9 @@
 								{{range .Orgs}}
 									{{if (or .Visibility.IsPublic (and ($.SignedUser) (or .Visibility.IsLimited (and (.HasMemberWithUserID $.SignedUserID) .Visibility.IsPrivate) ($.IsAdmin))))}}
 									<li>
-										<a href="{{.HomeLink}}"><img class="ui image poping up" src="{{.RelAvatarLink}}" data-content="{{.Name}}" data-position="top center" data-variation="tiny inverted"></a>
+										<a class="poping up" href="{{.HomeLink}}" data-content="{{.Name}}" data-position="top center" data-variation="tiny inverted">
+											{{avatar .}}
+										</a>
 									</li>
 									{{end}}
 								{{end}}

templates/user/project.tmpl

@@ -14,17 +14,19 @@
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
 							<span class="text" title="{{.ContextUser.Name}}">
-								<img class="ui mini image" src="{{.ContextUser.RelAvatarLink}}">
+								{{avatar .ContextUser 28 "mini"}}
 								{{.ContextUser.ShortName 20}}
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu">
 								<div class="item" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
-									<img class="ui mini image" src="{{.SignedUser.RelAvatarLink}}"> {{.SignedUser.ShortName 20}}
+									{{avatar .SignedUser 28 "mini"}}
+									{{.SignedUser.ShortName 20}}
 								</div>
 								{{range .Orgs}}
 								<div class="item" data-value="{{.ID}}" title="{{.Name}}">
-									<img class="ui mini image" src="{{.RelAvatarLink}}"> {{.ShortName 20}}
+									{{avatar . 28 "mini"}}
+									{{.ShortName 20}}
 								</div>
 								{{end}}
 							</div>

templates/user/settings/organization.tmpl

@@ -22,7 +22,7 @@
 								<button type="submit" class="ui blue small button" name="uid" value="{{.ID}}">{{$.i18n.Tr "org.members.leave"}}</button>
 							</form>
 						</div>
-						<img class="ui mini image" src="{{.RelAvatarLink}}">
+						{{avatar . 28 "mini"}}
 						<div class="content">
 								<a href="{{.HomeLink}}">{{.Name}}</a>
 						</div>