Image Component for Canvas

Problem/Motivation

We need to develop a new Image component that is fully compatible with Drupal Canvas and aligned with Bootstrap 5 standards.
The component should provide a flexible and reusable solution for rendering images with proper responsiveness, alignment, and styling options.

The Image component will be used across landing pages, cards, hero sections, content blocks, and media-driven layouts where consistent image handling is required.

Key requirements:

• Bootstrap 5 responsive image support
• Canvas-compatible media upload integration
• Responsive behavior across all breakpoints
• Alignment options (Start, Center, End)
• Optional width control (Auto / Custom / Full width)
• Optional rounded corners
• Optional shadow and border toggle
• Alt text support for accessibility

Steps to reproduce

1. Add the Image component in Drupal Canvas.
2. Upload or select an image.
3. Configure alignment (Start, Center, End).
4. Adjust width option if needed.
5. Enable optional rounded corners, shadow, or border.
6. Verify responsive behavior across desktop, tablet, and mobile.

The image should scale responsively, respect alignment settings, and maintain clean spacing within different layout contexts.

Proposed resolution

• Develop a new Image component using Bootstrap 5 img-fluid standards.
• Integrate Drupal media upload support.
• Implement alignment using Bootstrap utility classes.
• Add configurable width options and optional style toggles (rounded, shadow, border).
• Ensure proper alt text handling for accessibility compliance.
• Ensure full Canvas schema compatibility.

The Image component will provide a consistent, accessible, and responsive media solution aligned with Varbase and Bootstrap 5 architecture standards.

Remaining tasks

• ✅ File an issue about this project
• ❌ Addition/Change/Update/Fix to this project
• ❌ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support on feature change/addition
• ➖ User Guide Documentation support on feature change/addition
• ➖ UX/UI designer responsibilities
• ➖ Accessibility and Readability
• ❌ Code review from 1 Varbase core team member
• ❌ Full testing and approval
• ❌ Credit contributors
• ❌ Review with the product owner
• ❌ Update Release Notes
• ❌ Release

Varbase update type

• ✅ No Update
• ➖ Optional Update
• ➖ Forced Update
• ➖ Forced Update if Unchanged

User interface changes

• N/A

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• N/A