Add suggestions for files by media's view mode

Created on 2 April 2023, over 1 year ago
Updated 21 February 2024, 10 months ago

Problem/Motivation

I would like to get template suggestions for files in embedded media.

Currently the page source shows the following:

<div class="w3-row field field--name-body field--type-text-with-summary field--label-hidden w3-bar-item field__item">

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'media' -->
<!-- FILE NAME SUGGESTIONS:
   * media--source-video-file.html.twig
   * media--video--background-splash-video.html.twig
   * media--video.html.twig
   * media--background-splash-video.html.twig
   x media.html.twig
-->
<!-- BEGIN OUTPUT from 'core/modules/media/templates/media.html.twig' -->
<div class="align-center">

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'field' -->
<!-- FILE NAME SUGGESTIONS:
   * field--media--video--field-media-video-file--background-splash-video.html.twig
   * field--media--field-media-video-file--background-splash-video.html.twig
   * field--field-media-video-file--background-splash-video.html.twig
   * field--media--field-media-video-file--video.html.twig
   * field--media--field-media-video-file.html.twig
   * field--media--video.html.twig
   * field--field-media-video-file.html.twig
   * field--entity-reference-type--file.html.twig
   * field--file.html.twig
   x field.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/contrib/d8w3css/templates/field/field.html.twig' -->

  <div class="w3-row field field--name-field-media-video-file field--type-file field--label-visually_hidden">
    <label class="field__label visually-hidden">Video-Datei</label>
              <div class="w3-bar-item field__item">

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'file_video' -->
<!-- BEGIN OUTPUT from 'core/modules/file/templates/file-video.html.twig' -->
<video autoplay="autoplay" loop="loop" muted="muted" width="640" height="480"><source src="/sites/default/files/2023-04/schweiz-117995.mp4" type="video/mp4"></source></video><!-- END OUTPUT from 'core/modules/file/templates/file-video.html.twig' --></div>
          </div>

<!-- END OUTPUT from 'themes/contrib/d8w3css/templates/field/field.html.twig' -->

The video file doesn't get template suggestions by view mode.

Please add template suggestions for files by the media's view mode the file belongs to.

Feature request
Status

Active

Version

1.0

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @drupaldope
  • leymannx Berlin

    Suggestion based on what? As you can see in your output you can use file-video.html.twig. What other suggestion based on what would you need on top?

  • Status changed to Postponed: needs info over 1 year ago
  • Status changed to Active over 1 year ago
  • leymannx Berlin

    Ah sorry, it's in the issue title. You want a template suggestion for the file based on the media's view mode.

  • yes, thank you :)

    additionally to file-video.html.twig there should be things such as:

    file-media-video.html.twig
    file-media-viewmode-video.twig

    or similar

  • leymannx Berlin

    We would need to find a way to pass the view mode from the media entity down to the file. Not sure if that's possible easily.

  • 🇪🇨Ecuador jwilson3

    This can be done by passing down the view mode via data attributes from the field template preprocess and then removing the data attribute in the file_video template suggestion hook.

    function HOOK_theme_suggestions_file_video_alter(array &$suggestions, array $variables) {
    
      // Check if there's a view mode available.
      if (!empty($variables['attributes'])) {
        /** @var \Drupal\Core\Template\Attribute $attrs */
        $attrs = $variables['attributes'];
        if ($attrs->hasAttribute('data-view-mode')) {
          /** @var \Drupal\Core\Template\AttributeString $view_mode */
          $view_mode = $attrs->storage()['data-view-mode'];
          $attrs->removeAttribute('data-view-mode');
          // Sanitize the view mode name to use it in the template suggestion.
          $view_mode_sanitized = str_replace('.', '_', $view_mode);
          // Add the new suggestion with the view mode name.
          $suggestions[] = 'file_video__' . $view_mode_sanitized;
        }
      }
    }
    
    function HOOK_preprocess_field__file(&$variables) {
      if (
        $variables['element']['#formatter'] == 'file_video'
        && !empty($variables['element']['#view_mode'])
      ) {
        foreach (Element::children($variables['element']) as $key => $value) {
          if ($variables['element'][$key]['#theme'] == 'file_video') {
            $attrs = &$variables['element'][$key]['#attributes'];
            $attrs->setAttribute('data-view-mode', $variables['element']['#view_mode']);
          }
        }
      }
    }
    

Production build 0.71.5 2024