Switching ratio on small screens

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

Override 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%),
);

📌 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 manged with media selection for each breakpoints

• 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, by passing the selected image style for each breakpoints).

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

Hi, I'm also interested on a solution to enable different crop types based on screen size/orientation.

Hi, I'm experimenting with an hardcoded JS workaround. I've created two "background" crop types (landscape and portrait). If on the field formatter one of those preset is enabled, then on the JS i simply check the window size and eventually swap the crop type.

This is a simple example code I've put on drimage.js on Drupal.drimage.renderEl before setting the imgUrl variable:

if (iwc == "crop_landscape_background" || iwc == "crop_portrait_background"){
  if (window.innerHeight < window.innerWidth) {
    iwc = 'crop_landscape_background';
  }
  if (window.innerHeight > window.innerWidth) {
    iwc = 'crop_portrait_background';
  }
}

This approach is quite simple and it only needs a "portrait crop style" setting on the field formatter in order to be more dynamic instead of hardcoded.

What do you think? It could be an easy solution until a more flexible solution will be implemented. Let me know.

The field_widget / field_formatter implementation is in my opinion the only correct way forward for this.

I will close this issue since there is lack of development on this feature. (and I personally do not have a need for it)
If this changes, do not hesitate to ask my to reopen this issue, or start a new one.
This could also be done in another contrib module.

Noted;
Thank you, Wesley, your direction is taken. ( it is a field formatter setting for breakpoints )
and thanks a lot for the idea of Drimage, BBC, CNN, and more are using this idea

Moving our focus for more improvements in Drimage Improved →
✨ Add Responsive Aspect Ratios Active