Problem/Motivation
In some cases, we have to switch the image ratio on small screens.
Steps to reproduce
One of these cases:
If there is an image with ratio 16:9 on desktop,
And we want to make it 3:4 on mobile.
Until now, there has been no solution for this case.
It will be a great feature if it's added.
Proposed resolution
Suggesting that breakpoints field settings could be managed in the drimage widget:
- List of breakpoints to select from in the widget settings.
- Have a shape config option for each breakpoints (Scale, Ratio ).
- Load the breakpoints in the Drupal Settings to be used.
- The field formatter can manage to have the list of option listed in the data-set for JavaScript to use it.
- Switch in the render with JavaScript to the other shape ratio.
Having a hint of a good solution with "Using attr to set css variable inline"
Example of a Custom responsive ratios developed Bootstrap Utility Classes
ā
Released
Bootstrap Ratio Utilities 1.0.2
https://github.com/Vardot/bootstrap-ratio-utilities#readme
Having Two Bootstrap Ratio Utilities
Responsive ratio utility
Ratio Utility with responsive options, which needed for switching ratios for media breakpoints.
Adds (-sm, -md, -lg, -xl, -xxl) to ratio classes to change the ratio for that brackpoint.
Use the normal ration classes for mobiles which less than -sm
Flip Ratio Utility
Flip Ratio Utility, which is needed for flipping ratios for media breakpoints.
Adds (-flip-xs, -flip-sm, -flip-md, -flip-lg, -flip-xl, -flip-xxl) to ratio classes to change the ratio for that breakpoint
Use the -flip-xs ratio classes for mobiles with less than -flip-sm or -sm in case of using both ratio utilities at the same time
Proposed resolution
Having a hint of a good solution with "Using attr to set css variable inline"
Working on an implementation for this in
š
Fix Layout Builder section rendering original Background Image when no background options, no image styles, or lazy loading are applied
Active
Example of a Custom responsive ratio developed Bootstrap Utility Classes
Override the aspect ratios array to add more ratios.
// Override bootstrap 5 variables
// ----------------------------------------------------------------
// See more about override Bootstrap 5 variables here:
// https://getbootstrap.com/docs/5.0/customize/sass
// https://github.com/twbs/bootstrap/blob/v5.2.3/scss/_variables.scss
// Override aspect ratios array to add more ratios.
$aspect-ratios: (
"1x1": 100%,
"2x1": calc(1 / 2 * 100%),
"3x1": calc(1 / 3 * 100%),
"4x1": calc(1 / 4 * 100%),
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%),
);
ā
Released
Bootstrap Ratio Utilities 1.0.2
https://github.com/Vardot/bootstrap-ratio-utilities#readme
Having Two Bootstrap Ratio Utilities
Responsive ratio utility
Ratio Utility with responsive options, which needed for switching ratios for media breakpoints.
Adds (-sm, -md, -lg, -xl, -xxl) to ratio classes to change the ratio for that brackpoint.
Use the normal ration classes for mobiles which less than -sm
Flip Ratio Utility
Flip Ratio Utility, which needed for flipping ratios for media breakpoints.
Adds (-flip-xs, -flip-sm, -flip-md, -flip-lg, -flip-xl, -flip-xxl) to ratio classes to change the ratio for that brackpoint
Use the -flip-xs ratio classes for mobiles which less than -flip-sm or -sm in case of using both ratio utilities at the same time
š
Add Dynamic Responsive Image (or drimage) module to Varbase Media
Fixed
š
Add the Bootstrap Ratio Utilities package and import the Responsive Ratio Utility in the Base Bootstrap SCSS
Active
š
Add the Responsive Ratio Utility provided by the Bootstrap Ratio Utilities for media video displays with cover images
Active
š
Fix Layout Builder section rendering original Background Image when no background options, no image styles, or lazy loading are applied
Active
Having a hint of a good solution with "Using attr to set css variable inline"
In the buildBackgroundMediaImage
The $style = 'background-image: url(' . $background_url . ');';
could be managed with media selection for each breakpoint
- xs
$style .= '@media (max-width: 576px) {';
$style .= ' background-image: attr(data-bs-xs-bg-image);';
$style .= '}';
- sm
$style .= '@media (min-width: 576px) {';
$style .= ' background-image: attr(data-bs-sm-bg-image);';
$style .= '}';
- md
$style .= '@media (min-width: 768px) {';
$style .= ' background-image: attr(data-bs-md-bg-image);';
$style .= '}';
- lg
$style .= '@media (min-width: 992px) {';
$style .= ' background-image: attr(data-bs-lg-bg-image);';
$style .= '}';
- xl
$style .= '@media (min-width: 1200px) {';
$style .= ' background-image: attr(data-bs-xl-bg-image);';
$style .= '}';
- xxl
$style .= '@media (min-width: 1400px) {;
$style .= ' background-image: attr(data-bs-xxl-bg-image);';
$style .= '}';
And add the "data-bs-xs-bg-image", "data-bs-sm-bg-image", "data-bs-md-bg-image", "data-bs-lg-bg-image", "data-bs-xl-bg-image", "data-bs-xxl-bg-image" data attributes to the section main element ( template, bypassing the selected image style for each breakpoint).
---
It is possible to add an integration with Drimage using this way too
This could be integrated to work with any UI Framework or any set of configured breakpoints
Add field formatter setting for breakpoints named Responsive Aspect Ratios
to allow setting the aspect ratio for selected breakpoints
Remaining tasks
- ā
File an issue
- ā Addition/Change/Update/Fix
- ā Testing to ensure no regression
- ā Automated unit testing coverage
- ā Automated functional testing coverage
- ā UX/UI designer responsibilities
- ā Readability
- ā Accessibility
- ā Performance
- ā Security
- ā Documentation
- ā Code review by maintainers
- ā Full testing and approval
- ā Credit contributors
- ā Review with the product owner
- ā Release notes snippet
- ā Release
API changes
Data model changes
Release notes snippet