Just infront i like your theme. Its simple and the user (normal one) gets what he can interact with. I would have a suggestions:

1. Seperate the sldies-bard visually better from the image itself. It is not only confusing for newcomers, "that the can directly selec there" but also gets the eye distracted from actually looking at the other pictures

My solutions for that would be, greying out the slidebar below until the mouse hovers any picture below (entering the slide area). Maybe also add a bit more space - but that might then not even needed. Just a grey overlay.

What do you think?

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Manuel Garcia’s picture

Status: Active » Needs review
FileSize
1.17 KB

True, we could work a bit on this area.

Not sure I'm understanding what you mean by "grey overlay", I'm thinking we could set the opacity to let's say 0.6 on all thumbnails, then set the active and hover thumbnails to opacity: 1.

Seems like it would make it clearer to the user in my opinion.

Please see the attached patch to check out what I mean.

Manuel Garcia’s picture

Assigned: Unassigned » Manuel Garcia
Status: Needs review » Fixed

FYI, I have committed the patch above, welcome to discuss this further.

Setting it to fixed, but feel welcome to reactivate to disucss further. An image describing further enhancements would realy help speed up the conversation.

EugenMayer’s picture

Thanks for the fast answer. I will try that one out and come back with feedback. Sounds great already

EugenMayer’s picture

Well tried the patch. I think the opacitiy is nearly not changin anything. I would actually use a grey-overlay and give that and overlay. And that overlay is removed on mouse over / being active.

What do you think about that?

Manuel Garcia’s picture

I'm not understanding what you mean EugenMayer, could you make an image to explain the behaviour you describe?

EugenMayer’s picture

Manuel Garcia’s picture

I think that's exaclty what opacity does... at least on pictures it looks fine, look at my example: http://www.ubuntu-pics.de/bild/64587/galleryformatter_hover_not_eDsL69.png

EugenMayer’s picture

Well actually now you just fade out with opacity. That only works good for highcontrast / dark pictures.

My approach is to overlay with a div which has a grey background.

Manuel Garcia’s picture

Title: Theme tuning » Improve default theme usability
Status: Fixed » Needs work

I'll see what I can do, I do see your point, perhaps on other backgrounds the opacity alone would not work that well. Stay tuned!

Manuel Garcia’s picture

Status: Needs work » Needs review
FileSize
323.19 KB
1.25 KB

OK, here is the problem:

We cannot use the background gray on the <a> tags because they need to be using padding for the bg images, and cant use margin for this reason.
This means we cannot give a bg color to the images themselves so they show like a "gray overlay".

I've tested another approach, which is giving a gray bg to that whole section in the gallery, the thumbnails area. See attached screenshot.

I was really hoping to not do this, and leave this to the theme itself, so that the default theme would be usable in most situations. So I really doubt this patch will go in. I find it cleaner if the bg of the thumbnails is the same as the rest of the node itself.

I have also added a slight border for the thumbnails, maybe that helps a bit, but I dont like setting a fixedd color to the background of that whole section.

The only way to do this is to insert another div wrapping the image itself, just for this porpuse, which I wont do because its already too much markup, and I dont think we should do this in jQuery, because who knows how many images users will put in here, I want to keep the JS as fast as possible.

So for now, I feel we will stick with just opacity changes, perhaps add the border around the images, but I'll leave the contrast problems to the themers themselves. I want them to be free to use this gallery style, and not impose bg colors on them.

I'm opened to suggestions, but please do understand what approach I am trying to have with the greenarrows style.

Manuel Garcia’s picture

Issue summary: View changes
Status: Needs review » Closed (outdated)

6.x-1.x branch no longer supported