whoa -- new layout on control buttons

Andy · November 2, 2008

rolette wrote:

Posted this in another thread about the updated menus, but pretty sure it got lost in all the help being given to get folks web pages straightened out... Reposting to try to get this tweaked.

I think I like the new Tools menu (I'll get a better feel tonight after I upload my next batch of pictures), but is there any chance you could move the "Crop Thumbnail" up one level in the menu structure? When using square thumbs, I generally have to adjust the thumbnail on ~40% of my pics so having it buried under "More" slows things down a bit.

Actually, while you are in the neighborhood, it would be nice if the Crop Thumbnail page defaulted to 1:1 on the ratio for galleries that use square thumbs

Jay

Thanks for the feedback, Jay - I'll make sure the team sees it!

HighLightPhotos · November 2, 2008

New Tools button not showing completely
The new Tools button for gallery options is a nice improvement, but it does not show completely on my pages.
I do not see the "This Photo" section in the drop-down menu!

My menus start with "Many Photos" then "This Gallery" and "My account" sections.

Here's a link to the gallery I am working with.

Something in my customization may be effecting this button from displaying correctly but I haven't a clue what!

I'd appreciate your help in fixing this on my site since I need the options that are under the "This Photo" portion of the drop down menu.

Thanks in advance!

(I created another thread on this, and then saw this one which is so active - will be glad to delete the other one if I get answered here. tnx)

darryl · November 2, 2008

colourbox wrote:

Yes, I miss this too. I used to type "re" to get Replace Photo and it was much faster than mousing especially when replacing multiple photos (since Smugmug has no bulk replace).

It started to break back when Smugmug made it hierarchical, but at least Page Up/Page Down to get to top/bottom of the menu still worked and I decided to live with it. But now the only shortcut that still works is using the arrow keys.

The problem now is that two of the functions I use the most, Replace and Arrange, are on the second level of the hierarchical menu. So not only are they out of reach of the type-ahead letters, but they require a third click for access. Now that the controls are at the top level, maybe the menu could be flattened since it starts much higher up on the page now? As it is, what used to take one click and typing a letter or two now takes three spatially precise mouse actions: aim and click to drop primary menu, aim (but don't click) to drop secondary menu, aim and click to select command. (i.e. more fatiguing, especially when scaled to many photos).

Edit: I just discovered that if a command is highlighted, you can press Return. That's good, but it makes me want even more to regain full keyboard control like on the application menu.

Instead if relying on unreliable browser keyboard navigation behavior, which is clearly brittle, SmugMug should implement single-key shortcuts a la Lightroom (hello Wade) or Gmail keyboard shortcuts. If you're in a gallery and you're not in a text input field, then R should fire up Replace, A should Arrange, C would Crop, and oh *please* H would Hide. This would make workflow sooooo much faster.

darryl · November 2, 2008

Allen wrote:

The new tools button is not that bad but it requires scrolling up to find it, bad
bad. Most will be viewing photos when this is needed and the tools button is
out of view.I can see no reason why it's not below the main photo like it used to be.

I think that's a function of big headers, which I feel, with all due respect, is a blight on the the web in general. If you're using the standard SmugMug headers, the tools button shows up fine, even on a measly 1024x768 screen. (See attached.)

It's really irritable that customize gallery can't be quickly gotten to. At least
move it to above "This Photo" in the drop and make the text red or something.
Requires reading the list to find it and reading is hard.
Just my .02

Agreed that Customize Gallery is a tad harder to get to now. But I've been hating those drop-down menus for, like, ever.

darryl · November 2, 2008

PHOTOlink wrote:

HORRID. absolutely awful
poorly thought out....

i want them BACK at the bottom of the image
and i would like to ONLY have the tools that i want/need
so i didn't have to wade through all that crap to get to the
few tools that i want... we should be able to switch what tools
we want on and off....

i mean, we have to go dragging thru MORE to get to
crop thumbnail or feature an image

...whats the use... the canges are here, and i doubt
they will go back....

BAD..

What? Respectfully, I disagree. You just have to drag to the right, but I think it's probably the same distance. Also, trying to find just the right option in a huge single drop-down menu is muuuuch harder than a hierarchical menu.

Andy · November 2, 2008

darryl wrote:

Agreed that Customize Gallery is a tad harder to get to now.

It is?

Nick, Schmoo, Ivar, and I want to know how

It sure seems as easy and not any bit harder (a mouse click and then find the choice on the menu). But could you and Allen tell me where I'm all wrong?

Andy · November 2, 2008

HighLightPhotos wrote:

The new Tools button for gallery options is a nice improvement, but it does not show completely on my pages.
I do not see the "This Photo" section in the drop-down menu!

My menus start with "Many Photos" then "This Gallery" and "My account" sections.

Here's a link to the gallery I am working with.

Something in my customization may be effecting this button from displaying correctly but I haven't a clue what!

I'd appreciate your help in fixing this on my site since I need the options that are under the "This Photo" portion of the drop down menu.

Thanks in advance!

(I created another thread on this, and then saw this one which is so active - will be glad to delete the other one if I get answered here. tnx)

Sorcerer {JT} fixed you up.

Montec · November 2, 2008

Very nice update on the Tools button

darryl · November 2, 2008

Andy wrote:

It is?

Nick, Schmoo, Ivar, and I want to know how It sure seems as easy and not any bit harder (a mouse click and then find the choice on the menu). But could you and Allen tell me where I'm all wrong?

Yes, it is more work. You have to drag further. There's more stuff in the way. :-}

Oh man, look at what you did. You made me bust out my l33t MS Paintbrush skillz:

(Yes, it's ugly and I feel dirty, but I don't do Photoshop, nor do I have a fancy Wacom tablet.)

Now keep in mind, I like the new tools. I really really do. I'm just saying Allen has a point about Customize Gallery being harder to get to. But I absolutely don't think we should go back to HTML drop-down menus or putting them below photos.

Andy · November 2, 2008

darryl wrote:

Yes, it is more work. You have to drag further. There's more stuff in the way. :-}

Oh man, look at what you did. You made me bust out my l33t MS Paintbrush skillz:

(Yes, it's ugly and I feel dirty, but I don't do Photoshop, nor do I have a fancy Wacom tablet.)

Now keep in mind, I like the new tools. I really really do. I'm just saying Allen has a point about Customize Gallery being harder to get to. But I absolutely don't think we should go back to HTML drop-down menus or putting them below photos.

talk about splitting hairz

Andy · November 2, 2008

Montec wrote:

Very nice update on the Tools button

Monte - thanks!

darryl · November 2, 2008

Andy wrote:

talk about splitting hairz

Well, sure. And I'm sure people will adapt (not like they have a choice.) Muscle memory can be retrained.

But I just wanted Allen (and others) to know that I know where they're coming from.

birchfield · November 3, 2008

Hi,
I still can't see the new tools
Would someone mind taking a look at my CSS to see what i've done wrong?

Thanks!
James

Andy · November 3, 2008

birchfield wrote:

Hi,
I still can't see the new tools
Would someone mind taking a look at my CSS to see what i've done wrong?

Thanks!
James

fixed

birchfield · November 3, 2008

Andy wrote:

fixed

Thanks Andy!

dogwood · November 3, 2008

Okay, would someone mind double checking this code? I want the tools buttons to show but I don't ever want the breadcrumb to show for the public on one category (http://petespringer.smugmug.com/Models). It's fine if the breadcrumb shows when I'm logged in.

So here's what I added to my CSS. Too much code or something I'm missing?

/* SHOWS TOOLS BUTTON */
#breadcrumb {display:none}
#breadcrumb {visibility: hidden;}
.loggedIn #breadcrumb {visibility: visible;
display: block;
}

/*Hides breadcrumb Navigation. */
.galleryPage #breadcrumb {display:none;}
#breadcrumb {display:none}
.loggedIn #breadcrumb {display: block;}

/* SHOW BREADCRUMBS WHEN LOGGED IN */
.loggedIn #breadcrumb {display: block;}

jphill · November 3, 2008

Help! Buy, Share, Tools, Add Photo Buttons all messed up.
I started to have trouble a few weeks ago on my gallery pages with the "BUY" and "SHARE" buttons. Here is a link to a gallery that the "BUY" and "SHARE" button are not working. The password is 61408. http://www.phillipsphotostudio.com/gallery/5165561_vBtzt

Now I am having the same trouble with my "ADD PHOTOS", "TOOLS", and so on on all my pages and homepage as of this weekend. I am a loss on how to fix this and tried to read the threads to get help but it is not working.

When I click on the menu buttons they appear to be missing options and are arranged funky. My site is http://www.phillipsphotostudio.com/

Any ideas on how I can fix this? I am not good with this code stuff so it is probably a mess when you look at it but if you could give it a shot that would be great.

Jennifers

jfriend · November 3, 2008

jphill wrote:

I started to have trouble a few weeks ago on my gallery pages with the "BUY" and "SHARE" buttons. Here is a link to a gallery that the "BUY" and "SHARE" button are not working. The password is 61408. http://www.phillipsphotostudio.com/gallery/5165561_vBtzt

Now I am having the same trouble with my "ADD PHOTOS", "TOOLS", and so on on all my pages and homepage as of this weekend. I am a loss on how to fix this and tried to read the threads to get help but it is not working.

When I click on the menu buttons they appear to be missing options and are arranged funky. My site is http://www.phillipsphotostudio.com/

Any ideas on how I can fix this? I am not good with this code stuff so it is probably a mess when you look at it but if you could give it a shot that would be great.

Jennifers<img src="https://us.v-cdn.net/6029383/emoji/ne_nau.gif" border="0" alt="" >

I think this is caused by a whole bunch of HTML errors in your navbar. Where did your navbar source come from. It appears that you have mismatched DIV, UL and LI tags that are probably messing up the HTML that comes after the navbar (including the buttons).

Your HTML must follow the form:

<div>
<ul>
<li>
</li>
</ul>
<div>

Some simple rules to make sure your HTML follows:

For every <li>, you must have a matching </li>
For every <ul>, you must have a match </ul>
For every <div>, you must have a matching </div>
You can nest a <ul></ul> pair inside of an outer <ul></ul> tag as long as everything is fully contained within the outer one. You can't, for example, have <ul><li><ul></li></ul></ul>

If you sort out the HTML for your navbar to follow these rules, I think things will start working again.

Here's a short helper page on how the UL and LI tags work.

Allen · November 4, 2008

jphill wrote:

...

Change your header nav html with this, fixes a few errors. Also with a
domain switches to relative links so either your domin or nickname (logging in)
sricks.

<!-- CSS Dropdown Nav Bar -->

<div align="center">
<div class="menu">

<ul>
<!-- First Main Menu Item - Home -->
<li><a class="drop" href="/" title="Phillips Photography">Home</a></li> 

<!-- Next Main Menu Item - Galleries -->
<li><a class="drop" href="/galleries" title="Galleries">Galleries
    <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="/gallery/6114993_jAjnt" title="Weddings">Weddings</a></li>
        <li><a href="/gallery/5969150_ymykK" title="Trash the Dress">Trash the Dress</a></li>
        <li><a href="/gallery/6110748_oQuML" title="Seniors">Seniors</a></li>
        <li><a href="/gallery/6115146_MvmXn" title="Children">Children</a></li> 
        <li><a href="/gallery/6353786_AHTMs" title="Family">Family</a></li>
        <li><a href="/gallery/4676174_APQtB" title="Nature">Nature</a></li>
        <li><a href="/galleries" title="Client Access">Client Access</a></li> 
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item - Package Rates-->

<li><a href="/gallery/4961007_poWmJ" title="Package Rates">Rates
    <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="/gallery/6116659_ibwTU" title="Wedding Packages">Weddings</a></li>
        <li><a href="/gallery/6116651_Py3fh" title="Senior Packages">Seniors</a></li>
        <li><a href="/gallery/4961007_poWmJ" title="Portrait Packages">Portraits</a></li>
        <li><a href="/gallery/5980217_t9s6N" title="More Packages">More</a></li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item - Photographer -->

<li><a href="/gallery/4949840_wD7tc" title="The photographer">  Photographer</a></li>

<!-- Next Main Menu Item - Contact Us -->

<li><a href="/gallery/4949840_wD7tc" title="Contact Us">Contact Us</a></li>

</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
</div>

<!-- End Navbar Code -->

jphill · November 4, 2008

Allen wrote:

Change your header nav html with this, fixes a few errors. Also with a
domain switches to relative links so either your domin or nickname (logging in)
sricks.

Thanks Al, the new html code works !!

Two more Q's.

Can you elaborate on your second comment about domain switches? I did not understand, sorry.

Also, a new problem now when I hover down the droplist under galleries and rates on the navbar they seem to fall behind the slideshow on my homepage or behind my filmstrips in my galleries. I had a fix in there at one time since this came up before but it does not seem to work with the new changes I made. Any suggestion to fix that?

Thanks tons! Jennifer

kazuri images · November 4, 2008

"arrange" feature
I'm CSS stupid so I'm not sure if I need some of the "breadcrumb" text or if i need to modify something else. I've lost my ability to arrange galleries/sub-categories in each category, you know, put them in a different order. There is no "arrange" button anymore. Here is a link to an example page: http://kazuriimages.smugmug.com/Images%20of%20Beauty/577604
I want my Portfolio first in line, or to arrange them otherwise. Can you help?

Thanks,
Darci
www.kazuriimages.com

jphill · November 5, 2008

jphill wrote:

Thanks Al, the new html code works !! Two more Q's.

Can you elaborate on your second comment about domain switches? I did not understand, sorry.

Also, a new problem now when I hover down the droplist under galleries and rates on the navbar they seem to fall behind the slideshow on my homepage or behind my filmstrips in my galleries. I had a fix in there at one time since this came up before but it does not seem to work with the new changes I made. Any suggestion to fix that?

Thanks tons! Jennifer

NEVERMIND!! I got it to work using another thread.

It only took me 3 hours of reading and trying around 25 ideas before I found one that worked but never the less it is fixed. Below is what I found on another thread that worked for me. I had to add 999.

Found one thing here, by changing the 000 here to 999 the drops showed
in IE. I've seen this weird thing before. Program I'm using to check, the drops
don't even show in IE wihout this change.

.menu ul li a:hover {
color: #036; /* main hover */
background: #999; /* main hover */

Barb · November 5, 2008

kazuri images wrote:

I'm CSS stupid so I'm not sure if I need some of the "breadcrumb" text or if i need to modify something else. I've lost my ability to arrange galleries/sub-categories in each category, you know, put them in a different order. There is no "arrange" button anymore. Here is a link to an example page: http://kazuriimages.smugmug.com/Images%20of%20Beauty/577604
I want my Portfolio first in line, or to arrange them otherwise. Can you help?

Thanks,
Darci
www.kazuriimages.com

Hi Darci

You first need to set the "sort by" to position on your homepage. From here:

http://kazuriimages.smugmug.com/

Look in the upper left of your galleries box where it says:

"Sort categories by: most recent - position"

Click on position.

You will then have an "arrange" link at the category and subcategory level in the upper left.

Holler if you run into any problems!

jfriend · December 18, 2008

{JT} wrote:

This has been added and will go out with the next update.

JT, here are three more minor CSS cleanup things that would be nice to see some time.

A typical breadCrumbTrail looks like this:

<div id="breadCrumbTrail">
<a href="/" class="nav">Friend</a> >
<a href="/Sports" class="nav">Sports</a> >
<span class="title">Barracudas - Fall 2008</span>
</div>

This allows you to target everything in the breadCrumbTrail with CSS except for two things.

The > signs in the breadcrurmb are not in any kind of span so you can't really reach them with separate CSS. This is particularly a problem when you are trying to hide one level of the breadcrumb and you are left with an extra > sign. It requires javascript and innerHTML modification to just hide an > sign. If it was in a uniquely identified <span> tag, one could do this just with CSS. I see folks regularly running into this and they either live with a less than desirable CSS customization or they have to resort to javascript when CSS should have been able to do the job.
It would be nice if we could separately style or hide with CSS, the different levels of the breadcrumb. To do that, we'd need a class or ID that was different for the first level, second level, etc...

Then, on the homepage and categories pages, it would be awesome if each category, sub-category or gallery minibox had a unique classname in it. Then, one could hide a category purely with CSS and wouldn't need the delCategory javascript function that a lot of people are using. You already generate unique category, sub-category and gallery class names that you put in the body tag. It would be awesome if that same tag went in that category, sub-category or gallery's minibox like this:

<div class="miniBox category_Sports">
or
<div class="miniBox gallery_5608869">

Then you could either style the category thumb uniquely or hide it, all with CSS. This can be done with javascript today, but even with JS, it's not easy to figure out which minibox is which. The delCategory technique has to look at the actual HTML for the category to try to pull out the name and match a pure text name which is brittle and quite complicated.

{JT} · December 18, 2008

Very good ideas!

As for breadcrumbs I have a few minor ideas that I am toying with. One is to use OL and LI tags for the breadcrumb parts (including the separators) and give them IDs, etc.

jfriend wrote:

JT, here are three more minor CSS cleanup things that would be nice to see some time.

A typical breadCrumbTrail looks like this:

<div id="breadCrumbTrail">
<a href="/" class="nav">Friend</a> >
<a href="/Sports" class="nav">Sports</a> >
<span class="title">Barracudas - Fall 2008</span>
</div>

This allows you to target everything in the breadCrumbTrail with CSS except for two things.
The > signs in the breadcrurmb are not in any kind of span so you can't really reach them with separate CSS. This is particularly a problem when you are trying to hide one level of the breadcrumb and you are left with an extra > sign. It requires javascript and innerHTML modification to just hide an > sign. If it was in a uniquely identified <span> tag, one could do this just with CSS. I see folks regularly running into this and they either live with a less than desirable CSS customization or they have to resort to javascript when CSS should have been able to do the job.

It would be nice if we could separately style or hide with CSS, the different levels of the breadcrumb. To do that, we'd need a class or ID that was different for the first level, second level, etc...

Then, on the homepage and categories pages, it would be awesome if each category, sub-category or gallery minibox had a unique classname in it. Then, one could hide a category purely with CSS and wouldn't need the delCategory javascript function that a lot of people are using. You already generate unique category, sub-category and gallery class names that you put in the body tag. It would be awesome if that same tag went in that category, sub-category or gallery's minibox like this:

<div class="miniBox category_Sports">
or
<div class="miniBox gallery_5608869">

Then you could either style the category thumb uniquely or hide it, all with CSS. This can be done with javascript today, but even with JS, it's not easy to figure out which minibox is which. The delCategory technique has to look at the actual HTML for the category to try to pull out the name and match a pure text name which is brittle and quite complicated.

jfriend · December 18, 2008

{JT} wrote:

Very good ideas!

As for breadcrumbs I have a few minor ideas that I am toying with. One is to use OL and LI tags for the breadcrumb parts (including the separators) and give them IDs, etc.

That would work fine for future styling. It would probably break a bunch of existing styling though, particularly javascript hacks that are doing search/replace.

jfriend · December 21, 2008

{JT} wrote:

Very good ideas!

As for breadcrumbs I have a few minor ideas that I am toying with. One is to use OL and LI tags for the breadcrumb parts (including the separators) and give them IDs, etc.

Hmmm. I just came across an interesting CSS styling problem. There appears to be no way to target CSS rules in the header area to be effective only on the password page. The body tag doesn't tell you that you're on the password page.

A user has multiple navbars in his header and hides/shows them as appropriate according to the context that he gets from the classes in the body tag. Now, along comes a password prompt page and the body tag just looks like:

<body class="tempClass notLoggedIn bodyColor_Black">

It is not until the <div id="content" class="galleryPassword passwordPage"> that a CSS rule can tell it's a passwordPage, but the header (and thus his navbars) are before and outside that div.

So, there's no clean way to define what part of his header should show on this gallery password page.

It would be much easier to solve this problem if we had:

<body class="tempClass notLoggedIn bodyColor_Black galleryPassword passwordPage gallery_6852981">

Then, he could explicitly target header CSS rules in the header area to this particular page and he could even vary them by gallery.

Allen · December 21, 2008

jfriend wrote:

...
A user has multiple navbars in his header and hides/shows them as appropriate according to the context that he gets from the classes in the body tag. Now, along comes a password prompt page and the body tag just looks like:
.

John, I have many navbars in my header and none appear on any password
page. I've done nothing special to hide them. Why would anyone want a nav
to show there anyway?

jfriend · December 21, 2008

Allen wrote:

John, I have many navbars in my header and none appear on any password
page. I've done nothing special to hide them. Why would anyone want a nav
to show there anyway?

The work-around is to hide navbars by default, then show them only in a known context (which means you may not have navbars in some contexts that you don't know exist). I presume that's what you did.

But, the point of this posting is that there's no way to use CSS to style the header uniquely in a password page. That seems like an oversight that is probably easy to fix so I thought I'd mention it.

Imagine you want a single navbar everywhere on your site except of the password page. Today, that's not that easy to write the CSS for. You have to hide it by default, then find every other known context to show it.

#navcontainer {display:none;}

.homepage #navcontainer,
.category #navcontainer,
.subcategory #navcontainer,
.galleryPage #navcontainer,
.keywordPage #navcontainer,
.datePage #navcontainer,
.searchResults #navcontainer {display:block;}

If you could uniquely style that header in the password page, all you'd have to do is one simple piece of CSS:

.galleryPassword #navcontainer {display:none;}

My point is that the latter is way, way simpler and the former is not something that most people would know how to do and I probably missed some things in the first one.

Allen · December 21, 2008

jfriend wrote:

...

All my log in pages go to this link and there is no active customization.

https://secure.smugmug.com/login.mg?go.......

whoa -- new layout on control buttons

Comments