Contrib.social

drupal-media tag data-entity-type attribute does not distingish the data entity type

Open on Drupal.org →
Created on 25 October 2024, 9 months ago

Problem/Motivation

Whenever media is inserted in the WYSIWYG, the resulting code presents the data entity type as "media". This makes it impossible to tell from the code what the actual media type is. "media" it's not useful information because we already know it's media from the drupal-media tag. The data-entity-type attribute would properly distinguish the type of media.

Steps to reproduce

  1. Go to simplytest.me
  2. In the search field, specify Drupal.
  3. Choose Drupal core.
  4. Click the button to create the website.
  5. Log into the website.
  6. Click Manage, then Extend.
  7. In the search field, type media.
  8. Enable the Media and Media library modules.
  9. Under Manage, click Configuration.
  10. Click Text formats and editors.
  11. On the row for Full HTML, click Configure.
  12. Drag the picture icon out of the active icons.
  13. Drag the media icon into the active icons.
  14. Under enabled folders, check Embed media.
  15. Under filter settings, leave "Media types selectable in the Media Library" unchecked.
  16. Click Save configuration.
  17. Under Manage, click Content.
  18. Click Add content.
  19. Click Basic page.
  20. Type a page title.
  21. Below the Body field WYSIWYG, select Full HTML.
  22. In the Body field WYSIWYG toolbar, use the Media icon in turn to insert an image, an audio file, a document, an external video, and an uploaded video.
  23. In the Body field WYSIWYG toolbar, click Source.

Expected result:

<drupal-media data-entity-type="image" data-entity-uuid="[unique ID]">&nbsp;</drupal-media>
<drupal-media data-entity-type="audio" data-entity-uuid="[unique ID]">&nbsp;</drupal-media>
<drupal-media data-entity-type="document" data-entity-uuid="[unique ID]">&nbsp;</drupal-media>
<drupal-media data-entity-type="external video" data-entity-uuid="[unique ID]">&nbsp;</drupal-media>
<drupal-media data-entity-type="video" data-entity-uuid="[unique ID]">&nbsp;</drupal-media>

Actual result:

<drupal-media data-entity-type="media" data-entity-uuid="[unique ID]">&nbsp;</drupal-media>
<drupal-media data-entity-type="media" data-entity-uuid="[unique ID]">&nbsp;</drupal-media>
<drupal-media data-entity-type="media" data-entity-uuid="[unique ID]">&nbsp;</drupal-media>
<drupal-media data-entity-type="media" data-entity-uuid="[unique ID]">&nbsp;</drupal-media>
<drupal-media data-entity-type="media" data-entity-uuid="[unique ID]">&nbsp;</drupal-media>

The impact of this issue is that there is no way in Views to filter on media type. Therefore, if I want to return all pages that have the image media type, I will get false positives on pages that only have the other media types.

Proposed resolution

Option 1: Change the value of data-entity-type to contain the actual media type.
Option 2: Add a new attribute to the Drupal media tag to contain the actual media type.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Active

Version

11.0 🔥

Component

media system

Created by

🇺🇸United States charles belov San Francisco, CA, US

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

Comments & Activities

  • Issue created by @charles belov
  • Comment 9 months ago →
    🇺🇸United States charles belov San Francisco, CA, US
  • Comment 9 months ago →
    cilefen
  • Comment 3 months ago →
    🇮🇳India Sreenivas Bttv

    This is an essential feature, particularly when working with the Decoupled Drupal approach. When using GraphQL to fetch the body value, there is currently no way to identify <drupal-media> as either an Image or Remote Video. I believe it would be appropriate to keep the data-entity-type attribute set to "media." However, we also need an additional attribute, such as drupal-media-bundle, to specify whether the media is an image, remote video, audio, document, etc. This would assist the html-react-parser in identifying the bundle and replacing it with the correct component within JavaScript frameworks.

  • Comment 3 months ago →
    🇺🇸United States charles belov San Francisco, CA, US

    Corrected "external-video" to not have a space.

  • Comment 3 months ago →
    🇺🇸United States charles belov San Francisco, CA, US

    Incorporating @sreenivas-bttv comment, which also has the advantage of backwards compatibility.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024