Jump to content
Zeka

Background for png images

Recommended Posts

Hi.

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

Screenshot_5.jpg

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

Screenshot_1.jpg

  • Like 4

Share this post


Link to post
Share on other sites

@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 by szabesz
typo
  • Like 2

Share this post


Link to post
Share on other sites
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.

  • Like 1

Share this post


Link to post
Share on other sites

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

Screenshot_4.jpg

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

photoshop-transparency-grid.png

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?

  • Like 1

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

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.

  • Like 3

Share this post


Link to post
Share on other sites

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 :)

  • Like 1

Share this post


Link to post
Share on other sites

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)?

  • Like 1

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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.

ver2.jpg

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. 

Screenshot_8.jpg

OctoberCms

Light gray background and blue hover effectScreenshot_9.jpg

Concrete5

No background, but hover effect

Screenshot_13.jpg

ModX

No background, but light blue hover effect

Screenshot_12.jpg

Opencart, Cockpit, Joomla 

No background and no hover.

 

Screenshot_11.jpg

Screenshot_10.jpg

Screenshot_14.jpg

  • Like 3

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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? :D

Share this post


Link to post
Share on other sites

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? :)

  • Like 2

Share this post


Link to post
Share on other sites

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)

aspect-ratio_dimensions_border_background.jpg

 

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?

tooltip_color_font_weight_color.jpg

 

This one is without any question :)

without_questions.jpg

 

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%. :P

 

  • Like 3

Share this post


Link to post
Share on other sites

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

transparent_24.png

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

screen1.jpg

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

  • Like 5

Share this post


Link to post
Share on other sites
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 :)

  • Like 1

Share this post


Link to post
Share on other sites

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

noisy-thumbnail-background.gif

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);
    }

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

 

  • Like 4

Share this post


Link to post
Share on other sites

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...

  • Like 1

Share this post


Link to post
Share on other sites

I have found my better checkerbox background image again: bg-checker-box-16x16.png.2ee167934b207af1b4d46e510e3a19f8.png  :)

in use as BG it looks like this:

new_checkerbox_bg_preview.gif.492de7e170a8dfcdac398a4b3bb80655.gif

 

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);
    }

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

 

 

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...