From be9e307418fdd60273f3a202a75249cbdaf4b499 Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Fri, 11 Apr 2025 12:05:26 +0200
Subject: [PATCH] [chore] render avatar in photoswipe slide, remove repeated
 alt text (#3985)

* [chore] render avatar in photoswipe slide, remove repeated alt text

* bwap bwap
---
 web/source/css/_profile-header.css  | 42 ++++++++++---------
 web/template/profile_header.tmpl    | 62 +++++++++++++++++++----------
 web/template/status_attachment.tmpl |  3 --
 3 files changed, 65 insertions(+), 42 deletions(-)

diff --git a/web/source/css/_profile-header.css b/web/source/css/_profile-header.css
index cba67ffa1..3b14edab8 100644
--- a/web/source/css/_profile-header.css
+++ b/web/source/css/_profile-header.css
@@ -20,8 +20,20 @@
 .profile .profile-header {
 	background: $profile-bg;
 	border-radius: $br;
-	overflow: hidden;
-	margin-bottom: 1rem;
+
+	/*
+		Link to open media in slide
+		should fill entire media wrapper.
+	*/
+	a.photoswipe-slide {
+		display: inline-block;
+		height: 100%;
+		width: 100%;
+		
+		&:focus-visible {
+			outline: $button-focus-outline;
+		}
+	}
 
 	.moved-to {
 		padding: 1rem;
@@ -30,8 +42,10 @@
 
 	.header-image-wrapper {
 		position: relative;
-		padding-top: 33.33%; /* aspect-ratio 1/3 */
-
+		aspect-ratio: 3;
+		height: 100%;
+		width: 100%;
+		
 		img {
 			position: absolute;
 			top: 0;
@@ -66,6 +80,7 @@
 		margin: 1rem;
 		margin-top: calc(-1 * $overlap);
 		gap: 0 1rem;
+		padding-bottom: 1rem;
 
 		.avatar-image-wrapper {
 			grid-area: avatar;
@@ -82,22 +97,11 @@
 			width: $avatar-size;
 
 			/*
-				Link to open media in slide
-				should fill entire media wrapper.
+				Offset to avoid clashing with
+				thick border around avatars.
 			*/
-			a.photoswipe-slide {
-				display: inline-block;
-				height: 100%;
-				width: 100%;
-	
-				/*
-					Offset to avoid clashing with
-					thick border around avatars.
-				*/
-				&:focus-visible {
-					outline: $button-focus-outline;
-					outline-offset: 0.25rem;
-				}
+			a.photoswipe-slide:focus-visible {
+				outline-offset: 0.25rem;
 			}
 
 			.avatar {
diff --git a/web/template/profile_header.tmpl b/web/template/profile_header.tmpl
index 4be900287..de3dfc8fc 100644
--- a/web/template/profile_header.tmpl
+++ b/web/template/profile_header.tmpl
@@ -80,10 +80,7 @@
 
 {{- define "avatar" -}}
 {{- with . }}
-<div
-    class="photoswipe-gallery odd single avatar-image-wrapper"
-    role="group"
->
+<div class="photoswipe-gallery odd single avatar-image-wrapper" role="group">
     <a
         class="photoswipe-slide"
         href="{{- .account.Avatar -}}"
@@ -91,12 +88,9 @@
         data-pswp-width="{{- template "avatarWidth" . -}}px"
         data-pswp-height="{{- template "avatarHeight" . -}}px"
         data-cropped="true"
-        alt="{{- template "avatarAlt" . -}}"
         title="{{- template "avatarAlt" . -}}"
     >
-        <picture
-            aria-hidden="true"
-        >
+        <picture>
             {{- if .account.AvatarAttachment }}
             <source
                 class="avatar"
@@ -109,7 +103,6 @@
                 class="avatar u-photo"
                 src="{{- .account.Avatar -}}"
                 alt="{{- template "avatarAlt" . -}}"
-                title="{{- template "avatarAlt" . -}}"
                 width="{{- template "avatarWidth" . -}}"
                 height="{{- template "avatarHeight" . -}}"
             />
@@ -119,31 +112,60 @@
 {{- end }}
 {{- end -}}
 
+{{- define "header" -}}
 {{- with . }}
-<h2 class="sr-only">Profile for {{ .account.Username -}}</h2>
-<section class="profile-header" role="region" aria-label="Basic info">
-    {{- if .account.Moved }}
-    {{- include "profileMovedTo" . | indent 2 }}
-    {{- end }}
-    <div class="header-image-wrapper">
+{{- if .account.HeaderAttachment }}
+<div class="photoswipe-gallery odd single header-image-wrapper" role="group">
+    <a
+        class="photoswipe-slide"
+        href="{{- .account.Header -}}"
+        target="_blank"
+        data-pswp-width="{{- .account.HeaderAttachment.Meta.Original.Width -}}px"
+        data-pswp-height="{{- .account.HeaderAttachment.Meta.Original.Height -}}px"
+        data-cropped="true"
+        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" . -}}"
+                width="{{- .account.HeaderAttachment.Meta.Original.Width -}}"
+                height="{{- .account.HeaderAttachment.Meta.Original.Height -}}"
             />
         </picture>
-    </div>
+    </a>
+</div>
+{{- else }}
+<div class="header-image-wrapper">
+    <picture>
+        <img
+            src="{{- .account.Header -}}"
+            alt="{{- template "headerAlt" . -}}"
+            title="{{- template "headerAlt" . -}}"
+        />
+    </picture>
+</div>
+{{- end }}
+{{- end }}
+{{- end -}}
+
+{{- with . }}
+<h2 class="sr-only">Profile for {{ .account.Username -}}</h2>
+<section class="profile-header" role="region" aria-label="Basic info">
+    {{- if .account.Moved }}
+    {{- include "profileMovedTo" . | indent 1 }}
+    {{- end }}
+    {{- with . }}
+    {{- include "header" . | indent 1 }}
+    {{- end }}
     <div class="basic-info">
         {{- with . }}
-        {{- include "avatar" . | indent 3 }}
+        {{- include "avatar" . | indent 2 }}
         {{- end }}
         <dl class="namerole">
             <dt class="sr-only">Display name</dt>
diff --git a/web/template/status_attachment.tmpl b/web/template/status_attachment.tmpl
index a60ef4137..d04f11d5d 100644
--- a/web/template/status_attachment.tmpl
+++ b/web/template/status_attachment.tmpl
@@ -24,7 +24,6 @@
     loading="lazy"
     {{- if .Description }}
     alt="{{- .Description -}}"
-    title="{{- .Description -}}"
     {{- end }}
     width="{{- .Meta.Small.Width -}}"
     height="{{- .Meta.Small.Height -}}"
@@ -37,7 +36,6 @@
     loading="lazy"
     {{- if .Description }}
     alt="{{- .Description -}}"
-    title="{{- .Description -}}"
     {{- end }}
     width="518"
     height="460"
@@ -138,7 +136,6 @@
             data-pswp-height="{{- .Item.Meta.Original.Height -}}px"
             data-cropped="true"
             {{- if .Item.Description }}
-            alt="{{- .Item.Description -}}"
             title="{{- .Item.Description -}}"
             {{- end }}
         >