Problem/Motivation

The Size summary string Size: %width x %height pixels does not take into account that width and height are optional values (change record). Existing configuration with NULL for either width or height will cause an Exception to be thrown on the Media manage display for instance causing the site to become unusable for administrative users.

The new summary item was added in #2954834: Add poster image to HTML5 media videos.

Additionally this summary item duplicates explicit width and height summary items that are added later and are not displayed when either of those properties are null.

This affects Drupal 11.4 or greater.

Steps to reproduce

For main branch (D12) from scratch:

  1. Install Drupal
  2. Visit Administration > Extend
  3. Enable media module
  4. Visit Administration > Structure > Media types > Edit video
  5. Follow Manage display link
  6. Configure the Video file field
  7. Empty either the width or height, confirm
  8. Save display
  9. WSOD

Existing sites with a (local) Video Media type with width or height set to null in configuration are affected.

UI with a patch without UX improvements applied:

size, width and height are duplicated when all values are provided

Proposed resolution

A WSOD is not displayed to users who do not have a value for Width and/or Height in the File Video Formatter summary when viewing Manage Display by implementing the suggestions from the usability review.

  1. Ensure that width and height are always displayed in the summary and that the non-NULL fallback value of unset is displayed in the summary for empty values.
  2. Remove the Size summary item as this is duplicated information.
  3. Add descriptions to both the Width and Height settings form fields to explain the empty behavior (Option B):
    • Description of Width field: If empty, then the width attribute for the <video> tag is unset.
    • Description of Height field: If empty, then the height attribute for the <video> tag is unset.

Remaining tasks

  • Create a follow-up issue for the Remote video media type to fix the WSOD in the iframe in case the maximum width and/or height field are being cleared, plus adjusting the micro copy on the summary and the format settings to the pattern recommended for this issue.

Questions for Usability Review

  1. Is displaying Width and Height summaries separately as the user had entered them on the form easier to understand than combining them in the summary into one “Size: 640 x 480” line? — Answer: Yes
  2. What term most accurately describes an empty value in the summary? — Answer: unset

User interface changes

The File Video Formatter settings form fields Width and Height have form descriptions to clarify the behavior of empty values.

The Size summary item added in #2954834: Add poster image to HTML5 media videos has been removed.

Introduced terminology

The term unset is introduced to the File Video Formatter summary for width and height to indicate empty values.

API changes

No

Data model changes

No

Release notes snippet

CommentFileSizeAuthor
#10 duplicated-info.png20.58 KBjfauske
#10 both-values-set.png16.03 KBjfauske
#10 width-auto.png13.74 KBjfauske
#10 height-auto.png14.78 KBjfauske
#10 no-values-set.png12.15 KBjfauske

Issue fork drupal-3621776

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mradcliffe created an issue. See original summary.

mradcliffe’s picture

mradcliffe
he/him
Primary language English
commented

I triaged this Major because it would affect existing administrative users who would not have developer experience to debug their site when it is broken:

  • Trigger a PHP error through the user interface, but only under rare circumstances or affecting only a small percentage of all users, even if there is a workaround.
  • Render one feature unusable with no workaround.
mradcliffe’s picture

mradcliffe
he/him
Primary language English
commented
Issue summary: View changes

Confirmed on main branch from install and updated steps to reproduce to be based on those instructions.

Although I think that a Kernel Test that uses a valid configuration without width and height set would allow for a faster test. Something like this:

langcode: en
status: true
dependencies:
  config:
    - field.field.media.video.field_media_video_file
    - media.type.video
  module:
    - file
id: media.video.default
targetEntityType: media
bundle: video
mode: default
content:
  field_media_video_file:
    type: file_video
    label: visually_hidden
    settings:
      controls: true
      autoplay: false
      loop: false
      multiple_file_display_type: tags
      muted: false
      width: null
      height: null
      playsinline: false
      poster: ''
      poster_image_style: ''
    third_party_settings: {  }
    weight: 0
    region: content
hidden:
  created: true
  name: true
  thumbnail: true
  uid: true

mradcliffe opened merge request !17046

mradcliffe’s picture

mradcliffe
he/him
Primary language English
commented
Status: Active » Needs work

I created a kernel test for FileVideoFormatter settingsSummary with 4 test cases. Since it is media type related I put it in the media module.

This should demonstrate the error with valid values for width and height:

  1. Both values set: summary displays "Size", "Width", and "Height" duplicated, but passes tests.
  2. Width is NULL: errors out, but should display Size and Height summary currently. Should display "auto" in the Size summary for width.
  3. Height is NULL: errors out, but should display Size and Width summary currently. Should display "auto" in the Size summary for height.
  4. Width and Height are NULL: errors out, but should only display Size with "auto" set. A more appropriate text should be chosen.

brandonlira made their first commit to this issue’s fork.

brandonlira’s picture

brandonlira commented
Status: Needs work » Needs review

Added a small follow-up commit to MR!17046.

The MR already added coverage for the NULL width/height cases. I added the corresponding formatter change so the Size summary uses "auto" as the fallback when width or height is NULL, matching the expected test coverage and avoiding NULL translation placeholders.

mradcliffe’s picture

mradcliffe
he/him
Primary language English
commented
Issue tags: +Novice, +Rotterdam2026, +Needs issue summary update

Thank you for moving the issue forward, @brandonlira.

The Drupal Contribution Mentoring team is triaging issues for DrupalCon Rotterdam 2026, and we are reserving this issue for Mentored Contribution during the event.

After 2026.10.01 + 1 DAY (UTC), this issue returns to being open to all. Thanks!

I am adding the Novice tag to this issue because I think this can be a good opportunity for a group of new contributors to talk about the user experience (UX) for this formatter summary and come up with a recommendation for reducing the duplicated summary information.

Once a consensus on UX is complete, please update the proposed resolution section of the issue summary summarizing, and then remove the Needs issue summary update tag and possibly add any additional tags such as Needs Usability Review if further discussion is needed by the UX team, which would also be an excellent opportunity for those interested in UX and Usability to join the #ux channel in Drupal Slack to participate in the next UX meeting.

Meanwhile the group can also split out tasks such as manual testing taking before/after screenshots and updating the PHPUnit test and fix with a new proposed resolution.

jfauske’s picture

jfauske commented

I'm at Drupalcon Rotterdam 2026, today I will be working on this issue. My mentor is Youri van Koppen.

jfauske’s picture

jfauske commented
Issue summary: View changes
Issue tags: -Needs issue summary update +Needs usability review
StatusFileSize
new no-values-set.png12.15 KB
new height-auto.png14.78 KB
new width-auto.png13.74 KB
new both-values-set.png16.03 KB
new duplicated-info.png20.58 KB
megachriz’s picture

megachriz
Primary language Dutch
commented

I have been mentoring @jfauske at DrupalCon Rotterdam.

mradcliffe’s picture

mradcliffe
he/him
Primary language English
commented
Issue summary: View changes

@rkoller and I discussed this in Drupal Slack #ux channel. The next step would be to improve the issue summary a little bit for the Usability team to discuss based on the thread in #ux channel. I'll try to summarize that discussion:

  • There was some confusion when I described "auto" because the formatter settings form is a number field that allows an empty value.
  • There was some confusion about the current behavior when the patch is applied.
  • rkoller opined that displaying the width/height dynamically based on whether it has a value or not is supoptimal. “Keeping the list of attributes consistent no matter if a value is provided or not” would reduce cognitive load.

@rkoller also found an accessibility issue with the current admin theme where --admin-color-text-soft property is defined with color #545560 and that is set against a background of #2A2A2D, which is a color contrast of 1.94:1 :O. I think this should be a follow-up because that applies to admin theme, but not Claro theme, and this issue applies to Drupal 11 and 12.

I think there is consensus to not display redundant information and to always display the summary even if Width or Height are empty.

  1. Is displaying Width and Height summaries separately as the user had entered them on the form easier to understand than combining them in the summary into one “Size: 640 x 480” line?
  2. What term most accurately describes an empty value in the summary?

I added those questions to the issue summary.

rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
commented

Usability review

We discussed this issue at #3625965: Drupal Usability Meeting 2026-10-02. The link to the recording: https://www.youtube.com/watch?v=3YHPgdA8q4c. The attendees at the usability meeting were @benjifisher, @rkoller, and @simohell.

At first a few details we've noticed during our exploration and discussion - some of those were already covered in the summary in #12 (thanks to @mradcliff!):

  • There is an odd behavior in the way the dimensions are being displayed for the Size attribute. If the video file has a width of for example 640px and a height of 420px on the field formatter widget form and you clear the value from the height number field and press Update, the Size attribute shows 640 x pixels in the summary. If you clear both number fields instead, the Size attribute becomes x pixels in the summary. After pressing the Save button on the Manage display page the Size attribute changes to 640 x auto pixels for the first example and auto x auto pixels for the second example. And depending on which fields are set and cleared additional redundant attributes lines are being shown. Meaning, with both number fields cleared, you only have the Size attribute shown. With the Width or Height set and the other field unset you get the Size attribute and the attribute of the number field with the set value. With both number fields having a set value you end up with the Size, Width and Height attribute line being shown. That way there is always a potential differing number of attributes with a potential change in order, which increases the cognitive load to the user significantly. In the context of the Size attribute there is also always the question what the first and what the second number stands for, meaning, does the first number stand for the width or the height - at the very least those given values make one think.
  • The term auto is rather generic and ambiguous, raising more questions than it answers. It is a term which is familiar to tech savvy folks in the context of CSS but it might not ring a bell for the broader majority of people and induce misleading assumptions. Plus auto suggests that an actual value is being used for one of the attributes but it looks like, when the width or height field are being cleared the corresponding attribute is actually being removed from the video element instead.
  • On the field format setting widget form, the two number fields have an implicit behavior. It is not directly apparent that it is possible to clear a number field by pressing backspace. In addition to that, it is also not explained what clearing a number field actually entails.
  • During the meeting we've crosschecked if the summary scenario applies to other media types as well. On a brief look it seemed the summary scenario does not apply. For the Image media type the image style attribute is being displayed on the summary containing the dimensions, and the format settings widget only contains a select field for selecting the aforementioned image style. While the Remove video media type displays the attribute for the maximum size displaying the dimensions for the remote video. So we've thought the summary scenario does not apply to any of the media types shipping with the standard profile. But while writing up the summary i've revisited the Remote video media type and it turned out it is possible to set as well as clear the value of the maximum width and the maximum height of the remote video. If one or both number fields are getting cleared it causes a WSOD inside the iframe. With for example the max width value being cleared you are getting the following error inside the iframe: Input value "max_width" cannot be converted to "int"..

The group had a clear consensus on the following recommendations:

  • Don't use the Size attribute in the summary anymore, instead only display the Width and Height attributes all the time.
  • In case one or both number fields are cleared in the field format settings widget, use the term unset in lowercase for the attribute(s) in question in the summary instead of auto.
  • To make things explicit on the field format settings, document that it is possible to clear the Width and/or Height number field. The group came up with the following two options. We haven't had a strong opinion in either direction and leave it up to the people working on the MR which approach to prefer. But we've considered each of the two proposed options small and in scope for the current issue and thought there is no need for the overhead of creating a separate follow-up issue:

    • Option A

      Wrap the two Width and Height number fields into a fieldset with the following title and description:
      title: Attributes for the <video> tag
      description: If either is empty, then that attribute is unset.

    • Option B

      Keep the field format settings form as is and simply add the following two descriptions:
      Description for the Width field:
      If empty, then the width attribute for the <video> tag is unset.
      Description for the Height field:
      If empty, then the height attribute for the <video> tag is unset.

  • Create a follow-up issue for the Remote video media type to fix the WSOD in the iframe in case the maximum width and/or height field are being cleared, plus adjusting the micro copy on the summary and the format settings to the pattern recommended for this issue.

If you want more feedback from the usability team, a good way to reach out is in the #ux channel in Slack.

rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
commented
Status: Needs review » Needs work

oh and forgot to change the status to Needs work

mradcliffe’s picture

mradcliffe
he/him
Primary language English
commented
Issue summary: View changes

Thank you, usability review team.

After I watched the meeting recording the other day, which was very helpful to have, I noticed that Option A would also need to include the poster field in the fieldset because that is a video tag attribute. The description would then need to be more specific to the width and height form fields.

However, I think that given that, we should go with Option B for a simpler change.

I updated the issue summary to contain the usability review, the new proposed resolution. I hid some of the images for now because these no longer apply with the new proposed resolution. Once the merge request is back to Needs review, then if you wanted to @jfauske, you could create new ones, or if you wanted to get started on updating the merge request, you can do that too.

I think now all parts of this issue are Novice so I am leaving the issue tag intact.

Edit: I am going to go ahead and update the test in the merge request since I have the time today.

mradcliffe’s picture

mradcliffe
he/him
Primary language English
commented

Okay, the test in the merge request (MR) is updated with the proposed resolution to resolve the WSOD, and now the MR needs to have all the fixes implemented.