Image ratio is off in lots of places

laoc commented

2026-07-09 10:11:56 +00:00

Owner

I noticed that we display images in lots of places with bad ratio, e.g. naddr1qvzqqqrukvpzqna968zp8c45tcgdgzln2c4twqd9xvfqdc6eey964c8fn07kcmjpqqjxzwpex5ukydrp95ekxepc956r2e3e95unvc3k95mn2wrpxyerzvpnxycxv252m6y

and this happens in other places as well. we should have a concept regarding how much space images may take and how to render those that dont fit nicley in (with correct ratio and not cutting off parts of the images)

I noticed that we display images in lots of places with bad ratio, e.g. `naddr1qvzqqqrukvpzqna968zp8c45tcgdgzln2c4twqd9xvfqdc6eey964c8fn07kcmjpqqjxzwpex5ukydrp95ekxepc956r2e3e95unvc3k95mn2wrpxyerzvpnxycxv252m6y` ![image](/attachments/165058f0-6592-47bf-9495-32af1263cb46) and this happens in other places as well. we should have a concept regarding how much space images may take and how to render those that dont fit nicley in (with correct ratio and not cutting off parts of the images)

image.png

272 KiB

laoc added the

bug

label

2026-07-09 10:11:56 +00:00

laoc commented

2026-07-09 10:58:43 +00:00

Author

Owner

Concept + first implementation on branch fix/issue-29-hero-image-ratio.

Concept:

Detail pages never crop. Hero images render the FULL picture at its natural ratio inside a bounded container (max-height ~24rem), letterboxed on a blurred, dimmed copy of the same image — any ratio (square logo, portrait poster, wide banner) looks intentional, nothing is cut off. The image still clicks through to the original.
Cards/grids keep uniform crops (object-cover tiles): feeds need consistent tile sizes, and since #16 the uncut original is one click away on the detail page.

Implemented: new shared HeroImage component (unit-tested), applied to the calendar event detail view (the reported case — the EduFeed logo now shows complete), the event details modal and the article view. Verified with the naddr from the report.

If there are further specific places with bad ratios beyond these three detail views, list them here and I will migrate them to the same component.

Concept + first implementation on branch `fix/issue-29-hero-image-ratio`. **Concept:** - **Detail pages never crop.** Hero images render the FULL picture at its natural ratio inside a bounded container (max-height ~24rem), letterboxed on a blurred, dimmed copy of the same image — any ratio (square logo, portrait poster, wide banner) looks intentional, nothing is cut off. The image still clicks through to the original. - **Cards/grids keep uniform crops** (object-cover tiles): feeds need consistent tile sizes, and since #16 the uncut original is one click away on the detail page. **Implemented:** new shared `HeroImage` component (unit-tested), applied to the calendar event detail view (the reported case — the EduFeed logo now shows complete), the event details modal and the article view. Verified with the naddr from the report. If there are further specific places with bad ratios beyond these three detail views, list them here and I will migrate them to the same component.

laoc commented

2026-07-09 20:30:43 +00:00

Author

Owner

Confirmed by Steffen, merged to dev — including the follow-up from testing: event-bar labels now switch between black and white based on the background color luminance (>=4.5:1 contrast against every generated author color), so dark blue/purple bars are readable. Branch fix/event-bar-text-contrast, also merged to dev.

laoc closed this issue

2026-07-09 20:30:44 +00:00

Rows
Columns

Image ratio is off in lots of places #29