Skip to content

fix(site): prevent 16:9 rect cropping on inline Portable Text images and constrain prose width - #781

Merged
codercatdev merged 1 commit into
devfrom
fix/portable-text-image-cropping-and-prose-width
Oct 23, 2026
Merged

codercatdev merged 1 commit into
devfrom
fix/portable-text-image-cropping-and-prose-width

Conversation

@codercatdev

Copy link
Copy Markdown
Contributor

Fixes two issues affecting blog and podcast content layout and inline images:

  • Inline Portable Text images (PtImage.astro): Previously chained .width(1920).height(1080) on urlForImage(node), which caused @sanity/image-url to compute and inject a forced 16:9 ?rect=... crop on any non-16:9 image (slicing the top and bottom off tall memes, screenshots, and vertical diagrams). Now parses native dimensions from the Sanity asset _ref, builds responsive src/srcset using .width(w) only (preserving natural aspect ratio), and caps height at max-h-[80dvh].
  • Prose container width (PortableTextContent.astro): Replaces max-w-none with max-w-4xl so mx-auto prose-violet lg:prose-xl centers a readable article column instead of stretching across the entire 1536px container.
  • Square profile images (CoverMedia.astro, guest/[slug].astro, author/[slug].astro, sponsor/[slug].astro): Passes width={256} height={256} for square profile avatars so they are not pre-cropped to 16:9.

@github-actions

Copy link
Copy Markdown

⚡ Cloudflare Worker Preview Ready!

Environment URL
PR Preview https://03dd86e7-codingcatdev-dev.codingcatdev.workers.dev
Dev Custom Domain https://dev.codingcat.dev
  • Worker Version ID: 03dd86e7-1c46-4db6-a17e-238d36a8cd14
  • Protection: Restricted to @codingcat.dev accounts via Cloudflare Zero Trust Access

@codercatdev
codercatdev merged commit b0e0ca3 into dev Oct 23, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant