U4-4550 - Media Picker preview with transparent images

Created by Lee Kelleher 28 Mar 2014, 16:09:16 Updated by Niels Hartvig 02 Apr 2014, 09:54:41

I suspect this is an edge-case, but here goes...

I have a website logo that has a white foreground colour and a transparent background. When we select the image with the Media Picker, the preview is on-top of a white background, so we can't see the logo preview.


Suggested solution is to have a CSS background-image on the <img> tag itself, like so:


I can submit a pull-request for this.

4 Attachments


Lee Kelleher 28 Mar 2014, 16:10:56

(Not sure how you embed images into the post)

Sebastiaan Janssen 31 Mar 2014, 10:01:08

But.. :) Now the editor is going to think: hey, my image suddenly has a grey background, what did I do?

Lee Kelleher 31 Mar 2014, 10:12:18

Argh! Totally open to solutions on this... as we've also got an image like this (see attached)

Lee Kelleher 31 Mar 2014, 10:13:36

Other options to consider...

  • Photoshop-esque chequered background
  • Option in prevalue editor to enable an underlying background

Sebastiaan Janssen 31 Mar 2014, 10:31:21

"Objects in picker may be different then they appear"

Chequered may be best yes, that is much easier to explain then a solid background and a lot of people are already familiar with that from photo editing tools.

Lee Kelleher 31 Mar 2014, 10:36:11

I'll update my PR. https://github.com/umbraco/Umbraco-CMS/pull/340

How much time is left before v7.1 cut off?

Sebastiaan Janssen 31 Mar 2014, 15:18:01

Still intend to launch Thursday, so make sure to do it tomorrow or Wednesday morning-ish at latest. :)

Lee Kelleher 31 Mar 2014, 21:35:37

OK, trivial (but important) questions:

  • Is there an existing image we could use (for the chequered background)? I had a look, but didn't spot anything, so created one myself.
  • Where is the best folder location to add a new image?
  • Is there a preferred filename convention for images?

In my working copy, I've created a new image called "checkered-background.png" and placed it at ".\src\Umbraco.Web.UI.Client\src\assets\img" - this way the reference in the LESS/CSS is relative.

I had considered dropping the image into ".\src\Umbraco.Web.UI\Umbraco\Images", but didn't want to just dump it there.

Lee Kelleher 31 Mar 2014, 21:38:29

Current (WIP) view of the Media Picker preview.

Sebastiaan Janssen 01 Apr 2014, 08:47:38

@leekelleher Yup .\src\Umbraco.Web.UI.Client\src\assets\img is perfect. No preferred filename convention that I know off. Maybe make the checkers larger as it's now kind of hard to see the logo, would be nice if it's still clear there's a checkered background but also the image on it is more visible. Would checkers twice the size work? What happens if there's no transparent png/gif on it, will we still see the background while the actual image is loading?

Lee Kelleher 01 Apr 2014, 09:13:31

I tried a larger chequered size (the default Photoshop one is 8x8px), but it looked worse. So I reduce it down to 4x4px, which looked better, but not great.

The chequered background image would display for all image thumbnail/previews - depending on loading/latency it would be visible for a brief time.

Sebastiaan Janssen 01 Apr 2014, 09:29:45

@leekelleher Alright, in that case: ship it! :-)

Lee Kelleher 01 Apr 2014, 09:49:06

PR updated: https://github.com/umbraco/Umbraco-CMS/pull/340

Sebastiaan Janssen 01 Apr 2014, 11:07:33

Thanks Lee!

Lee Kelleher 01 Apr 2014, 11:14:58

Excellent, thanks Seb!

Niels Hartvig 02 Apr 2014, 09:54:41

Love it! Great contribution!

Priority: Normal

Type: Cosmetics

State: Fixed


Difficulty: Normal


Backwards Compatible: True

Fix Submitted: Pull request

Affected versions: 7.0.0, 7.0.4

Due in version: 7.1.0


Story Points: