Multimedia Tips and Tricks
Multimedia Tips and TricksThis 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 BuilderUseful 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 BuilderLayout 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:
- Layout Builder Operation Link
Add a 'Layout' link to content entities in the Content listing view
Creating an Accessible Media Library Photo Gallery
Creating an Accessible Media Library Photo GalleryMedia 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
- Edit your Media type and switch to the Manage display tab
- Move the Thumbnail and Name fields up above the "Disabled" separator, but leave Image enabled as well.
- Configure the Thumbnail settings as desired, then configure Image with the "URL to image" format pointing to the "original image".
- 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 MediaScott 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.
-
Add the OEmbed Providers module
-
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) -
Add a provider bucket (
/admin/config/media/oembed-providers/buckets
)-
Check the option Allowed Providers "MediaSpace @ Georgia Tech"
-
-
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.
-
-
Add your oEmbed media link to a Media type (
/media/add/
) -
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%; }
-
-
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.
-
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.)