diff options
Diffstat (limited to 'web/template')
| -rw-r--r-- | web/template/page.tmpl | 2 | ||||
| -rw-r--r-- | web/template/page_header.tmpl | 19 | ||||
| -rw-r--r-- | web/template/profile.tmpl | 47 | ||||
| -rw-r--r-- | web/template/status_header.tmpl | 18 |
4 files changed, 63 insertions, 23 deletions
diff --git a/web/template/page.tmpl b/web/template/page.tmpl index 347caf33e..d2edc5277 100644 --- a/web/template/page.tmpl +++ b/web/template/page.tmpl @@ -29,7 +29,7 @@ {{- if .instance.ThumbnailType -}} {{- .instance.ThumbnailType -}} {{- else -}} -image/png +image/webp {{- end -}} {{- end -}} diff --git a/web/template/page_header.tmpl b/web/template/page_header.tmpl index e605b349f..388587aaf 100644 --- a/web/template/page_header.tmpl +++ b/web/template/page_header.tmpl @@ -57,11 +57,20 @@ Instance Logo {{- with . }} <a aria-label="{{- .instance.Title -}}. Go to instance homepage" href="/" class="nounderline"> - <img - src="{{- .instance.Thumbnail -}}" - alt="{{- template "thumbnailDescription" . -}}" - title="{{- template "thumbnailDescription" . -}}" - /> + <picture> + {{- if .instance.ThumbnailStatic }} + <source + srcset="{{- .instance.ThumbnailStatic -}}" + type="{{- .instance.ThumbnailStaticType -}}" + media="(prefers-reduced-motion: reduce)" + /> + {{- end }} + <img + src="{{- .instance.Thumbnail -}}" + alt="{{- template "thumbnailDescription" . -}}" + title="{{- template "thumbnailDescription" . -}}" + /> + </picture> <h1>{{- .instance.Title -}}</h1> </a> {{- if .showStrap }} diff --git a/web/template/profile.tmpl b/web/template/profile.tmpl index 256bbdccf..a06c842ab 100644 --- a/web/template/profile.tmpl +++ b/web/template/profile.tmpl @@ -94,14 +94,26 @@ alt="{{- template "avatarAlt" . -}}" title="{{- template "avatarAlt" . -}}" > - <img - class="avatar" - src="{{- .account.Avatar -}}" - alt="{{- template "avatarAlt" . -}}" - title="{{- template "avatarAlt" . -}}" - width="{{- template "avatarWidth" . -}}" - height="{{- template "avatarHeight" . -}}" - /> + <picture + aria-hidden="true" + > + {{- if .account.AvatarAttachment }} + <source + class="avatar" + srcset="{{- .account.AvatarStatic -}}" + type="{{- .account.AvatarAttachment.PreviewMIMEType -}}" + media="(prefers-reduced-motion: reduce)" + /> + {{- end }} + <img + class="avatar" + src="{{- .account.Avatar -}}" + alt="{{- template "avatarAlt" . -}}" + title="{{- template "avatarAlt" . -}}" + width="{{- template "avatarWidth" . -}}" + height="{{- template "avatarHeight" . -}}" + /> + </picture> </a> </div> {{- end }} @@ -115,11 +127,20 @@ {{- include "profileMovedTo" . | indent 2 }} {{- end }} <div class="header-image-wrapper"> - <img - src="{{- .account.Header -}}" - alt="{{- template "headerAlt" . -}}" - title="{{- template "headerAlt" . -}}" - /> + <picture> + {{- if .account.HeaderAttachment }} + <source + srcset="{{- .account.HeaderStatic -}}" + type="{{- .account.HeaderAttachment.PreviewMIMEType -}}" + media="(prefers-reduced-motion: reduce)" + /> + {{- end }} + <img + src="{{- .account.Header -}}" + alt="{{- template "headerAlt" . -}}" + title="{{- template "headerAlt" . -}}" + /> + </picture> </div> <div class="basic-info"> {{- with . }} diff --git a/web/template/status_header.tmpl b/web/template/status_header.tmpl index 8946a1030..01b73aea0 100644 --- a/web/template/status_header.tmpl +++ b/web/template/status_header.tmpl @@ -32,13 +32,23 @@ title="Open remote profile (opens in a new window)" > {{- end }} - <img + <picture class="avatar" aria-hidden="true" - src="{{- .Avatar -}}" - alt="Avatar for {{ .Username -}}" - title="Avatar for {{ .Username -}}" > + {{- if .AvatarAttachment }} + <source + srcset="{{- .AvatarStatic -}}" + type="{{- .AvatarAttachment.PreviewMIMEType -}}" + media="(prefers-reduced-motion: reduce)" + /> + {{- end }} + <img + src="{{- .Avatar -}}" + alt="Avatar for {{ .Username -}}" + title="Avatar for {{ .Username -}}" + > + </picture> <div class="author-strap"> <span class="displayname text-cutoff"> {{- if .DisplayName -}} |