fix: removed height that causes vtex crop image#1591
Conversation
📝 WalkthroughWalkthroughThe ChangesVTEX Image URL Optimization
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Tagging OptionsShould a new tag be published when this PR is merged?
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@website/components/Image.tsx`:
- Around line 134-139: Reformat the array join expression that builds the image
path so it matches deno fmt style: ensure each array element (slash, arquivos,
ids, `${trueId}-${width}-0`, ...rest) is properly comma-separated and the
closing ] and .join("/") are on the correct lines, preserving the same values
and variables (trueId, width, arquivos, ids, rest) but adjusting whitespace/line
breaks to satisfy the formatter.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 62324289-c8a4-4e60-9957-bd7fca5cba1f
📒 Files selected for processing (1)
website/components/Image.tsx
| slash, | ||
| arquivos, | ||
| ids, | ||
| `${trueId}-${width}-0`, | ||
| ...rest] | ||
| .join("/"); |
There was a problem hiding this comment.
Fix formatting to unblock CI (deno fmt --check).
Line 134-Line 139 is currently failing formatter checks in pipeline; please reformat this block.
Proposed formatting fix
- src.pathname = [
- slash,
- arquivos,
- ids,
- `${trueId}-${width}-0`,
- ...rest]
- .join("/");
+ src.pathname = [
+ slash,
+ arquivos,
+ ids,
+ `${trueId}-${width}-0`,
+ ...rest,
+ ].join("/");🧰 Tools
🪛 GitHub Actions: ci / 0_Bundle & Check Apps (ubuntu-latest).txt
[error] 134-139: deno fmt --check failed. Found 1 not formatted file in 2108 files. Formatting issue reported at this section.
🪛 GitHub Actions: ci / Bundle & Check Apps (ubuntu-latest)
[error] 134-139: deno fmt --check failed: Found 1 not formatted file in 2108 files.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@website/components/Image.tsx` around lines 134 - 139, Reformat the array join
expression that builds the image path so it matches deno fmt style: ensure each
array element (slash, arquivos, ids, `${trueId}-${width}-0`, ...rest) is
properly comma-separated and the closing ] and .join("/") are on the correct
lines, preserving the same values and variables (trueId, width, arquivos, ids,
rest) but adjusting whitespace/line breaks to satisfy the formatter.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
1 participant
What is this Contribution About?
Please provide a brief description of the changes or enhancements you are proposing in this pull request.
Root cause - optimizeVTEX always forces the consumer's aspect ratio into the URL path ({id}-{width}-{height}), which triggers letterboxing whenever the requested ratio differs from the image's original ratio.
Solution - VTEX supports proportional resizing when one of the dimensions is 0. Replacing {id}-{width}-{height} with {id}-{width}-0 makes VTEX preserve the original aspect ratio, and the consumer's CSS object-cover then crops correctly within the layout.
Summary by cubic
Prevented VTEX images from being letterboxed by removing the forced height in the optimizer. URLs now use height=0 so VTEX keeps the original aspect ratio and
object-covercrops correctly.optimizeVTEXinwebsite/components/Image.tsxto build${id}-${width}-0instead of${id}-${width}-{height}.Written for commit 39689b3. Summary will update on new commits. Review in cubic
Summary by CodeRabbit