Contrib.social

Add Responsive Aspect Ratios

Open on Drupal.org ā†’
Created on 19 June 2024, about 1 year ago

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 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 with less than -flip-sm or -sm in case of using both ratio utilities at the same time

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

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

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

  • N/A

Data model changes

  • N/A

Release notes snippet

  • N/A
āœØ Feature request
Status

Active

Version

1.0

Component

Code

Created by

šŸ‡ÆšŸ‡“Jordan Rajab Natshah Jordan

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024