Problem/Motivation

In Claro, a media library grid item gets its height entirely from the thumbnail image (.media-library-item--grid .field--name-thumbnail img { height: 180px; }). Every other part of the card is absolutely positioned over the preview: the select checkbox, the "unpublished" badge, the edit/remove buttons, and the item name (.media-library-item__attributes, pinned to bottom: 0 in the 34px space reserved by .media-library-item__preview's padding-bottom).

When a media item has no preview image, the preview collapses to 34px. The name overlay then lands at the top of the card underneath the checkbox, and because its max-height: calc(100% - 50px) resolves to a negative value, the name disappears entirely. In the media library modal opened from a media reference field, the item renders as a blank white card containing only a checkbox.

This happens with any media item whose thumbnail does not render, for example:

  • the thumbnail's file entity or the file on disk has been deleted;
  • an oEmbed provider's thumbnail fetch failed (see #3080666, where comment #3 describes this exact symptom and a site-level min-height workaround);
  • contrib media source plugins that fail to generate a thumbnail (e.g. #3084707).


Steps to reproduce

  1. Install the Standard profile and enable Media Library.
  2. Create a few image media items.
  3. Break the thumbnail of one item, e.g. delete the referenced file entity:
    drush php:eval '\Drupal\file\Entity\File::load(FID)->delete();'
  4. Add a media reference field to a content type using the media library widget, edit a node, and open the "Add or select media" modal (also visible at /admin/content/media-grid).

Result: the item without a thumbnail is a blank card; its name is not visible. In the grid at /admin/content/media-grid the "unpublished" badge and checkbox also overlap the (invisible) name overlay.

The smaller cards in the add form's "Additional selected media" area are affected the same way:

  1. Enable the advanced UI:
    drush config:set media_library.settings advanced_ui 1
  2. Reopen the modal, select the broken item and one working item, then upload a new file via "Add files".
  3. On the resulting add form, expand "Additional selected media".

Result: the pre-selected item without a thumbnail collapses to its checkbox; its name is not visible.

Proposed resolution

Keep the overlay positioning (it is what allows the name to expand over the image on hover/selection without reflowing the grid), but stop deriving the card height solely from the image. Give the preview a min-height matching the thumbnail heights already defined in media-library.pcss.css:

.media-library-item--grid .media-library-item__preview {
  min-height: 180px; /* Matches the thumbnail image height. */
}

.media-library-add-form__selected-media .media-library-item--small .media-library-item__preview {
  min-height: 100px; /* Matches the smaller thumbnail image height. */
}

Because these boxes are content-box, the min-height plus the existing 34px padding-bottom equals the height of a card with an image, so mixed grids stay aligned.


User interface changes

Media library grid items without a renderable thumbnail keep the same dimensions as other items; their name, checkbox, and status badge display in the normal positions. No change for items with thumbnails.

Issue fork drupal-3614246

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:

Comments

andy-blum created an issue. See original summary.

andy-blum’s picture

andy-blum’s picture

Issue summary: View changes

andy-blum’s picture

Status: Active » Needs review
andy-blum’s picture

mherchel’s picture

Status: Needs review » Reviewed & tested by the community
StatusFileSize
new63.15 KB
new51.77 KB

This looks great! Code looks good and works.

Before:

After:

mherchel’s picture

StatusFileSize
new64.37 KB

Note that this isn't an issue in default_admin. No need for followup.

  • longwave committed 06dd567a on 10.6.x
    fix: #3614246 Media library grid items without a preview thumbnail...

  • longwave committed 970fc9da on 11.4.x
    fix: #3614246 Media library grid items without a preview thumbnail...

  • longwave committed f38ba730 on 11.x
    fix: #3614246 Media library grid items without a preview thumbnail...

  • longwave committed 5c44cbc6 on main
    fix: #3614246 Media library grid items without a preview thumbnail...
longwave’s picture

Version: main » 10.6.x-dev
Status: Reviewed & tested by the community » Fixed

Backported down to 10.6.x as a small but useful bug fix.

Committed and pushed 5c44cbc698e to main and f38ba7304f1 to 11.x and 970fc9da6a6 to 11.4.x and 06dd567add4 to 10.6.x. Thanks!

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.