Contrib.social

Add the Responsive Ratio Utility provided by the Bootstrap Ratio Utilities for media video displays with cover images

Open on Drupal.org →
Created on 13 September 2023, 10 months ago
Updated 5 October 2023, 9 months ago

Problem/Motivation

Bootstrap ~5.3.0 only has a fixed ratio for all media and screes sizes

Varbase Media has:

  • Images
  • Local videos with cover images
  • Local videos no cover images
  • Remote videos with cover images
  • Remote videos no cover images

Proposed resolution

Vartheme BS5 and Varbase Components are using the following default aspect ratios 

// Override bootstrap ~5.3.0 variables
// ----------------------------------------------------------------

// See more about override Bootstrap ~5.3.0 variables here:
// https://getbootstrap.com/docs/5.3/customize/sass
// https://github.com/twbs/bootstrap/blob/v5.3.1/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%),
);

As of 📌 Add Dynamic Responsive Image (or drimage) module to Varbase Media Fixed
Having the following in the default media configs

ratio ratio-1x1
ratio ratio-2x1
ratio ratio-3x1
ratio ratio-4x1
ratio ratio-4x3
ratio ratio-4x3 ratio-16x9-sm
ratio ratio-4x3 ratio-21x9-sm

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
  • ➖ 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-beta2 → , varbase_media-10.0.0-beta2 →

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 #3386986 → by Ahmad Abbad → : Added the Responsive Ratio Utility provided by the Bootstrap Ratio Utilities for media video displays with cover images
📌 Task
Status

Fixed

Version

10.0

Component

Code

Created by

🇯🇴Jordan Ahmad Abbad Jordan

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

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024