Problem/Motivation

We added bespoke API for checking whether media entity is for an image (confusingly that's called isMediaUrl on the frontend). However, the frontend will need additional information about the media entity:

  1. #3246365: [drupalMedia] Show the Image Media's default alt text that is being overridden

Proposed resolution

Refactor isMediaUrl to more generic API that supplies frontend metadata about media entities. The API should provide frontend the following information:

  1. Whether the media entity contains an image
  2. The media entity default alt text for the media if it contains an image

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

Issue fork drupal-3262492

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:

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

lauriii created an issue. See original summary.

lauriii’s picture

Issue summary: View changes
Wim Leers’s picture

lauriii’s picture

lauriii’s picture

Status: Active » Needs review
Wim Leers’s picture

Status: Needs review » Needs work
Issue tags: +Needs screenshots

Wonderful progress! :D

Review on the MR.

lauriii’s picture

Issue summary: View changes
Status: Needs work » Needs review
Issue tags: -Needs screenshots
FileSize
515.59 KB
Wim Leers’s picture

Having dug into #3245720: [drupalMedia] Support choosing a view mode for <drupal-media>, I now know what additional metadata is needed there: the bundle (i.e. MediaType id) of the embedded media. Because different view modes/displays are available for the content author to choose depending on the bundle.

(This is a relatively new feature in \Drupal\media\Form\EditorMediaDialog for CKEditor 4/other text editors too, see #3097416: When embedding media, don't let authors choose view modes that are not enabled for that media type.)

That could easily happen in that issue after this lands. But … it gives me pause to realize that:

  1. HEAD: response returns TRUE or FALSE to indicate whether it is media of the image bundle/media type
  2. This MR: response returns
    {
      imageMetadata: {
        alt: "blah blah"
      }
    }
    
  3. … then I think it'd be far more logical to update this here to return:
    {
      type: "image",
      metadata: {
        alt: "blah blah"
      }
    }

    👆 This avoids bundle-specific key-value pairs.

lauriii’s picture

#9: What would inform the type on your proposal?

I was thinking of something similar and getting the data from MediaSource id. However, the media system provides a flexibility to create custom source plugins that could be using the image field. For that reason this MR is following what the current implementation does, and check if the source field is \Drupal\image\Plugin\Field\FieldType\ImageItem. I'm wondering if we need that flexibility, but this was implemented based on those earlier assumptions.

Maybe we need to rename imageMetadata since it isn't supposed to be mapped to a specific bundle, or even to a specific MediaSource plugin.

I'm also wondering what would we do in the client if we got response:

{
  type: "file",
  metadata: {
    alt: "blah blah"
  }
}
Wim Leers’s picture

For that reason this MR is following what the current implementation does

Forgot about that :/ So let's clarify this by renaming it to `imageSourceMetadata`?

lauriii’s picture

Status: Needs work » Needs review
Wim Leers’s picture

Status: Needs review » Reviewed & tested by the community
  1. There's no doubt that this is a huge step forward for code organization, understandability and preparedness for the future.
  2. I do think that there is still too much nesting of anonymous functions going on, which makes it harder to understand what the different concerns are that are being handled (especially in drupalmediaediting.js). But! This is a pre-existing problem. This is significcant progress. And it blocks a stable blocking issue. Therefore this should not hold up this issue. And … we already have an issue for that: #3248432: [drupalImage] Split DrupalImageEditing into multiple plugins.

So: 🚢

bnjmnm’s picture

Status: Reviewed & tested by the community » Needs work
FileSize
745.1 KB

I switched to this branch then added a media item in the editor. The media element toolbar is not available, just this white arrow. I didn't investigate much beyond that, but when I switch back to HEAD there isn't an issue.

  • I get the expected element toolbar if I load a node with already present in the field, this is specific to when it is added.
  • If switch to source editing and add an alt tag then switch back, the media then has the expected element toolbar
Wim Leers’s picture

Huh! I definitely did not find that in my manual testing … will try to reproduce. @lauriii, did you ever see this? :O

lauriii’s picture

Status: Needs work » Needs review

Good catch @bnjmnm! Was able to reproduce. Added test coverage and fixed the bug.

Wim Leers’s picture

Status: Needs review » Reviewed & tested by the community
FileSize
484.13 KB
214.55 KB

Reproduced by only looking at the test coverage that @lauriii added.

I don't see the white arrow that @bnjmnm is referring to, but I do see that the ability to override alt for image media was missing in HEAD for freshly inserted media. The fix in https://git.drupalcode.org/project/drupal/-/merge_requests/1787/diffs?co... makes sense too: rather than only handling the fetching of metadata upon upcasting (i.e. for existing media embeds), we now do it also immediately after inserting new media embeds.

Before
 no button to override alt.
After
 button to override alt present.
bnjmnm’s picture

Status: Reviewed & tested by the community » Needs work

Setting to NW for visibility on my MR feedback. Most of it is my usual "add too many docs plz" 🙂

lauriii’s picture

Status: Needs work » Needs review
lauriii’s picture

Status: Needs review » Reviewed & tested by the community

Moving back to RTBC to get feedback from @bnjmnm 😇

bnjmnm’s picture

All my feedback has been addressed. I'll plan to commit after the commit freeze. In the meantime, patches for 9.3 / 10.0 as needed are welcome!

lauriii’s picture

Uploading patches for the MR

The last submitted patch, 22: 3262492-22-d10.patch, failed testing. View results

Wim Leers’s picture

Status: Reviewed & tested by the community » Needs work

Looks like a legitimate failure on D10:

1) Drupal\Tests\ckeditor5\Functional\MediaEntityMetadataApiTest::testApi
Exception: Deprecated function: preg_match(): Passing null to parameter #2 ($subject) of type string is deprecated
Drupal\Component\Uuid\Uuid::isValid()() (Line: 28)
lauriii’s picture

Status: Needs work » Needs review
FileSize
91.67 KB
91.53 KB
lauriii’s picture

Status: Needs review » Reviewed & tested by the community

Moving back to RTBC because the change from #24 was trivial https://git.drupalcode.org/project/drupal/-/merge_requests/1787/diffs?co....

Wim Leers’s picture

+1, RTBC++

  • bnjmnm committed 1f58a01 on 10.0.x
    Issue #3262492 by lauriii, Wim Leers: Refactor isMediaUrl to more...

  • bnjmnm committed a2c7e7b on 9.4.x
    Issue #3262492 by lauriii, Wim Leers: Refactor isMediaUrl to more...

  • bnjmnm committed d7b0dad on 9.3.x
    Issue #3262492 by lauriii, Wim Leers: Refactor isMediaUrl to more...
bnjmnm’s picture

Version: 9.4.x-dev » 9.3.x-dev
Status: Reviewed & tested by the community » Fixed

Added to 9.4.x / 10.0.x and backported to 9.3.x since CKEditor 5 is experimental.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.