fix: align and size specific card thumbnails uniformly on resources page

[dhruveshmishra]

This pr fixes #7817

Description

This PR fixes sizing, alignment, and cropping issues on specific card thumbnails (Kubernetes, Docker, CCOSS, and O'Reilly courses) on the resources page to ensure a visually balanced grid.

Changes

Dynamic Sizing in React: Dynamically calculates image layout styling in Card/index.js based on card titles, passing objectFit, padding, and objectPosition inline to avoid global CSS styling overrides.

SVG Wrapper Support: Spreads custom styles to the SVG wrapper in image.js to allow proper height and width constraints on vector graphics.

Screen recording

Screen.Recording.2026-08-03.at.3.22.08.PM.mov

Summary by CodeRabbit

• Bug Fixes
  • Improved image sizing, positioning, and spacing across cards featuring Kubernetes, CCOSS, O’Reilly, Istio, and related content.
  • Ensured images consistently fill their available card height.
  • Applied custom styling consistently to both standard and fallback images.
  • Improved image rendering behavior while preserving existing presentation settings.

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Fixes thumbnail sizing/alignment/cropping on the resources page by introducing per-card image styling and ensuring SVG thumbnails can be constrained via wrapper styles.

Changes:

• Add title-based dynamic imgStyle (objectFit/padding/objectPosition/etc.) in Card for specific resource thumbnails.
• Allow passing custom style down to the SVG wrapper in Image so SVGs can be sized consistently.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
src/components/image.js	Enables custom wrapper styling for SVG images to support consistent sizing constraints.
src/components/Card/index.js	Adds per-title thumbnail layout rules to normalize card grid appearance.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 818609b1-3e34-4b7d-ad08-674b496ab08d

📥 Commits

Reviewing files that changed from the base of the PR and between 5838367 and b9deb84.

📒 Files selected for processing (1)

• src/components/image.js

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/image.js

---

📝 Walkthrough

Walkthrough

Card now computes title-specific image layouts for non-list cards. The Image component applies supplied styles to SVG fallbacks and forwards Gatsby image styling props.

Changes

Card image presentation

Layer / File(s)	Summary
Card layout styles src/components/Card/index.js	Card derives image fit, position, padding, width, and height from the title and list-view state.
Image style propagation src/components/image.js	The SVG fallback merges supplied styles with its dimensions. Gatsby image rendering receives explicit fit and position props and forwards imgStyle unchanged.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• layer5io/layer5#7828: Both changes modify Card and Image image-sizing and style-propagation logic.
• layer5io/layer5#7913: Both changes modify article-card image sizing and alignment.
• layer5io/layer5#7918: Both changes modify Card and Image thumbnail sizing and positioning.

Suggested labels: area/resources

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the thumbnail sizing and alignment fixes for card images on the resources page.
Linked Issues check	✅ Passed	The changes address issue #7817 by correcting card image sizing, alignment, cropping, and SVG dimension handling.
Out of Scope Changes check	✅ Passed	The changes are limited to card thumbnail styling and image rendering behavior required by the linked issue.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed: dependency version conflict. Check your lock file or package.json.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/components/Card/index.js (1)

17-58: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Use a stable identifier for the image layout map.

If a title changes, the card can fall back to default cover and center styling. Key these rules from fields.slug or an explicit frontmatter layout value.

🤖 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 `@src/components/Card/index.js` around lines 17 - 58, Update the image layout
conditions in the Card component to use a stable identifier such as fields.slug
or an explicit frontmatter layout value instead of comparing display title
strings. Preserve the existing contain/cover, padding, dimensions, and
objectPosition behavior for each mapped image layout.

🤖 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 `@src/components/image.js`:
- Around line 32-41: Update the GatsbyImage invocation in the image component to
forward objectFit and objectPosition as top-level props, reusing the values
supplied through imgStyle so the placeholder uses the same crop as the main
image. Keep the existing imgStyle handling intact.

---

Nitpick comments:
In `@src/components/Card/index.js`:
- Around line 17-58: Update the image layout conditions in the Card component to
use a stable identifier such as fields.slug or an explicit frontmatter layout
value instead of comparing display title strings. Preserve the existing
contain/cover, padding, dimensions, and objectPosition behavior for each mapped
image layout.

🪄 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 Plus

Run ID: 846437e3-d1e6-41da-ae11-8dca85f14f78

📥 Commits

Reviewing files that changed from the base of the PR and between 7359a55 and 2bee890.

📒 Files selected for processing (2)

• src/components/Card/index.js
• src/components/image.js

[ayanasarkar]

Nice fix, grid looks way more balanced in the recording 👍
A couple things before this is mergeable though:
CI's failing (ESLint) — might want to lint locally and push a fix
image.js L14-17: ...rest.style will throw if style is undefined, worth guarding that
description mentions Docker but I don't see it in the title-matching list in Card/index.js — missed or intentional?
agree with Copilot's point on the title chain being brittle, a small map/lookup instead of the if/else would age better
Not blockers conceptually.
Good work otherwise 🙌

[dhruveshmishra]

@ghosthouse7 It was intentional. The card showing the Docker logo is titled "Managing Containers" in the codebase, and it is included in the Set lookup!

[dhruveshmishra]

@Bhumikagarggg @Sbragul26 @YASHMAHAKAL @rishiraj38 In my local the preview and lint is working fine but here it is failing can someone please check

[ayanasarkar]

@ghosthouse7 It was intentional. The card showing the Docker logo is titled "Managing Containers" in the codebase, and it is included in the Set lookup!

Ah gotcha, missed that — thanks for clarifying, makes sense 👍

[dhruveshmishra]

@rishiraj38 @Sbragul26 @Bhumikagarggg please take a look on it

[Salmaan-M]

LGTM 👏

[github-actions]

🚀 Preview deployment: https://layer5.io/pr-preview/pr-7914/