Multimedia Tips and Tricks

Multimedia Tips and Tricks kp37
Drupal Version

This section houses guides, tips, and tricks for working with multimedia (video, audio, etc.) in Drupal, whether through the Drupal 8/9 Media library system, or through other means.

Drupal 10 Layout Builder

Drupal 10 Layout Builder
Category
kp37
Drupal Version

Useful modules

List of potentially useful Layout Builder Extensions within the Layout Builder Ecosystem:

  • Layout Builder Restrictions
    Lets you restrict which block types appear in Layout Builder's Add Block panel - very useful
  • Layout Builder Modal
    This module lets you add and configure existing blocks in a modal in the Layout Builder UI.
  • Layout Builder Styles
    This module allow site builders to select from a list of styles to apply to layout builder blocks and layout builder sections.
  • Layout Builder Kit
    An assortment of pre-built block types for use with Layout Builder

  • Layout builder library
    Provides a layout library allowing content editors to pick from a list of pre-defined layouts.

Please see the Drupal 8 documentation for a complete list of contributed modules compatible with Layout Builder.

Local modules

Locally written modules:

Creating an Accessible Media Library Photo Gallery

Creating an Accessible Media Library Photo Gallery
Category
kp37
Drupal Version

Media Library in Drupal 10 offers a lot of great functionality for managing and reusing images (and other media types), but out-of-the-box it has a notable accessibility issue.

If you try to configure an image media type so that the user can select the thumbnail image and get the full-size version, the option for this (setting "Link image to" to "File") gives you only a link around the image, with no way to include the media item's built-in Name field.  Worse, the link will be presented to screen readers with the image's alternate text, which may not be appropriate for link text, and training content managers on how to handle this special usage of the alternate text field would be an uphill battle.

Correcting this problem requires both changing your media type configuration and adding a custom template:

Media Type Configuration

  1. Edit your Media type and switch to the Manage display tab
  2. Move the Thumbnail and Name fields up above the "Disabled" separator, but leave Image enabled as well.
  3. Configure the Thumbnail settings as desired, then configure Image with the "URL to image" format pointing to the "original image".
  4. Save your changes.

Custom Template Configuration

First, create a template file named "media--XXXXX--default.html.twig" where "XXXXX" is the machine name of your Media Type.  Place the following inside it:

{%
  set classes = [
    'media-library-item',
    'media-library-item--grid',
  ]
%}

<div{{ attributes.addClass(classes) }}>
  <a href="{{ content.field_media_image.0['#markup'] }}">
    {{ content.thumbnail }}
    <span class='visually-hidden'>Full Size Version of Image "</span> {{ content.name }} <span class='visually-hidden'>"</span>
  </a>
</div>

If you put your template into a sub-theme, then just flush your caches and it should take effect.  If you put your template into a module, then add the following to your .module file:

function YYYYY_theme($existing, $type, $theme, $path) {
  return [
    'media__XXXXX__default' => [
      'base hook' => 'media',
    ],
  ];
}

Replace "XXXXX" with the machine name of your media type, and replace "YYYYY" with the machine name of your module.  Flush your caches, and the template should take effect.

Enabling Georgia Tech MediaSpace as an oEmbed Provider in Media

Enabling Georgia Tech MediaSpace as an oEmbed Provider in Media kp37
Drupal Version

Scott Jacobson, Desmond Gardfrey, and Eric Sembrat were able to get Georgia Tech's MediaSpace working as an oembed provider for Drupal media.  Below is the method they developed.

  1. Add the OEmbed Providers module

  2. Add a custom provider (/admin/config/media/oembed-providers/custom-providers). The provider name must be entered as MediaSpace @ Georgia Tech with the '@' symbol in the middle.

    Provider Name: MediaSpace @ Georgia Tech
    Provider URL: https://mediaspace.gatech.edu
    Endpoint #1 - Endpoint schemes: https://mediaspace.gatech.edu/id/*
    Endpoint #1 - Endpoint URL: https://mediaspace.gatech.edu/oembed
    Endpoint #1 - Discovery: (Select this checkbox)
    Endpoint #1 - Available formats: JSON (Select this checkbox)

    ''

  3. Add a provider bucket (/admin/config/media/oembed-providers/buckets)

    • Check the option Allowed Providers "MediaSpace @ Georgia Tech"

  4. Add a media type of MediaSpace @ Georgia Tech (/admin/structure/media/add)

    • Select Media source MediaSpace @ Georgia Tech and select the Save button.  The field mapping is unnecessary unless you want to override something.

  5. Add your oEmbed media link to a Media type (/media/add/)

  6. To add Media within CKEditor:

    • Add the "insert from media library" button to one of the CKEditor toolbar text formats (/admin/config/content/formats)

      • Make sure that the embed code is wrapped in CSS like <div class="video-container"></div> when entered via CKEditor.

    • Add the following CSS via your custom theme or a custom module:
      .video-container { position: relative; overflow: hidden; width: 100%; }
      .video-container::after {​​​​​​​ display: block; content: ""; padding-top: 56.25%; }​​​​​​​
      .video-container iframe {​​​​​​​ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }​​​​​​​
  7. You could also make a custom block type with a TWIG file, wrapping the embed in <div class="video-container"></div> and adding the above CSS to your custom theme or a custom module.

  8. To Be Determined:  How to add the MediaSpace @ Georgia Tech provider to the custom block types Call to Action and Video Embed.  (Editor's note: This should be doable by modifying the existing media types used by those blocks and adding the provider as an Allowed Provider.)