Skip to content

fix(blog): render article body images at full column width - #212

Merged
Siumauricio merged 3 commits into
mainfrom
fix/blog-body-image-sizing
Oct 22, 2026
Merged

Siumauricio merged 3 commits into
mainfrom
fix/blog-body-image-sizing

Conversation

@Siumauricio

Copy link
Copy Markdown
Contributor

Summary

Fixes article body images on dokploy.com/blog rendering too small.

  • Body images: mx-auto max-w-lg overflow-hidden rounded-lg border border-border object-cover max-lg:w-64 → mx-auto h-auto w-full rounded-lg border border-border
  • ZoomableImage no longer adds object-cover by default. The feature image header still passes object-cover explicitly, so it is unchanged.

Measured on /blog/devops-containers (2000×925 chart)

Text column Before After
Desktop (1504px) 868px 512×238 868×403
Mobile (390px) 288px 256×119 (fixed) 288×134

"After" values come from applying the new classes to the live page in the browser.

Note: images were not actually being cropped, because height was auto, so object-cover had no visible effect. It's removed so that adding a height constraint later can't crop them.

Test plan

  • biome check passes
  • Spot-check /blog/devops-containers and a couple of other posts on desktop and mobile after deploy
  • Feature images in post headers still fill the 400px banner

Body images were capped at 512px (max-w-lg) on desktop and fixed at 256px
(max-lg:w-64) below 1024px. Use w-full h-auto so they span the article
column and scale proportionally, and drop object-cover (also applied by
default in ZoomableImage) so images can't be cropped. The feature image
still passes object-cover explicitly.
@Siumauricio
Siumauricio merged commit 65bd669 into main Oct 22, 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.

2 participants