Gallery design test — not shipped
Each section below renders the same photo using a different container shape or CSS object-fit strategy. Switch the test photo using the control below to stress-test each approach against landscape, portrait and square uploads.
The real upload that triggered the report. Near-landscape but not 3:2. Served from Supabase.
Natural size: 860 × 517 · ratio 1.663
Top candidates
Two different ways to show the whole photo. Lkeeps production’s height (445px) — the photo ends up narrower than the band. Mlets the slot grow so a 3:2 photo fills the full container width — but the gallery section is roughly twice as tall as today. Try both with the “Westminster” and “Brighton” photos to see the width difference.
The slot is a true 3:2 aspect ratio with no max-height — on desktop that's 1310×873 at a 1440 viewport. A photo with ratio ≥ 1.5 fills the full container width edge-to-edge. Landscape photos look as wide as they possibly can while still being shown in full. Blurred backdrop covers any top/bottom bars for wider-than-3:2 photos.
Trade-off: Gallery section roughly doubles in height on desktop (~+428px vs production). The photo itself uses the full width for any landscape upload, but the page below gets pushed way down. Portrait photos still leave large side bars (filled by the blurred backdrop).
Combines J's zero-crop guarantee with F's blurred-backdrop trick. Same height as today, photo shown whole, and the horizontal bars are filled with a blurred copy of the photo itself so there's no empty space.
Trade-off: Most 'designed' of the height-preserving options. The photo itself is narrower than the band — on a 1.66-ratio photo like the Beacon, the image renders at ~739×445 inside the 1310-wide band. You keep production's height; you lose photo width.
All other options considered
Everything below is here for comparison — starting with the current production behaviour (A).
The existing behaviour. Container is h-[210px] md:h-[445px] w-full, so the shape changes wildly with viewport width — on desktop it becomes a ~3:1 ultrawide band that crops most photos aggressively.
Trade-off: Uniform hero look, but subjects near top/bottom get chopped on desktop; portraits become tiny ribbons.
Container is always 3:2 regardless of viewport. Matches the native shape of most DSLR + phone-landscape uploads, so cropping is minimal for the common case.
Trade-off: Still crops portrait uploads hard. But the default case feels native.
More banner-like / cinematic. Wider than most uploads, so there's moderate top/bottom crop on 3:2 and 4:3 photos.
Trade-off: Premium feel, but noticeably crops any 3:2 photo.
Matches what the current mobile slot happens to show (343×210 ≈ 5:3). Middle ground between 3:2 and 16:9.
Trade-off: Slightly unusual ratio but fits the Beacon's actual photo almost perfectly.
Nothing is ever cropped. The photo is fitted inside the 3:2 slot with solid grey bars filling the rest.
Trade-off: Safest — no content is lost — but the grey bars look cheap, especially for portraits.
Content-safe like (E), but the empty space is filled by a blurred, enlarged copy of the photo itself — the trick Spotify, Instagram and YouTube use for portrait content.
Trade-off: Looks premium on almost any photo. Slightly more DOM / one extra img render.
Keeps cover for a uniform look, but the admin/claim UI lets the school click the subject (face, building entrance, etc.) once. That focal point is stored and respected on every crop.
Trade-off: Best of both worlds, but requires admin UI + new DB columns (focal_x, focal_y).
Click anywhere on the image to move the focal point. Currently objectPosition: 50% 50%. In production we'd store focal_x / focal_y per photo and let school admins drag this marker once.
The container always inherits the image's natural aspect ratio. Every gallery slide is a different shape.
Trade-off: Zero cropping, but the carousel jumps in height between slides and feels less designed.
The defensible-simple solution. No ratio detection, no focal points, no blur, no branching — every photo fits entirely inside the slot, nothing is ever cropped, and the slot height stays constant across slides so swipe never jumps. A faint neutral backdrop reads as 'gallery frame' rather than 'missing image', and a 1px inner ring sells it further. Property portals like OnTheMarket do exactly this and nobody complains.
Trade-off: Photos never fully fill the slot unless they happen to be 3:2 — landscapes get small side bars, portraits get top/bottom bars, squares get both. Slightly less polished on mixed 15-photo premium galleries, but 100% defensible when a school complains because no image is ever cropped. AND the slot is 115px taller than production on desktop.
Other height-preserving options (same outer height as production)
Close relatives of L (now shown at the top). J uses plain neutral bars instead of a blurred backdrop; K keeps cover so it still crops lightly but uses a centred 3:2 slot inside the current-height band.
Keep the current h-[210px] md:h-[445px] band but switch cover → contain. The photo is shown whole, centred inside the band, with neutral-100 bars filling whatever horizontal space is left. Zero crop, zero extra vertical space.
Trade-off: Wide photos render smaller than they do today (the band is often wider than the photo can be at this height). On a 1336-wide band at 445px tall, a 3:2 photo renders at ~668×445, leaving ~334px of neutral bar on each side.
The band is the current height, but inside it sits a 3:2 slot centred. The photo fills that inner slot with cover. You get proper-proportion crops (minimal trimming on landscapes) with the current overall height preserved.
Trade-off: Still crops, just less than production does. The inner slot is ~668×445 on desktop so you see the photo at ~half the current width — smaller-feeling photo but much better proportions.
