Background for png images

[Zeka]

Hi.

I have a lot of white and transparent png images and its quite difficult to find needed one:

For now I can use Admin Custom Files module to change background of some div, but it not so elegant solution. 

Maybe there is some other workaround about this issue? 

Ideally it would be nice to have some kind of background switcher near the grid swithcer

[szabesz]

@Zeka Simple and good idea!

However, we should not leave the checkerboard option out. Better yet, probably all shade versions should still be checkerboards, a dark one, mid range and a light one. We should still signal that these are transparent images.

BTW, this thread should be moved to https://processwire.com/talk/forum/5-wishlist-roadmap/ I suppose.

Edited July 18, 2016 by szabesz
typo

[Zeka]

54 minutes ago, szabesz said:

@Zeka Simple and good idea!

However, we should not leave the checkerboard option out. Better yet, probably all shade versions should still be checkerboards, a dark one, mid range and a light one. We should still signal that these are transparent images.

BTW, this thread should be moved to https://processwire.com/talk/forum/5-wishlist-roadmap/ I suppose.

Agree with you. I think that also it would be nice to be able to set default background in field setttings.

[Zeka]

One more addition.
Background switcher should also appear on image select popup window.

[apeisa]

I think darker bg or config setting would be nice.  But big no for having visible toggle for this. 

[szabesz]

These are the default settings of Photoshop (dark, medium, light):

Text color is intentional, but you never know what you'll come across. If we cannot change it on the fly, then can it really be that useful?

[tpr]

Without visible control it would be less beneficial. What I can imagine is a 3-state control (or more) which changes the bg globally. It could be a small circle which loops through the bg colors on click.

[apeisa]

Visible bg color control is something that over 99% (my estimate) of image fields do not require. It would be poor ui design to have it always visible. That is very edge case scenario you are solving (white  transparent images) so it shouldn't cause any overhead to other use cases (or even code) that image fields are used for.

[teppo]

Weirdest thing: was about to post literally the same percentage as Antti this morning, based on my own experience. I've stumbled upon similar need *once* among all the sites I've worked with so far. If I'm anywhere close to a "typical user", having a visible toggle for this would be just redundant cognitive load to majority of users out there (not to mention unnecessary technical debt for the system) and thus I would vote against it.

Always ready to rethink my opinion if others have very different experiences. Who knows, I might be in the minority here

[apeisa]

Maybe there is solution to have some help without any visual overhead. Like having darker/different background on mouse hover (I know that wouldn't work on touch devices)?

[teppo]

Different background on hover makes sense to me, even if it won't play nicely together with touch events. I would keep the checkerboard pattern mainly because otherwise there's slightly bigger chance of the image disappearing into the background completely.

[Zeka]

As another variant it can be a slider the same as zoom slider. I dont think that it would make redundant cognitive load beacouse ther look almost the same.

Recently I often run into such a problem. With Matrix filed it is much easier to implement lending builder etc. and there users use a lot of png icons. 

Also I made small research how other cms deals with it.

CraftCms

It does not have any switchers or so, but checkerboard  background of png images is a little bit darker. 

OctoberCms

Light gray background and blue hover effect

Concrete5

No background, but hover effect

ModX

No background, but light blue hover effect

Opencart, Cockpit, Joomla 

No background and no hover.

 

[teppo]

Thanks, @Zeka – that's a nice roundup right there!

The thing I disagree with is your point about this not adding to the cognitive load. In my opinion you can't add anything new without increasing the cognitive load (unless, of course, it's a change that reduces or greatly clarifies something that's already there).

It's also worth pointing out that most new features make the underlying logic more complex.

While we're talking about relatively small amounts here, adding "just something small" repeatedly is a well-known way to ruin a perfectly good GUI. In my opinion each and every feature should a) be useful to a majority (or at least a relatively large percentage) of users out there, and b) be as obvious as possible.

As long as both of those are true here, I'm for this feature. Otherwise I'd suggest looking into some way to implement it as a module or some other way that makes it 100% optional.

[szabesz]

A simple css voodoo on hover trick might do, something like this: http://codepen.io/craigocurtis/pen/KzXYad

We can have a light checkerboard by default, which could be turned dark on hover (mid range is not too useful anyway).

I see that most CMSs do not strive for solving this issue in a comprehesive way, but hey, what sets ProcessWire apart from the crowd if not dealing with the details too?

[tpr]

I'm not fond of the hover solution, because you would need to hover all items when you are searching for an image. Anyone steroids?

[horst]

With my last attempt to croppable images I also had tried out some configurable settings. One of them was the background color for the thumbs, sitewide in the images module! No overhead, fully visual control for the admin, etc.

Another point is, that the checkerbox (only) is much to hard in contrast. I had used a way more soft one. PNG with alpha transparency too. It should not dominate, it only should be a bit visible through the transparent parts. Using black white / medium gray is not very useful. I also don't want to switch around when I come to an images side. I want get my images presented in a less distracted way, that lets me focus on the relevant things just from the start.

Now, as we are at it, there are some other parts that I really would see to be solved too:

These are mainly the thumbs displayed in different sizes in regard of orientation and aspect ratio. Often the simplest solutions are the best. I suggest a solution like with css property CONTAIN in a given box (fe. 280x280).

 

Following is a screenshot. Please tell me (or tell yourself) what information you get from the thumb overview.

If you have no clue what may be of interest when screening 100 images, think about:

• pixel dimensions
• or min height / min width
• image format? (png jpg gif)

 

Another question: Which one distracts you more from the images? first or second?

 

---------------------------------------------------------------------------------------------

 

Here is another comparision. Which one is more distracting and which one guides you visually faster to the relevant information?

 

This one is without any question

 

Keep in mind that we are talking about the last 10% to become nearly perfect ( for all cases ). <= is this possible? for all cases?

I'm not blaming anything, I'm fighting for the last 10%.

 

[horst]

mystery dissolution:

[horst]

Some good news!

I have experimented with the background for transparent images. I have tried lots of checkerboard images, with two or three colors, with alpha transparency or not. Finally I came to the conclusion that it is much better to use some photoshop noise.

Here is my testimage. A png with black, white and midgrey text / symbols plus a grayscale full opaque and half transparent:

Spoiler

And here is a screenshot how it looks as thumbnail in the images field with some noise background:

This way we would not need any steroids, no config settings, nothing else.

[szabesz]

22 hours ago, horst said:

it is much better to use some photoshop noise

Hmmm. Hehe, sounds funny indeed! Seeing is believing, so let's give it a try

[horst]

The more I use it, the more I love it.

It simply is CSS:

/*****************************************************************************************/
  /** Transparent-Images Background **/

    li.InputfieldImage div.gridImage__overflow,
    li.InputfieldImage .InputfieldImageEdit__imagewrapper > div > img {
        background: transparent;
        background-color: rgba(196,196,196,.7);
        background-image: url("data:image/png;base64,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");
        background-size: 32px 32px;
        background-position: 0 0, 16px 16px;
    }
    li.InputfieldImage div.gridImage__overflow:hover,
    li.InputfieldImage .InputfieldImageEdit__imagewrapper > div > img:hover {
        background-color: rgba(55,55,55,.9);
    }

/*****************************************************************************************/

 

[szabesz]

The checkerboard pattern creates a sort of interference effect but your slightly colorized noise has no chance of doing that, so no wonder it is a lot better choice. Lesson learnt? Sometimes it is not the best thing to follow the crowd...

[horst]

I have found my better checkerbox background image again:  

in use as BG it looks like this:

 

Spoiler

/*****************************************************************************************/
  /** Transparent-Images Background **/

    .croppableTooltip img,
    li.Inputfield.InputfieldImage.InputfieldCroppableImage3 div.gridImage__overflow,
    li.Inputfield.InputfieldImage.InputfieldCroppableImage3 .InputfieldImageEdit__imagewrapper > div > img {
        background: transparent;
        background-color: rgba(196,196,196,.7);
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIRJREFUeNqUUkEOwCAIE8OP9hGf6g/ZPDRplCH0okZboVTM7GkB5pzRdestARE59lh7hvxVeQgBehNYZBAhxPueLZ+FSh4sIn7zWimbuLeSEmDCPgnFnNltfjTGCMXVc9g7/waJTYr6vibRS1tJwEteWoBJCEzaAy/rpQr2rFf6X3gFGADTg01sfuB1kAAAAABJRU5ErkJggg==");
        background-size: 16px 16px;
        background-position: 0 0, 16px 16px;
    }
    li.Inputfield.InputfieldImage.InputfieldCroppableImage3 div.gridImage__overflow:hover,
    li.Inputfield.InputfieldImage.InputfieldCroppableImage3 .InputfieldImageEdit__imagewrapper > div > img:hover {
        background-color: rgba(55,55,55,.9);
    }

/*****************************************************************************************/