feat(instagram): auto-fit story images to 9:16 with blurred background#123
Draft
paulocastellano wants to merge 2 commits into
Draft
feat(instagram): auto-fit story images to 9:16 with blurred background#123paulocastellano wants to merge 2 commits into
paulocastellano wants to merge 2 commits into
Conversation
Story images that aren't 9:16 were clipped by Instagram. They are now fitted onto a 1080x1920 canvas — the image is contained and a blurred, darkened copy of itself fills the letterbox gaps, so nothing is cropped and the background color adapts to the image. The fit happens at publish time (the hosted copy lives in social-crops/), and the post editor preview now renders the same blurred-background fit for stories, so the user sees exactly what will publish. The aspect-ratio warning is suppressed for story images since they're auto-fitted. Instagram only — Facebook stories are video-only in our flow.
Vertical previews (stories, reels, TikTok, Shorts) rendered media full-bleed, so a correctly-sized 9:16 image was clipped by the phone mockup, which is taller than 9:16. A shared VerticalMediaCanvas now renders every vertical format consistently: images show in full with a blurred-background extension filling the gaps (no crop), while videos stay full-bleed like the real feed. This mirrors how the platforms themselves display the content and matches the story blur applied at publish time. Also reduce fitToCanvas to two image decodes instead of three (reuse the probe as the foreground), lowering peak memory on the story publish path.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
A customer reported that Instagram story images that aren't 9:16 get clipped — the platform crops anything that doesn't fill the 9:16 frame. While fixing it, the same cropping showed up in the editor's vertical previews (stories, reels, TikTok, Shorts).
Publish-time fit (Instagram story)
Story images are now fitted onto a 1080×1920 canvas at publish time: the original is contained (never cropped) and a blurred, slightly darkened copy of itself fills the gaps. The background color adapts from the image — no color choice to make.
MediaOptimizer::fitToCanvas()— the blurred-background fit (no-op when the ratio already matches; two image decodes, not three).CropsImageForAspectRatio::fitImageToCanvas()— downloads the source, fits it, hosts the derivative undersocial-crops/(mirrors the existing crop helper), so publishing never depends on an external URL.InstagramPublisher::publishStory()— image stories post the hosted, fitted copy.Instagram only — Facebook stories are video-only in our flow.
Editor previews (all vertical formats)
The vertical previews rendered media full-bleed, so a correctly-sized 9:16 image was clipped by the phone mockup (which is taller than 9:16). A shared
VerticalMediaCanvasnow renders every vertical format consistently:Used by IG Story, IG Reel, FB Story, FB Reel, TikTok and YouTube Short. This mirrors how the platforms display the content and matches the publish-time story blur. The aspect-ratio warning is also suppressed for story images (
autoFitsImage), since they're auto-fitted.Tests
MediaOptimizerTest— wide image → 9:16 fit; no letterbox when the ratio already matches.social-crops/copy is posted, not the raw external URL.Full suite:
2347 passed, 2 skipped. Frontend eslint clean.