DEV Community

Discussion on: Designing the blog card and post hero

Collapse
 
beiluo profile image
刘北洛 •

The shared content contract is the strongest decision here. I’d extend the cover object with focalPoint and cropIntent, not just src/alt. The card and hero can then derive different object-position values without silently changing the visual subject, and a future OG/social variant can reuse the same intent. I run Imagen Chat, so I see this often: image selection can be correct while the downstream crop makes it look wrong.

Collapse
 
sourcier profile image
Roger Rajaratnam •

Great catch — thanks for this!

I added a focalPoint (and an optional cropIntent) to the cover object,
plus one shared helper that both the card and hero use to work out
their crop. No more separate guessing.

Funny enough, this post's own cover was a victim of that, the hero
had a hardcoded crop tuned for a totally different image. Fixed now,
and it'll make OG images easier down the line too.

Updated in the article, with credit to you. Appreciate the nudge! 🙌