>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3278033. --> Reported by: [jwilson3](https://www.drupal.org/user/220177) Related to !134 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>Logo images that are designed as white on transparent are invisible in the media library.</p> <p>Before:</p> <p><img src="https://www.drupal.org/files/issues/2022-04-29/Screen%20Shot%202022-04-29%20at%205.02.53%20PM.png" alt=""></p> <p>After:</p> <p><img src="https://www.drupal.org/files/issues/2022-04-29/Screen%20Shot%202022-04-29%20at%205.06.32%20PM.png" alt=""></p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>Add a checkered background on all images in media library. this will not only help white images on transparent background, but will help identify any image that has a transparency layer.</p> <p>To achieve the checkered background, we can use a well-vetted pure CSS solution approach already used by Claro theme for the "image-preview" (upload widget) and expand it for use in the Media Library, by making it a SASS mixin. </p> <p>We can add new color variables <code>--colorPatternFallback</code>, <code>--colorPattern</code> and <code>--sizePattern</code>.</p> <p>We can leverage all Media Library admin views including the modal media library (grid and table displays) as well as the admin page at /admin/content/media (grid and table displays). Note: the table display on /admin/content/media currently requires a core patch to see the checkered background properly: <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-13"><a href="https://www.drupal.org/project/drupal/issues/3279578" title="Status: Needs work">#3279578: Media Library Page Table view should have same classes as Media Library Modal Table view</a></span></p> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <ul> <li><del>approve approach</del></li> <li><del>write patch</del></li> <li>community review &amp; testing</li> </ul> <h3 id="summary-ui-changes">User interface changes</h3> <p>Images with transparency will now be detectable in the media library.</p> <h3 id="summary-api-changes">API changes</h3> <p>n/a</p> <h3 id="summary-data-model-changes">Data model changes</h3> > Related issue: [Issue #3279578](https://www.drupal.org/node/3279578) > Related issue: [Issue #3087345](https://www.drupal.org/node/3087345)