New G2 layout: combined thumb/image/slideshow view

Hi all-

I'm looking for some feedback on user interface design for a new G2 layout that combines the album/thumbnail-view, photo-view and slideshow-view into a single page. I have developed a mockup to show where I am heading with this. Please share any ideas you have on how this UI can be tweaked or rearranged to improve ease-of-use and streamline your gallery viewing experience.

[url]http://[url is gone now]/layout.html[/url]

Controls:
[I] -- view thumbnails
[T] -- view text (summary/description-- title is always shown)
[-] -- minimize toolbar
[^] -- show sidebar
(system content, album/item links, subalbums, slideshow controls)
[v] -- hide sidebar
[A] -- turn autohide on/off
[>>] -- start slideshow
[::] -- pause slideshow
< -- previous image
> -- next image

Thumbnail controls:
|< -- scroll to left end
<< -- one page left
< -- one thumbnail left
> -- one thumbnail right
>> -- one page right
>| -- scroll to right end

This is a mockup (no php, therefore no gallery integration), but I have done a fair amount of work on the html/css/javascript side, so much of this mockup can actually be moved right into a G2 template. I *think* it should work in mozilla, firefox, IE6 and safari. Please also post any browser incompatibilities you find. If you would like to create artwork (for buttons, etc) for this UI I would happily accept them!

Areas I haven't figured out:
- How to handle resized derivatives
- How to handle non-images (like movies)
- Subalbums (show thumbnail somewhere?)
- Some way to see many thumbs+titles(+summaries?) all at once?
(for seeing the "big picture" like the normal album-view does)
- Keep autohide feature? (kinda flaky and browser-dependent)

Thanks for any feedback!

Mindless,

Wonderful work! This is great. Almost perfect. Like you said UI needs some work. So here is some of my critiques.

Initial loading: drop the image loading text or make it a option for the admin
Can you pre-load the next image? to get rid of the image loading?

The sidebar popout should also have a close or hide as well as the control in the bottom.

The following i was NOT able to reproduce I don't know why. I went back and tried again but it looks fine:
------begin------
In IE6 win2k it needs a bit more work. The biggest issue is the height of the window. It has scroll bars and the image is at the top. The image did not use up the height of the display. It had a bunch of space between the Control at the bottom but there is a bunch of space between the image and the control. So you have to scroll up to see the top of the image. In IE the sidebar popout is the same height as the image but like the image it can be taller (it has scroll bars) the image and the sidebar was only 50% of the height of the window. The image is not resized the same as mozila (in IE it is smaller and still can be bigger (space between the image and the control.)) I think this might be solved if you calculate the locations from the top of the control bar and not the top of the page.
---------end--------

I can't wait to see it with nice buttons.
I don't like the auto hide feature but I am glad you gave it a on/off button. I think you have the auto hide controlled with on mouse move. It is a bit weird for the first time user.

When you get some buttons I will love to see it again.

Dave

Looks quite good in Safari. Autohide works, but I find it more of a distraction than a useful feature (i.e. the main photo resizing constantly).

One thing I might consider: given that most screens are used in landscape mode, it might make sense to move the thumbnails to the side of the screen rather than on the bottom. This might allow for intermediate sized photos in portrait format to be similarly sized as those in landscape mode.

Two other applications worth looking at for ideas: Coppermine (coppermine.sourceforge.net), which uses a similar thumbnail scheme, and Smugmug (www.smugmug.com), which I think is very slick. Gallery should be capable of something very similar if not better.

Steve

When you get buttons I would like to see that the forward and back buttons are disabled (grayed out) when you come to the end of the thumbs. Right now with text they are just disabled.
In the slide show it is hard to tell what direction you are going after you use the back/forward buttons a few times, perhaps some color/hue change (on the button) for the direction the sideshow is going.

Dave

On initial load, the image did not use up the height of the display. The image had a bunch of space between the Control at the bottom. There is a bunch of space between the image and the control. See image attached.
On reload it appeared fine. IE6 windows 2000.

The image is not resized the same as Mozila

No,I think that is the way it should be but then again I am not the best of guys to ask.

I would like to see some information when the mouse is over the buttons. Like "alt="Next image""
Can you make the horizontal scroll bar work by moving the part that scrolls? Like in a regular window.

I like this and would like to be able to click the thumb and it would show up in the slideshow.

I think all these features/gizmoz/gadgets should have the ability for the administrator to add or configure them to his/her liking.

Dave

Hi all-- I've made some updates... url is now: [url]http://[url is gone now]/layout.php[/url]
(layout.html will redirect you there..)

What's new:

• Basic integration with G1 (ignores can-view-fullsize permission).
• More photos.. it is loading an album with 52 photos.
• View full-size: click on the image and it will switch to fullsize (with scrollbars). Click again to switch back to fit-size.
• Save state: a cookie is saved when you leave the page so it can restore your slideshow settings, visible toolbars, and the image you were viewing.

UI ideas still very very welcome!
I can attach files here for G1 if anyone wants to try this on your own site.. (as a link from the view_album page rather than replacing view_album.. could be admin-only link if you prefer).[/]

Well, if they don't want to get involved in the process of helping you design your layout, then they have to live with what you come up with. :-?

Personally, I kind of liked your original concept with the thumbnails across the bottom.
I think that it's a totally cool way to view the album. It is a radical departure from the current model, so not only is it a fun way to view the albums but it also showcases G2's layout flexibility. Can you elaborate on why you're changing directions?

Name wise, I like "hybrid".

The main reasons:

• How to display non-images in an easy to understand manner
• How to handle subalbum navigation (my mockup shows subalbum titles on the sidebar.. works ok for an album with many photos and a few subalbums; would look kinda odd with all subalbums and no photos)
• I found myself switching back and forth between thumb and text views on the bottom. Too frequent occurrence of having to click on small icons.

I guess my goal is to build a layout that people (and I) can use on all subalbums and it will work well. That being said, the horizontal image bar is good for an album that contains only photos (a common type of album) so it can work well as a layout when used selectively. I've been taking periodic snapshots of my code so I could easily branch off with that model for a separate layout.

Thanks for the support of my original design.. I hope you'll like the new look too; I'm quite happy with how it's coming along so far.. will have something ready for public consumption soon.[/]

I added popup menus for items links; only the "photo properties" link works.

Item links will go in the popup menu next to each item title.
For a cleaner display of simple album browsing I made the popup icons hideable; but I'll switch it to show the icons by default so users new to the layout won't miss them.
What I have now as "Photo Properties" (from G1) will show all the item content in G2, like item details from the exif module, etc.

Wow! That is totally sexy? How hard was it to get it into G2?

Err!!! Sorry mindless, scratch that. I looked at the source and noticed you used javascript. I had disabled JS the other day because of a bad site that kept changing the focus on their page to make their's the active window.

Turned it back on and everything works and looks great!

That is so awesome.

Not too hard.. I drew on a lot of code from the matrix layout and the slideshow module to put it together. I ran into two small integration problems that I resolved with changes to other G2 code.. let me know if these are ok to commit or if the requirements can be handled in better ways..

1. The top level global.tpl adds 2 images at the end of the body.. this extra content throws off my layout which fills exactly 100% width and height.
2. I want to specify the html header.. the layout api only accepts a 'body' template and always uses its own 'head'.
3. The g->image template tag for each theme always sets class="image" which adds a border and margin for images that I don't need.

I solved the first two by adding a new key in the return from loadTemplate.. instead of 'head' or 'body' I return a template file in a key called 'main'. In ShowItem.inc if it finds 'main' in the results from the layout then it passes it back in its own results. In main.php if it finds the 'main' key then it passes it along to global.tpl. In global.tpl it if finds a main value then it renders only the content type and <html>,</html> tags, including the main template in between. Otherwise it does 'head' and 'body' as normal.
The third I handled by having image() in matrix and veloria theme.inc check for a "class" parameter and use that (if found) instead of the hardcoded "image" value. (alternatively I could check for class param at a lower level, in GalleryTheme)[/]

I'll give it some thought; I just remembered a third thing the 'main' key solved was allowing me to put onload/onunload in the <body> tag.

My dev site now has an embedded look.. I was right that a <table> didn't work, but embedding in an absolutely positioned DIV does work. I also fixed the popup menus to position correctly when embedded.

http://216.17.78.38/gallery2/

It's looking good. I made some small tweaks to the urls (you can't use relative urls in layouts or it gets thrown off when you have short url styles like http://example.com/gallery2/main.php/ParentAlbum/ChildAlbum/MyPhoto) but otherwise it's working fine on my server.

One thing that I found a little confusing is that there's no obvious links to get back from viewing a photo to viewing the album. I realized that if you click on the image it takes you back, but I spent a few seconds the first time around trying to find something to click...

I have no reason for posting this other than venting frustration at all the browsers out there... these are the browser peculiarities I have found while developing this layout:

• win/moz16 scrollbar for hidden div can cause a line across visible content
• win/moz16 doesn't always remove scrollbars when changing content to fit in div
• win/ie6 shows some td borders when page loads even though div is hidden
• win/ie6 select box overlaps a div that should be on top of it
• win/ie6 bottom:0px in css sometimes goes 1px from bottom.. while resizing browser window it can go back and forth.
• win/ie6 ignores border-spacing in css (need cellspacing= in html)
• mac/firefox when select box has focus and hit escape: moves selection to top item and doesn't fire onchange
• mac/firefox scrollbars are visible for hidden div with overflow:auto
• mac/firefox when hide div with scrollbars it sometimes remembers scroll pos, even if next content of div doesn't need scrollbars (so some content cropped)
• mac/firefox text sits a little higher
• safari: absolute positioned img still adds to size of containing div!!!
• safari: overflow:auto with height=#% doesn't work (ok w/ #px)
• safari: scroll:auto, scroll down, then resize content so scrollbar not neeed it stays "scrolled down", ie content pushed off top
• And the one today that really bugs me:
  win/ie6 can't handle left:#px;right:#px (or top/bottom) !!!!
  THIS IS CSS2!! (and would simplify my code quite a bit if I could use it)

Here's a simple example.. notice how 2/3 of the content is javascript to make it work for IE.. mozilla/firefox/safari work with just the html/css at the top.

<html><head><title>Test</title></head><body>
<div id="diva" style="position:absolute;background-color:#666;
 top:20px;left:20px;right:20px;bottom:50px">
<div id="divb" style="position:absolute;background-color:#bbb;
 top:2px;left:2px;right:2px;height:18px;overflow:hidden">Titlebar</div>
<div id="divc" style="position:absolute;background-color:#ddd;
top:22px;left:2px;right:2px;bottom:2px;overflow:auto">
this<p>div<p>has<p>lots<p>of<p>long<p>text<p>in<p>it<p></div>
</div>
<script type="text/javascript">
function size() { //For IE
 var w = document.body.clientWidth, h = document.body.clientHeight;
 var obj = document.getElementById('diva');
 var pw = w - parseInt(obj.style.left) - parseInt(obj.style.right);
 var ph = h - parseInt(obj.style.top) - parseInt(obj.style.bottom);
 obj.style.width = pw+'px';
 obj.style.height = ph+'px';
 obj = document.getElementById('divb');
 obj.style.width = (pw-parseInt(obj.style.left)-parseInt(obj.style.right))+'px';
 obj = document.getElementById('divc');
 obj.style.width = (pw-parseInt(obj.style.left)-parseInt(obj.style.right))+'px';
 obj.style.height = (ph-parseInt(obj.style.top)-parseInt(obj.style.bottom))+'px';
}
if (document.all) { size(); document.body.onresize = size; }
</script>
</body></html>

[/]

Yeah, saw some mention of IE7 somewhere before.. just took a look at it, but it doesn't (currently) fix the sizing problem I mentioned above.

first up - woah, anyone would think ive got even a vague idea what im talking about there!!
secondly - to make it idiot proof (or even madproof!! :roll: ), i would suggest having a button in there to close the image - as much as i like the idea of clicking on the image to close it, it took a bit of getting used to - especially when G1 allowed you to click the image to go to a full-size image - those who have grown used to the way G1 works might find this a bit strange...
would it be possible to setup a config option, to allow users to choose which way it works? - thats the best way i can think of to deal with this.
this is probably a minor piece of code that will only take you 150 hours or so to produce - but as i strugle with anything much beyond

<?php
<p>hello world</p>
?>

, if you produce it, ill test it...

In an earlier revision of the layout I did have image-click do full size/fit size, but later changed to back-to-album.. I'll consider it as an option. For now, I have gone ahead and added a button for back-to-album.

Not too much, but it has crossed my mind. The page should become usable once it loads all the HTML (javascript at the very end of the html gets everything ready to go), even if all the thumbnails and buttons are not yet loaded.. if that doesn't seem to be the case I can rexamine that bit.
I suppose I can split into pages.. maybe 60 or 80 photos per page (or configurable). Not sure what else I can do to scale better.. ideas?

I am sorry. But I am not liking the directon this is going. I had hoped (and remember some early tests that indicated this) that Gallery2 will receive the semantical XHTML/CSS treatment. What I am seeing here is tables, more tables, and endless lines of Javascript. Did I misinterpret the mission statement?
I am aware of the theme API and that it will be fairly easy to build a custom template that addresses all the points, but why not go with this from the beginning?

Hmmm... I think I'm going to have to throw my tupence in. I'm personally really fond of Gallery1 and was please from the original mission statement that the G2 was to take a more semantic route and there was a really nice mock-up done by someone that pretty much hit it on the head (that really minimal white with hints of grey style).

However, the current G2 style implimentation seems to hark back to NN4 vs. IE4 era with DHTML sites... lots of almost unwieldy Javascript which almost detracts from the fact G2 is a PHP application.

I know if I don't like the implimentation... I can indeed change it, infact that's what we tell a lot of users with phpBB of why the kitchen sink isn't included into our releases... but as a default, why should we be forcing so many people that need desktop browsers with Javascript enabled to view the gallery, which takes, from a comment I read earlier 10 seconds to download via DSL... that's 2+ minutes for those still using dial up.

Mobile internet decives are also more prevailant, and while then can view basic sites with images, they most likely won't have Javasript and the likes... so why not aim for making Gallery2 100% accessible in the spirit of the mission statement?

I hope my suggestions haven't come across badly, since mindless and vharat have put in a lot of time to get to how things are now... but perhaps CSS Zengarden ( http://www.csszengarden.com/ ) or CSS Vault ( http://www.cssvault.com/ ) may lend some inspiration? Incidently, CSS Vault's layout is also like a gallery, ditto PhotoMatt's Photolog ( http://photomatt.net/photos/log/ ) which incidently appears to be based on Gallery1. :D

G2 has the concept of pluggable layouts. What this means is that we can have many different types of layouts and you can decide which one you want to use on a per-album basis. The standard layout will use little or no javascript (that's the "matrix" layout that is active by default with G2) and will be all XHTML/CSS. However, anybody can write their own layout and can use any technology that they want to render it, including tables and Javascript, etc. Whatever floats their boat. Some of these layouts are going to mesh with the theme system better than others (and we're going to pull only the good layouts into G2) but the goal here is to be totally flexible and let people display the page the way that they want it to be displayed.

The XHTML/CSS version of the matrix layout uses something very similar to the GalleryFloat layout discussed on the page link you send. There are a few additional issues that are not discussed on that page, like being able to specify the number of rows and columns and enforce it, and preventing long captions from taking up all the horizontal space, etc. But we're working steadily on those so stay tuned.

The best thing I can say is that all of the issues you've raised are being taken care of as we speak, and are the major gating factor for getting G2 to alpha. Stay tuned, it's on the way.

SHS`, I agree with Bharat's comments.. your feedback is all valid, but keep in mind that the layout I'm developing will NOT be the default layout.. if a site administrator doesn't want to require javascript for their site then they can opt to not use the hybrid layout for any albums.
I'll take a look at the site you mentioned and see if it gives me any ideas on how to improve my layout implementation.

photomatt, it depends what you're trying to do with CSS

Is it possible to embed java script in gallery to create virtual tours from 360 degree panoramic pictures? An example of virtual tour: http://www.roughlife.com/Virtual/pool.htm