4

Background

I have a multiple-value entity reference field with target type = media. It is used for "document" media, so mostly pdf files.

I am using the "Media library" widget shipped with core. With this widget, items appear in a grid with thumbnail, and can be reordered with drag + drop.

Problems

Most of the pdf files don't have a useful thumbnail, so they all look the same.

Due to the grid display, the title of each document is not fully visible.

The grid drag + drop reorder is less intuitive than a tabledrag, especially if the thumbnails all look the same, and sometimes even the visible part of the title is the same.

Once a media entity is added to the list, there is no link to edit this media entity from the node / host entity form.

Questions

Is there a table version of the media library widget?

Is there a way to show an edit link with each item? Either to edit the media in a form on a new page, or in a popup.

What I tried

Widget settings?
-> The widget does not have any settings.

Configure the display of documents in "Core | Media library" view mode?
-> Items still displayed in a grid.
-> The only field that looks well in a grid mode is the thumbnail. Text fields look weird.

References

Poor soul who asked the same in drupal.org, with no success: https://www.drupal.org/forum/support/module-development-and-code-questions/2020-06-29/how-set-media-library-widget-to

4
  • I added Media Entity Browser for this reason. It will bring back the edit dialog when double clicking a media item.
    – Kevin
    Commented Feb 21, 2021 at 23:47
  • I ended up making a subclass of core MediaLibraryWidget. It was enough to override formElement() and preRenderWidget() to do some custom modifications. I replaced the 'selection' with a '#theme' => 'table' with tabledrag, similar to template_preprocess_field_multiple_value_form(). I might publish this, and then post an answer.
    – donquixote
    Commented Feb 22, 2021 at 22:05
  • I also tried "Entity Browser", but it seemed I need too many modules to achieve the desired result.
    – donquixote
    Commented Feb 22, 2021 at 22:05
  • To automatically add "useful" thumbnails to PDFs, checkout media_pdf_thumbnail
    – bwaindwain
    Commented Oct 4, 2023 at 21:41

3 Answers 3

1

In response to your second question, there is a core issue open regarding editing media items within the field widget: https://www.drupal.org/project/drupal/issues/2985168

There is also a contrib module Media Library Edit.

One problem is that you will edit the media entity itself, affecting all usages of the media item.

3
  • It should not be an issue though because someone should understand that media items are references.
    – Kevin
    Commented Feb 21, 2021 at 23:47
  • @Kevin Site builders would know this but it can be confusing for end users who just want to manage the content on their website.
    – imclean
    Commented Feb 22, 2021 at 3:59
  • I tried the media library edit, but it looks a bit awkward without a table display :)
    – donquixote
    Commented Feb 22, 2021 at 22:00
0

There is a way to achieve this (to an extent) without modules:

1.) Go to the media library view: /admin/structure/views/view/media_library/edit

2.) Swap the display names of widget and widget_table displays.

My approach is to delete the headers on widget and widget_table, delete the widget display, and rename widget_table display to widget. I then add the edit link to the table.

Looks like soon a fix for this issue might get added to core: https://www.drupal.org/project/drupal/issues/2985168

2
  • Swapping the display names didn't seem to make any difference. Do you mean machine names?
    – aharown07
    Commented Jan 22, 2023 at 1:19
  • I think this is referring to "Add or select media" dialog which opens when you click [Add Media]. This has a Grid and a Table view. The OPs question refers to the default listing which is output from MediaLibraryWidget->formElement().
    – simesy
    Commented Nov 14, 2023 at 2:14
0

If you are not wedded to MediaLibrary widget, you can use some other modules like Inline Entity Form and Entity Browser. However in my case this meant I lose the Media Library modal for adding new files and therefore lost dropzone support.

Entity Browser apparently has dropzone support but i didn't get this far.

I have verified you can use CSS to create a list. But it's not easy. It does work. I'll edit this post if I do that.

I went down the path of writing an extension of media library but the Ajax Remove buttons stopped working and I felt like it was getting too complex. However the code is here for what it's worth. https://gist.github.com/simesy/ceb2f3406bba20d6337ff6439c32247a

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.