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/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>