peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(channel): render the banner wide like YouTube

Browse source 
The stored bannerExternalUrl is the full 16:9 banner template at a low default size (512x288),
so object-contain showed the whole padded image tiny and centered. Now request a crisp wide
version (=w1707) and object-cover the desktop safe-area band (centre 2560x423, ~6:1) at full
width — matching YouTube's banner crop.
This commit is contained in:
npeter83 2026-06-30 04:32:43 +02:00
parent b4a1fa079b
commit 78d81f81d0
1 changed files with 6 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/components/ChannelPage.tsx
View file

@ -133,13 +133,14 @@ export default function ChannelPage({
{/* Banner + back */} {/* Banner + back */}
<div className="relative"> <div className="relative">
{ch?.banner_url ? ( {ch?.banner_url ? (
// Keep the banner's real aspect ratio (object-contain, capped height); letterbox with // Match YouTube's banner: the stored bannerExternalUrl is the full 16:9 template at a
// the surface colour rather than stretching/cropping it to fill. // low default size, so request a crisp wide version (=w1707) and object-cover the
<div className="w-full flex justify-center bg-surface"> // desktop "safe area" — the centre 2560×423 (~6:1) band — at full width.
<div className="w-full overflow-hidden bg-surface" style={{ aspectRatio: "2560 / 423" }}>
<img <img
src={ch.banner_url} src={`${ch.banner_url}=w1707`}
alt="" alt=""
className="block max-h-40 w-auto max-w-full object-contain" className="w-full h-full object-cover object-center"
/> />
</div> </div>
) : ( ) : (