commit: "coverimage fit"#7
Conversation
WalkthroughUpdated the blog card image container and Next.js Image props: removed fixed aspect ratio, switched to full-width container, changed Image from fill to explicit width/height, adjusted object-fit classes, and reduced hover scale. No changes to exported interfaces or source selection logic. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![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
🧹 Nitpick comments (5)
components/blog-card.tsx (5)
36-36: Re-add overflow clipping on the image wrapper to prevent hover spillover.With object-contain and a hover scale, the image can bleed outside its wrapper. Clipping at the wrapper keeps the gradient overlays aligned with the visible image area.
- <div className="relative w-full"> + <div className="relative w-full overflow-hidden">
44-46: Right-size responsive images with sizes to cut bandwidth and reduce layout shift.Without a sizes prop, Next.js may serve unnecessarily large images across viewports. Adding sizes aligns delivery with card width and helps minimize CLS.
alt={post.title} width={1200} // pick a large enough base width height={630} // aspect ratio will be preserved, height auto-scales + sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" className="w-full h-auto object-contain transition-transform duration-500 group-hover:scale-105"If the grid’s breakpoints differ, tune the percentages accordingly.
35-36: Update the comment: it still references a fixed golden-ratio aspect.The container no longer enforces a φ aspect. Clarify to avoid future confusion.
- {/* Image - Golden ratio aspect ratio (φ:1 ≈ 1.618:1) */} + {/* Image - Responsive container (no fixed aspect ratio; fits image without cropping) */}
44-44: Accessibility: make alt text descriptive, not just the title.Use alt to communicate what the image is, not merely repeat the title. Adjust as appropriate for your content model.
- alt={post.title} + alt={`Cover image for ${post.title}`}
44-46: Optional: Mitigate potential CLS from a hard-coded 1200×630 ratio.Using a constant width/height pair defines the pre-load aspect ratio for every card. If source images vary significantly, the final rendered height may differ and cause small shifts. Two alternatives:
- Store image dimensions per post and pass the real width/height.
- Keep a fixed wrapper height (or aspect-ratio) and continue using object-contain to avoid cropping, preserving uniform card heights.
Example (outside this hunk): extend BlogPost and pass real dimensions when available.
// Example types interface BlogPost { /* ... */ imageWidth?: number; imageHeight?: number; } // Usage <Image alt={`Cover image for ${post.title}`} width={post.imageWidth ?? 1200} height={post.imageHeight ?? 630} sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" className="w-full h-auto object-contain transition-transform duration-500 group-hover:scale-105" />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
components/blog-card.tsx(2 hunks)
| post.image.startsWith("/") | ||
| ? `${BASE_PATH}${post.image}` | ||
| : post.image | ||
| } |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Harden src construction: handle empty strings and keep external domains safe.
- If post.image is "", Next/Image will error. Add a safe fallback.
- Keep the current BASE_PATH logic but ensure external domains are allowed in next.config.[jt]s.
Apply this inline diff for a defensive fallback (adjust the placeholder path to an existing asset):
- src={
- post.image.startsWith("/")
- ? `${BASE_PATH}${post.image}`
- : post.image
- }
+ src={
+ post.image
+ ? (post.image.startsWith("/") ? `${BASE_PATH}${post.image}` : post.image)
+ : "/images/placeholder-cover.jpg"
+ }Run this script to verify Next config for external images and basePath:
If basePath is configured globally, consider removing manual BASE_PATH concatenation to avoid future double-prefixing.
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Find Next config(s)
fd -a '^next\.config\.(js|mjs|cjs|ts)$' -HI
echo -e "\n--- Inspect images.domains and basePath ---"
rg -n -C2 'images\s*:\s*{|domains\s*:|\bbasePath\b' $(fd '^next\.config\.(js|mjs|cjs|ts)$' -HI)
echo -e "\n--- Check for a placeholder asset ---"
fd -a 'placeholder-cover.(png|jpg|jpeg|webp|avif)' -HI public || trueLength of output: 453
Let’s rerun a more targeted inspection of your Next.js config and verify the placeholder asset:
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Locate the Next.js config file
config_file=$(fd '^next\.config\.(js|mjs|cjs|ts)$' -HI | head -n1)
echo "Using config file: $config_file"
echo -e "\n--- images section ---"
rg -nP 'images\s*:\s*{' -C3 "$config_file" || true
echo -e "\n--- domains array ---"
rg -nP 'domains\s*:' -C1 "$config_file" || true
echo -e "\n--- basePath ---"
rg -nP 'basePath\s*:' -n "$config_file" || true
echo -e "\n--- placeholder asset in public/ ---"
fd -a 'placeholder-cover\.(png|jpg|jpeg|webp|avif)' -HI public || trueLength of output: 763
Harden src attribute and configure external image domains
• Add a safe fallback when post.image is empty. Since there’s no public/placeholder-cover.* asset, either add one at public/images/placeholder-cover.jpg or adjust the path to an existing placeholder.
• In next.config.mjs, there is no images.domains array—external image hosts will be blocked by default. Add your allowed domains under images.domains.
• There is no global basePath in your config, so continuing to use BASE_PATH in code is correct.
Apply this inline diff in components/blog-card.tsx (adjust placeholder path as needed):
- src={
- post.image.startsWith("/")
- ? `${BASE_PATH}${post.image}`
- : post.image
- }
+ src={
+ post.image
+ ? (post.image.startsWith("/") ? `${BASE_PATH}${post.image}` : post.image)
+ : "/images/placeholder-cover.jpg"
+ }Then update next.config.mjs to allow your external domains:
images: {
unoptimized: true,
+ domains: [
+ "your-cdn.com",
+ "images.example.com",
+ // add any other external hosts here
+ ],
},Ensure the placeholder asset exists at the chosen path (or change the fallback to point at your default image).
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| post.image.startsWith("/") | |
| ? `${BASE_PATH}${post.image}` | |
| : post.image | |
| } | |
| // components/blog-card.tsx | |
| <Image | |
| /* …other props… */ | |
| src={ | |
| post.image | |
| ? (post.image.startsWith("/") | |
| ? `${BASE_PATH}${post.image}` | |
| : post.image | |
| ) | |
| : "/images/placeholder-cover.jpg" | |
| } | |
| alt={post.title} | |
| /> |
🤖 Prompt for AI Agents
In components/blog-card.tsx around lines 39 to 42, the src construction for
post.image is unsafe when post.image is empty and external hosts will be blocked
unless configured; update the expression to first check for a non-empty image
and use a local placeholder (e.g., /images/placeholder-cover.jpg or another
existing asset) as a fallback, keep the BASE_PATH prefix for root-relative
images, and ensure the placeholder path matches an actual file; then update
next.config.mjs to add an images.domains array listing any external image
hostnames you need to allow so Next Image can load them.
2 participants
Medium pictures were wider than the image size of the new blog. Consequently, some images were getting cropped.
Summary by CodeRabbit
New Features
Style