search

cu-uis / cu-starterkit-project

Development repository for Pantheon's recommended (future) Drupal 9+ upstream
1 stars 2 forks source link

Feature - As a Site Builder, I want consistent media handling that displays and performs well on desktop, tablet and mobile devices #23

Open meschenbaum opened 2 years ago

meschenbaum commented 2 years ago

Is your feature request related to a problem? Please describe. Need to provide Media and Media Library support to base CU sites.

Describe the solution you'd like The following modules should be part of the CU Media Bundle:

Advanced modules that could be part of the base.

Additional modules that may enable editors to crop images during upload. However, this would need more work as there are restrictions with using with Responsive Images or by themselves in Drupal 9. This could be setup along with Responsive Images but would need to be set with it's own image styles, which would need its own field for form/display settings.

meschenbaum commented 2 years ago

Setting Media Permissions, beyond the default Administrator permissions, for the following:

meschenbaum commented 2 years ago

Add "view media" permissions for Anonymous and Authenticated Roles.

ISSUE: WebP is considered a missing module, probably because it is still in Beta and does not have an official release yet. There for the only way to install is through Composer. Going to try to add it to upstream configuration to make it available but not enabled.

meschenbaum commented 2 years ago
meschenbaum commented 2 years ago

Was able to add WebP to composer in order to make it available to be installed.

All four modules(Media, Media Library, WebP, Responsive Images) are able to be enabled with defaults and proper permissions.

NOTE: The Responsive Images setup requires Theme knowledge as you need to know breakpoints and what field displays you want to set to use Responsive Images. We should talk how we want this to post-setup to work: Part of Theme install or documentation for endusers.

meschenbaum commented 2 years ago

Steps for testing basic Media functionality:

  1. Install CU Media Bundle.
  2. As a CE, go to admin/content/
  3. There should now be a Media tab, go to that tab (admin/content/media)
  4. Click Add Media
  5. Select Image
  6. Use the "File Chooser" to select a local image file to upload.
  7. A thumbnail image should display and a required field to enter "Alternative text". Enter some text and save the image. a. Expected Result: Image saved successfully and viewable in the Content/Media admin section

media-0 media-1 media-2 media-3

meschenbaum commented 2 years ago

Steps for testing basic Media Library functionality:

  1. Install CU Media Bundle.
  2. As a CE, go to admin/content/
  3. There should now be a Media tab, go to that tab (admin/content/media)
  4. Click Add Media
  5. Select Image
  6. Use the "File Chooser" to select a local image file to upload.
  7. A thumbnail image should display and a required field to enter "Alternative text". Enter some text and save the image. a. Expected Result: Image saved successfully and viewable in the Content/Media admin section
  8. Repeat steps 2-7 to add more items, which can be any Media type and not just images.
  9. Within the Content/Media, you should now see 2 different list views: Table, Grid a. Expected Result: You will see a Table and Grid view with all your uploaded Media.

media-4 media-5

meschenbaum commented 2 years ago

Steps for testing basic Responsive Images functionality:

  1. Install CU Media Bundle.
  2. As a Admin, go to admin/config/media/
  3. There should now be a "Responsive image styles" configuration to manage, go to that config (admin/config/media/responsive-image-style) a. Expected Result: Two Responsive Image Styles to manage: Narrow, Wide.

responsive-images-0

meschenbaum commented 2 years ago

Steps for testing basic WebP functionality:

  1. Install CU Media Bundle.
  2. As a Admin, go to admin/config/media/
  3. There should now be a "WebP settings" configuration to manage, go to that config (admin/config/media/webp/settings) a. Expected Result: Manageable WebP Image quality settings.

webp-0

meschenbaum commented 2 years ago

For testing the display side of Responsive Images and WebP you will further configurations. You need to add the Media Toolbar Button and enable Embed Media filter to the Drupal Text formats and editors.

Additional Configuration:

  1. Adding Media Toolbar button for CKEditor: https://www.drupal.org/docs/core-modules-and-themes/core-modules/media-library-module/embedding-media-with-ckeditor
  2. Setup of Responsive Images: https://www.prometsource.com/blog/how-set-responsive-images-drupal-9-0 a. This needs the Responsive Image Style assigned to an Image Field with a Field Display set to "Responsive Image"
  3. Test through CU Layout Paragraphs a. Install CU Layout Paragraphs and use the Content: Media paragraph type to add media.

Once configuration is complete, to test:

Without CU Layout Paragraphs:

  1. Create a new Basic Page: Add Title, add an image to the Image Field from step 2 above.
  2. Save page a. Expected Result: The page can be visited as any type of user and image displays as expected. b. Expected Result: Viewing source, of the image, you should see an HTML5 <picture> element with many different source elements, with a WebP extension, tied to image styles within breakpoints.

With CU Layout Paragraphs:

  1. Create a new Basic Page: Add Title, add a layout and content media through CU Layout Paragraphs.
  2. Save page a. Expected Result: The page can be visited as any type of user and image displays as expected. b. Expected Result: Viewing source, of the image, you should see an HTML5 <picture> element with many different source elements, with a WebP extension, tied to image styles within breakpoints.

webp-1