WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#33299 closed enhancement (fixed)

Improve featured image preview for transparent background images

Reported by: laura20 Owned by: wonderboymusic
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.2.4
Component: Post Thumbnails Keywords: good-first-bug has-patch has-screenshots
Focuses: ui Cc:

Description

Rigth now, if you use white image with transparent background in featuresd image, you can't see the image. It will be great to improve this to make visible that the image has transparent background.

Attachments (5)

Edit Page ‹ Battle — WordPress.png (6.3 KB) - added by laura20 4 years ago.
33299.diff (541 bytes) - added by metodiew 4 years ago.
33299-transparent-featured-image-patched.png (34.6 KB) - added by metodiew 4 years ago.
33299.2.diff (524 bytes) - added by metodiew 4 years ago.
33299-transparent-featured-image-patched-2.png (22.6 KB) - added by metodiew 4 years ago.

Download all attachments as: .zip

Change History (41)

#1 follow-up: @atomicjack
4 years ago

Possibly detect if the image has transparency and place a backdrop over it - but then we'd need to detect the colours used, so that, if it is transparent with black text, we only put a white background, or, if it's transparent with white text, we only put black, etc.

Could become quite advanced trying to detect every variation - allow a user selection?

#2 in reply to: ↑ 1 ; follow-up: @christopherabalos
4 years ago

Replying to atomicjack:

Possibly detect if the image has transparency and place a backdrop over it - but then we'd need to detect the colours used, so that, if it is transparent with black text, we only put a white background, or, if it's transparent with white text, we only put black, etc.

How about using multiple CSS gradients to create a checkered background behind the image?

#3 in reply to: ↑ 2 ; follow-up: @atomicjack
4 years ago

Replying to christopherabalos:

Replying to atomicjack:

Possibly detect if the image has transparency and place a backdrop over it - but then we'd need to detect the colours used, so that, if it is transparent with black text, we only put a white background, or, if it's transparent with white text, we only put black, etc.

How about using multiple CSS gradients to create a checkered background behind the image?

That still wouldn't really fix the situation - for example, if the image contains different coloured text, i.e black and white, or a light grey, it's still going to be an issue.

Personally, Imgur uses a black-like background, so maybe that would be the way to go, to create a standard, but I'm not sure.

#4 in reply to: ↑ 3 ; follow-up: @christopherabalos
4 years ago

Replying to atomicjack:

That still wouldn't really fix the situation - for example, if the image contains different coloured text, i.e black and white, or a light grey, it's still going to be an issue.

Here's an example of what I was referring to: http://codepen.io/anon/pen/waNVZE
This is typically how image editing programs handle transparency. The pattern makes it possible to see just about any color.

#5 in reply to: ↑ 4 @atomicjack
4 years ago

Replying to christopherabalos:

Replying to atomicjack:

That still wouldn't really fix the situation - for example, if the image contains different coloured text, i.e black and white, or a light grey, it's still going to be an issue.

Here's an example of what I was referring to: http://codepen.io/anon/pen/waNVZE
This is typically how image editing programs handle transparency. The pattern makes it possible to see just about any color.

Ah okay, yes. I was imagining it differently.

I think changing it to a checkered background like that would be the most ideal solution; would be fantastic to get this small change committed into 4.3, but unlikely at this point.

#6 follow-up: @knutsp
4 years ago

I guess this goes for any displayed image in admin, like the media library and in the customizer, not just featured image meta box display.

#7 in reply to: ↑ 6 @atomicjack
4 years ago

Replying to knutsp:

I guess this goes for any displayed image in admin, like the media library and in the customizer, not just featured image meta box display.

I'd say anywhere where seeing the entire image is 'crucial'. Having it in every location could just become messy.

#9 @richardbrand
4 years ago

Laura20, is there any way I can contact you? I have a question about your plugin After-Content, but could not find any contact info.

#10 @atomicjack
4 years ago

@wonderboymusic would you consider this for 4.4?

#11 @SergeyBiryukov
4 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.4

#12 @peterwilsoncc
4 years ago

  • Keywords good-first-bug added

@metodiew
4 years ago

#13 in reply to: ↑ 8 ; follow-up: @metodiew
4 years ago

Replying to afercia:

With a few lines of CSS 3 :)
http://lea.verou.me/css3patterns/#checkerboard

not sure if this is the best CSS, but it's following @afercia's suggestion

In 33299-transparent-featured-image-patched.png you can see how it looks like with the patch

Last edited 4 years ago by metodiew (previous) (diff)

#14 in reply to: ↑ 13 ; follow-up: @SergeyBiryukov
4 years ago

Replying to metodiew:

In 33299-transparent-featured-image-patched.png you can see how it looks like with the patch

Could we make it look more like http://codepen.io/anon/pen/waNVZE (from comment:4)?

@metodiew
4 years ago

#15 in reply to: ↑ 14 @metodiew
4 years ago

Replying to SergeyBiryukov:

Replying to metodiew:

In 33299-transparent-featured-image-patched.png you can see how it looks like with the patch

Could we make it look more like http://codepen.io/anon/pen/waNVZE (from comment:4)?

Patch updated and actually it looks better in my opinion :)

Last edited 4 years ago by metodiew (previous) (diff)

#16 @atomicjack
4 years ago

4.4 here we come. :) I think this will be a minor, yet great improvement for many.

Good work @metodiew

#17 @kjbenk
4 years ago

I know that the checkered background is shown in most professional photo editing programs, but should we consider just adding a border to make things more subtle?

#18 @SergeyBiryukov
4 years ago

  • Keywords has-patch added; needs-patch removed

#19 follow-up: @helen
4 years ago

I like this - has anybody looked into adding it to other places where images are selected, as mentioned in comment:6? I'm also assuming this doesn't work at all in older IEs, which is fine, I just prefer to know that something isn't working and where instead of finding out later.

@kjbenk - Not sure I follow what you're envisioning as "just adding a border". Do you mind elaborating?

#20 in reply to: ↑ 19 ; follow-up: @afercia
4 years ago

Replying to helen:

I'm also assuming this doesn't work at all in older IEs

Sure, this won't work in IE 9- maybe we could just use a dark gray fallback. Also, wouldn't be better to use the new gray shades? http://codepen.io/hugobaeta/full/RNOzoV/

#21 follow-up: @kjbenk
4 years ago

@kjbenk - Not sure I follow what you're envisioning as "just adding a border". Do you mind elaborating?

By adding the CSS

border: 1px solid #ddd;

The user will be able to see that there are boundaries to the image without the checkered background. This does not solve the use case when some added a white transparent background image since they will still not be able to see the image.

I think the checkered background is a great idea and I think adding a border to it will help to show a transparent image better.

#22 in reply to: ↑ 21 @atomicjack
4 years ago

Replying to kjbenk:

@kjbenk - Not sure I follow what you're envisioning as "just adding a border". Do you mind elaborating?

By adding the CSS

border: 1px solid #ddd;

The user will be able to see that there are boundaries to the image without the checkered background. This does not solve the use case when some added a white transparent background image since they will still not be able to see the image.

I think the checkered background is a great idea and I think adding a border to it will help to show a transparent image better.

The end of the checkered boxes would act as a 'border' though. You'd know where the image ends because it would not be checkered past that point.

#23 in reply to: ↑ 20 ; follow-up: @helen
4 years ago

Replying to afercia:

maybe we could just use a dark gray fallback

The fallback can be whatever the color is now (which is to say, no fallback), since it's purposefully designed a given way :) No matter what color is chosen, there can exist an image that will blend into it. There are also different contexts - gray in the media library, white in the featured image view, white in both detail views.

#24 in reply to: ↑ 23 ; follow-up: @afercia
4 years ago

Replying to helen:
Well then maybe a small checkered gif as fallback. It won't scale, but it's just for IE 8 and 9 :)

#25 in reply to: ↑ 24 ; follow-up: @helen
4 years ago

Replying to afercia:

This is not something I'm concerned about having any fallback for, though open to arguments. Not excited about adding a file for an enhancement to something that is a fairly narrow case: one color images of either white or a particular shade of gray with transparency being viewed in IE 9 or below.

#26 in reply to: ↑ 25 @atomicjack
4 years ago

Replying to helen:

Replying to afercia:

This is not something I'm concerned about having any fallback for, though open to arguments. Not excited about adding a file for an enhancement to something that is a fairly narrow case: one color images of either white or a particular shade of gray with transparency being viewed in IE 9 or below.

And, let's be honest, usage of IE9 and below is going to continue to fall, the change would become obsolete in the not-too-distant future.

#27 @wonderboymusic
4 years ago

  • Keywords has-screenshots added

#28 @wonderboymusic
4 years ago

  • Owner set to wonderboymusic
  • Resolution set to fixed
  • Status changed from new to closed

In 34634:

Feature Image: Improve the preview for transparent background images by using CSS3 to show a checkered background.

Props metodiew.
Fixes #33299.

#29 @wonderboymusic
4 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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


4 years ago

#31 @helen
4 years ago

This needed -webkit- prefixes and some coding standards, but I'm only going to commit the prefixing for now. Normally each background image (gradient) would be put on its own line, but autoprefixer is not handling it well so I'm going to leave it for now while we investigate upstream.

Leaving this open for investigation into other areas that could use the same gradient (media library, for instance).

#32 @helen
4 years ago

In 34637:

Autoprefixer for [34634].

Normally when there are multiple comma-separated values in CSS, each one would go on its own indented line. However, Autoprefixer appears to be tripping up on gradients at the moment, so it's going to stay on one line until we investigate upstream.

see #33299.

#33 follow-up: @DrewAPicture
4 years ago

@helen Was there anything left here other than the -webkit- fix you put in in [34637]?

#34 in reply to: ↑ 33 @helen
4 years ago

Replying to DrewAPicture:

@helen Was there anything left here other than the -webkit- fix you put in in [34637]?

Yes - the below can be a separate ticket or whatever, it just needs somebody to actually actively look at it first.

Leaving this open for investigation into other areas that could use the same gradient (media library, for instance).

#35 @afercia
4 years ago

Quick experiment in the Media Library (should be restricted to the attachments with type-image):

https://cldup.com/ZXo52tv75s.jpg

#36 @helen
4 years ago

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

It's really distracting in the media library because there are multiple items, let's not.

Note: See TracTickets for help on using tickets.