Problem/Motivation
Canvas image shapes require resolving image URLs into a structured Drimage data array.
The current image rendering in image.twig expects a helper that converts Canvas-provided URLs into Drimage-compatible data, but such helper is not available in Varbase Media.
This results in:
- Canvas image shapes not rendering correctly
- Missing responsive image handling
- Inconsistent image rendering between Canvas and normal media usage
- Twig logic duplication when attempting to resolve Drimage data
Steps to reproduce
- Use a Canvas component that renders an image shape.
- Pass an image URL from Canvas data.
- Render using
image.twig. - Image data is not resolved into Drimage format.
- Image rendering fails or lacks responsive behavior.
Proposed resolution
Provide a new Twig helper:
varbase_media_drimage()The helper:
- Accepts Canvas image URL input
- Resolves media/file reference
- Builds Drimage-compatible data array
- Returns structured image data for
image.twig
This allows image.twig to consistently render Canvas images using Drimage.
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 and Update Helper on new feature change/addition
- ❌ Release varbase-11.0.0-alpha1, varbase_starter-1.0.0-alpha1, varbase_media-11.0.0-alpha1
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
- feat: #3587340 Add Twig helper to resolve Canvas image URLs to Drimage data
Comments
Comment #3
rajab natshahComment #4
rajab natshahComment #6
rajab natshah✅ Released varbase_media-11.0.0-alpha1