Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
Requested by Razem
Require this new Drimage Improved module instead of Drimage in Varbase Media.
#3283460: Why rely on Drupal routes to serve generated images for every request?
Proposed resolution
- #3451094: Switch from Drimage to Drimage Improved in Varbase Media
- Update the Dynamic Responsive Image component to support the Drimage Improved module
Change dependencies in library Overrides from drimage/drimage to drimage_improved/drimage_improved
Change data-drimage_improved to data-drimage as it was changed in Driamge Improved
Dynamic Responsive Image
Varbase Components implementation to display a dynamic responsive image
Generate (nearly) perfectly scaled (or cropped) images on-the-fly assumes the width of images is set in CSS, either directly in the wrapper-div or inherited through a parent element. Any grid system will do just fine for this.
This is an implementation for single directory component for the Dynamic Responsive Image (or drimage) module.
Created by Wesley Sandra (weseze)
Generate (nearly) perfectly scaled (or cropped) images on-the-fly assumes the width of images is set in CSS, either directly in the wrapper-div or inherited through a parent element. Any grid system will do just fine for this.
This is an implementation for single directory component for the Dynamic Responsive Image (or drimage) module.
Created by Wesley Sandra (weseze)
Properties:
url: An optional URL the image can be linked to.
width: The original width of the image.
height: The original height of the image.
alt: The alt text for the image.
data: json encoded drimage data object
utility_classes: Use to add extra Bootstrap utility classes for the main wrapper.
attributes:
item_attributes: HTML attributes for the item wrapper element.
picture_source_attributes: HTML attributes for the picture source element.
picture_img_attributes: HTML attributes for the picture image element.
url_attributes: HTML attributes for the URL element.
noscript_img_attributes: HTML attributes for the No JavaScript Image element.
slots:
N/A
Heroslider
- Change
Drupal.drimage.inittoDrupal.drimage_improved.initin the Heroslider component.
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
Added Dynamic Responsive Image (Drimage) – Improved to the list of used modules in Varbase Media doc page
- ➖ 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-10.0.0, varbase_components-2.0.0
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
- Issue #3451135: Switched from Drimage to Drimage Improved in Varbase Components
Issue fork varbase_components-3451135
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #4
rajab natshahComment #5
rajab natshahComment #6
rajab natshahComment #7
rajab natshahComment #8
rajab natshahComment #10
rajab natshahComment #11
rajab natshahComment #12
rajab natshahComment #13
rajab natshah✅ Released varbase_components-2.0.0
Comment #14
rajab natshahComment #15
rajab natshahComment #16
rajab natshah✅ Automated unit/functional testing coverage
✅ Developer Documentation support on feature change/addition
Added Dynamic Responsive Image (Drimage) – Improved to the list of used modules in Varbase Media doc page
Comment #18
rajab natshah✅ Release varbase-10.0.0