Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#41966 closed enhancement (fixed)

Add checkered grid to background of all media library images

Reported by: stevepuddick's profile stevepuddick Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: 4.9 Priority: normal
Severity: normal Version:
Component: Media Keywords: good-first-bug has-patch
Focuses: ui, accessibility Cc:


This issue is related to ticket #41948.

I noticed a few other places in the WordPress admin that we may want to include the checkered background. They have been listed in the attached screenshots. These screenshots have been manually adjusted with Chrome inspector tool to depict what the interface would look like with the checkered background.

Attachments (5)

attachment-details.png (106.6 KB) - added by stevepuddick 6 years ago.
media-listing-page.png (92.6 KB) - added by stevepuddick 6 years ago.
select-media-modal.png (79.7 KB) - added by stevepuddick 6 years ago.
41966.patch (580 bytes) - added by powerzilly 6 years ago.
Fix media background
insert-media-modal.png (51.9 KB) - added by SergeyBiryukov 6 years ago.

Download all attachments as: .zip

Change History (16)

#1 @stevepuddick
6 years ago

The checkered background is already present in the 'featured image' image background. It is also being added in the media library modal, in 4.9 as per the other ticket mentioned. Including it elsewhere would create consistency across the WordPress admin, which I believe is a positive.

#2 @SergeyBiryukov
6 years ago

Adding the checkered background for transparent images in Media Library was previously suggested in comment:35:ticket:33299 and decided against in comment:36:ticket:33299.

Maybe it's time to reconsider, consistency sounds good.

Last edited 6 years ago by SergeyBiryukov (previous) (diff)

#3 @melchoyce
6 years ago

What if we only showed the checkered background in places where the image appears on white?

#4 @SergeyBiryukov
6 years ago

  • Keywords needs-patch good-first-bug added
  • Milestone changed from Awaiting Review to Future Release

comment:3 makes sense to me.

Attachment Details modal is already handled in #41948, so I guess that leaves the Insert Media modal.

6 years ago

Fix media background

#5 @powerzilly
6 years ago

  • Keywords has-patch added; needs-patch removed
  • Resolution set to invalid
  • Status changed from new to closed

#6 @powerzilly
6 years ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

#7 @SergeyBiryukov
6 years ago

  • Milestone changed from Future Release to 4.9
  • Owner set to SergeyBiryukov
  • Status changed from reopened to reviewing

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

6 years ago

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.

6 years ago

#10 @SergeyBiryukov
6 years ago

It looks like Insert Media modal is fine as is, as the background there is not white: insert-media-modal.png

Edit Image modal, on the other hand, does need the checkered background, as seen on attachment-details.png.

Applying the styles from [41569] to .imgedit-crop-wrap img appears to work as expected.

#11 @SergeyBiryukov
6 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 41742:

Media: Improve the preview of transparent images in Edit Image modal by using CSS3 to show a checkered background.

Props powerzilly, stevepuddick.
Fixes #41966. See #41948.

Note: See TracTickets for help on using tickets.