Add Dynamic Responsive Image (or drimage) module to Varbase Media

Created on 26 September 2022, about 2 years ago

Updated 4 June 2023, over 1 year ago

Problem/Motivation

drimage 2.1.0 was released on 6 Oct 2022 by weseze →
https://www.drupal.org/project/drimage/releases/2.1.0 →

Thank you, Wesley.

Proposed resolution

Add into the composer.json file.
Enable it by default in Varbase Media module.
Add a starter list of Aspect Ratios
- The default set of ratios for Image Media type:
  - Media 1:1
  - Media 2:1
  - Media 3:1
  - Media 4:1
  - Media 4:3
  - Media 16:9
  - Media 21:9
- The default set of ratios for Video Media type:
  - ---
  - Media 1:1: Only cover image or thumbnail - No Player
  - Media 2:1: Only cover image or thumbnail - No Player
  - Media 3:1: Only cover image or thumbnail - No Player
  - Media 4:1: Only cover image or thumbnail - No Player
  - Media 4:3: Only cover image or thumbnail - No Player
  - Media 16:9: Only cover image or thumbnail - No Player
  - Media 21:9: Only cover image or thumbnail - No Player
  - →
  - ---
  - Autoplay : Autoplay on load of the page for one time.
  - Autoloop : Autoplay and keep looping.
  - Looping: On click to play, the video will keep looping.
  - ---
  - Media Video 1:1 : Load Varbase Video Player
  - Media Video 2:1 : Load Varbase Video Player
  - Media Video 3:1 : Load Varbase Video Player
  - Media Video 4:1 : Load Varbase Video Player
  - Media Video 4:3 : Load Varbase Video Player
  - Media Video 16:9 : Load Varbase Video Player
  - Media Video 21:9 : Load Varbase Video Player
  - →
- For the CKEditor:
  - Large (Full width)
  - Medium (1/2 of width)
  - Small (1/4 of width)
  - Original
- Other media view modes:
  - Default
  - Background media
- Only for admin use:
  - Field Preview
  - Media Library
  - Entity Browser Preview
Add the ImageAPI Optimize WebP → module
Remove all old configs for Media Display sizes ( Size 1, Size 2, ... Size 12) , which uses the Responsive Image Styles and all shapes
Remove all old configs for Responsive Image Styles ( Display 1, Display 2, .... Display 12) and all shapes

Follow with Bootstrap 5 Aspect ratios
And add more CSS rations too to match with working rations on Videos and cover images In Vartheme BS5

// stylelint-disable function-disallowed-list
// scss-docs-start aspect-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%),
) !default;
// scss-docs-end aspect-ratios
// stylelint-enable function-disallowed-list

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 (or drimage) to Varbase Media
➖ 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-alpha1 → , varbase_media-10.0.0-alpha1 →