From 40583a9260708bfe5bfd3a6a5e575658da58a91f Mon Sep 17 00:00:00 2001 From: Sivert Date: Mon, 5 Oct 2026 10:17:30 +0200 Subject: [PATCH] Store banners in the card's own shape, 960x492 The banner box was 5:2, but the card shows its banner at 320 by 164. A saved banner was cut to 5:2, then the card cropped and scaled it again, so it looked bigger than in the editor that picked it. Co-Authored-By: Claude Opus 5.5 --- src/constants/media.ts | 5 +++-- src/routes/bannerUpload.test.ts | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/constants/media.ts b/src/constants/media.ts index c124cced..9e48a117 100644 --- a/src/constants/media.ts +++ b/src/constants/media.ts @@ -9,5 +9,6 @@ export const AVATAR_MAX_PX = 256; screen, and a 64px source is soft at the top of that. */ export const AVATAR_THUMB_PX = 128; -/** The member card banner, 5:2. A 320px hover card at 3x is 960 across. */ -export const BANNER_BOX = { width: 960, height: 384, thumbWidth: 480, thumbHeight: 192 } as const; +/** The member card's banner is 320 by 164 CSS px, so 3x of that. Any other shape and the card + crops and scales the stored picture again, so it stops matching what the editor showed. */ +export const BANNER_BOX = { width: 960, height: 492, thumbWidth: 480, thumbHeight: 246 } as const; diff --git a/src/routes/bannerUpload.test.ts b/src/routes/bannerUpload.test.ts index c5c98dbc..4bb4ef6b 100644 --- a/src/routes/bannerUpload.test.ts +++ b/src/routes/bannerUpload.test.ts @@ -9,6 +9,7 @@ import { after, before, describe, it } from "node:test"; import express from "express"; import sharp from "sharp"; +import { BANNER_BOX } from "../constants/media"; import { initSqlite } from "../db/sqlite/connection"; import { getFile } from "../db/sqlite/messages"; import { createRoleDefinition } from "../db/sqlite/roleDefinitions"; @@ -100,8 +101,8 @@ describe("POST /api/uploads/banner", () => { const file = await getFile(fileId); assert.equal(file?.mime, "image/avif"); - assert.equal(file?.width, 960); - assert.equal(file?.height, 384); + assert.equal(file?.width, BANNER_BOX.width); + assert.equal(file?.height, BANNER_BOX.height); assert.ok(file?.s3_key.startsWith("banners/")); });