Contrib.social

Add Media SDC components with support for UI Patterns

Open on Drupal.org →
Created on 1 November 2023, 8 months ago

Problem/Motivation

  • Having no SDC components for media types
  • Having no Storybook's stories for displays of media types
  • Having no UI Patterns for view modes and Aspect Rations
  • Having no UI Patterns for media fields

Proposed resolution

Add Dynamic Responsive Ratio

Add Entity media pattern variations of components

name: Entity Media Image
description: Entity Media Image component and pattern with content.

name: Entity Media Local Video
description: Entity Media Local Video component and pattern with content.

name: Entity Media Remote Video
description: Entity Media Remote Video component and pattern with content.

name: Entity Media Audio
description: Entity Media Audio component and pattern with content.

name: Entity Media File
description: Entity Media File component and pattern with content.

name: Entity Media Gallery
description: Entity Media Gallery component and pattern with content.

📌 Improve Varbase Media view modes with UI Patterns and SDC components Active

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

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
  • ➖ UX/UI designer responsibilities
  • ➖ 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 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

  • N/A
📌 Task
Status

Active

Version

2.0

Component

Code

Created by

🇯🇴Jordan Rajab Natshah 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