Use the user profile header template

Author: Cyperghost

com.woltlab.wcf/templates/userProfileHeader.tpl

@@ -28,15 +28,13 @@
 			{event name='beforeManageButtons'}
 
 			{if $view->canEditCoverPhoto()}
-				<div class="dropdown">
-					<button type="button" class="button small dropdownToggle">{icon name='camera'} {lang}wcf.user.coverPhoto.edit{/lang}</button>
-					<ul class="dropdownMenu">
-						{if $view->canAddCoverPhoto()}
-							<li><button type="button" class="jsButtonUploadCoverPhoto jsStaticDialog" data-dialog-id="userProfileCoverPhotoUpload">{lang}wcf.user.coverPhoto.upload{/lang}</button></li>
-						{/if}
-						<li{if !$view->user->coverPhotoHash} style="display:none;"{/if}><button type="button" class="jsButtonDeleteCoverPhoto">{lang}wcf.user.coverPhoto.delete{/lang}</button></li>
-					</ul>
-				</div>
+				<ul class="userProfileManageCoverPhoto buttonGroup buttonList smallButtons">
+					<li>
+						<button type="button" data-edit-cover-photo="{link controller="UserCoverPhoto" id=$user->userID}{/link}" data-default-cover-photo="{$__wcf->styleHandler->getStyle()->getCoverPhotoUrl()}" class="button small">
+							{icon name='camera'} {lang}wcf.user.coverPhoto.management{/lang}
+						</button>
+					</li>
+				</ul>
 			{/if}
 
 			{if $view->canEditUser()}

ts/WoltLabSuite/Core/Component/User/CoverPhoto.ts

@@ -32,7 +32,7 @@ async function editCoverPhoto(button: HTMLElement): Promise<void> {
   const dialog = dialogFactory().fromHtml(json.dialog).withoutControls();
   const coverPhotoElement = getCoverPhotoElement();
   const coverPhotoNotice = document.getElementById("coverPhotoNotice");
-  const oldCoverPhoto = coverPhotoElement?.style.backgroundImage;
+  const oldCoverPhoto = getCoverPhotoUrl(coverPhotoElement);
 
   dialog.addEventListener("afterClose", () => {
     const file = dialog.querySelector<WoltlabCoreFile>("woltlab-core-file");
@@ -48,8 +48,8 @@ async function editCoverPhoto(button: HTMLElement): Promise<void> {
       return;
     }
 
-    if (coverPhotoElement && coverPhotoUrl) {
-      coverPhotoElement.style.backgroundImage = coverPhotoStyle;
+    if (coverPhotoElement instanceof HTMLImageElement && coverPhotoUrl) {
+      coverPhotoElement.src = coverPhotoUrl;
     } else {
       // ACP cover photo management
       if (!coverPhotoElement && coverPhotoUrl) {
@@ -78,8 +78,19 @@ async function editCoverPhoto(button: HTMLElement): Promise<void> {
   dialog.show(json.title);
 }
 
+function getCoverPhotoUrl(coverPhotoElement: HTMLElement | null): string | undefined {
+  if (coverPhotoElement instanceof HTMLImageElement) {
+    return coverPhotoElement.src;
+  } else {
+    return coverPhotoElement?.style.backgroundImage;
+  }
+}
+
 function getCoverPhotoElement(): HTMLElement | null {
-  return document.querySelector<HTMLElement>(".userProfileCoverPhoto") ?? document.getElementById("coverPhotoPreview");
+  return (
+    document.querySelector<HTMLElement>(".userProfileHeader__coverPhotoImage") ??
+    document.getElementById("coverPhotoPreview")
+  );
 }
 
 export function setup(): void {