Problem/Motivation

- We have inline images established in the POC (https://olivero-poc.netlify.com/), however, we need to account for default styling of other types in the Olivero theme as well.

Proposed resolution

- When the core Media module is enabled, the following media types should be able to be inserted within the ckEditor and inherits default styling.

  • Document
  • Image
  • Audio file (local)
  • Video file (local)
  • Remote video

- Editors should be able to place the inline media asset (image, video, etc) in left, right, or center alignment. Please take a look at the POC (https://olivero-poc.netlify.com/) for how the caption style should be treated.

Additional Info

- This work is related to this issue - https://www.drupal.org/project/olivero/issues/3115194.

User interface changes

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#7 3117239-5-update.patch9.09 KBproeung
#7 Drupal_9__The_Most_Beautiful_CMS_Ever_____My_Drupal_8_Site.jpg215.47 KBproeung
#5 Снимок экрана 2020-03-31 в 18.34.24.png31.44 KBkostyashupenko
#5 Снимок экрана 2020-03-31 в 18.33.39.png21.31 KBkostyashupenko
#5 3117239-5.patch12.21 KBkostyashupenko
#4 Снимок экрана 2020-03-31 в 18.27.05.png25.38 KBkostyashupenko
#4 Снимок экрана 2020-03-31 в 18.26.55.png83.28 KBkostyashupenko
#4 3117239-4.patch12.41 KBkostyashupenko

Comments

proeung created an issue. See original summary.

proeung’s picture

proeung
she/her
commented
Issue tags: +olivero-sprint-d
kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Assigned: Unassigned » kostyashupenko
kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Assigned: kostyashupenko » Unassigned
Status: Active » Needs review
StatusFileSize
new 3117239-4.patch12.41 KB
new Снимок экрана 2020-03-31 в 18.26.55.png83.28 KB
new Снимок экрана 2020-03-31 в 18.27.05.png25.38 KB

-

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
StatusFileSize
new 3117239-5.patch12.21 KB
new Снимок экрана 2020-03-31 в 18.33.39.png21.31 KB
new Снимок экрана 2020-03-31 в 18.34.24.png31.44 KB

Couple issues i found:
1.
Media document
2.
Media audio

I guess we need to improve display of Document media somehow)
Also <audio> has different styling in all browsers. On my screen it is Google Chrome, where audio has rounded corners. It doesn't look really good with <figcaption> under, which has light gray background. Proposals/ideas?

proeung’s picture

proeung
she/her
commented

@kostyashupenko Thanks for picking up this ticket and submitting a patch! As for your question, I do agree that we probably need some design guidelines for the inline PDF link and the audio elements. Feels like we can follow this up in another ticket for design QA. @jwitkowski79 let me know what you think.

In the meantime, I'll make sure to review your patch and follow-up with any feedback. Thanks for all of the work you've contributed to this project!

proeung’s picture

proeung
she/her
commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new Drupal_9__The_Most_Beautiful_CMS_Ever_____My_Drupal_8_Site.jpg215.47 KB
new 3117239-5-update.patch9.09 KB

@kostyashupenko I have to re-rolled/rebased your patch in order to fix a few merge conflicts and aligning the patch with the latest codebase. I tested the media insert and everything is looking great with the exception of what we discussed above. I'll follow up with creating a design ticket that will address the styling concerns of the PDF and Audio media types.

Missing pdf styling

Please see attached for the re-roll patch that has been reviewed and merged into the `dev` branch.

proeung’s picture

proeung
she/her
commented
Status: Reviewed & tested by the community » Fixed
proeung’s picture

proeung
she/her
commented
Related issues: +#3124839: Olivero Design: Determine design treatment for the Document media type
proeung’s picture

proeung
she/her
commented

Follow up design issue #3124839: Olivero Design: Determine design treatment for the Document media type

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.