Gallery navigation

hadron · June 5, 2018

I currently don't use many sub folders on my SM site. For example I have 120 galleries in one folder. This causes a folder navigation problem. That is when a visitor is in on of these 120 folders, say folder 100, and viewing photos, to get back to folder 99 is difficult. The current breadcrumbs take you back to the top gallery of the 120. Then one has to scroll down to find folder 99. Not so good.

So my question is, if i create annual folders (say 2000, 1999, 1998, etc.) and create monthly sub-folders in each year, is there a way to present this annual/monthly structure (like a file tree list) in a left side panel on each folder/gallery page. The viewer could then just navigate to a different year/month by clicking on a folder on that tree list.

Or can this year/month panel appear as a sliding panel at the top of EACH SM folder page?

I have searched the SM help, but can not find any example site layout which looks like what i want.

Thanks, Hadron

hadron · June 5, 2018

The left navigation panel should look something like the left pannel when in the Smugmug ORGANIZE SITE page...

denisegoldberg · June 5, 2018

@hadron said:
So my question is, if i create annual folders (say 2000, 1999, 1998, etc.) and create monthly sub-folders in each year, is there a way to present this annual/monthly structure (like a file tree list) in a left side panel on each folder/gallery page. The viewer could then just navigate to a different year/month by clicking on a folder on that tree list.

Have you considered allowing access to this structure using a menu? You could build a drop-down menu with the year as the top level element and then show months within years.

See help page Create a navigation menu.

sallyb · June 5, 2018

@hadron said:
The left navigation panel should look something like the left pannel when in the Smugmug ORGANIZE SITE page...

I have been pounding through a similar issue for the last 2 weeks. I tried a lot of things but, in the end, I decided to do it with menus. Much better in my case.

Allen · June 5, 2018

Example of tree from a top folder. Galleries setup by year/month/day
Hover "Birds" in top menu then > "Birding Field Trips" > then any year
https://www.photosbyat.com/Birds/2018-Birding/Birding-2018-April

leftquark · June 5, 2018

Yep - the Menu Content Block should make it easy to do Year -> Month -> Gallery

hadron · June 6, 2018

Thanks all. I will experiment with the Menu Content block...

hadron · June 7, 2018

This is NOT easy. SM help team says it requires a PHD in CCS programming. (I programmed in assembler in the 1970s )

The problem is that I need different NAV Menus for different folder structures. Using the NAV Menu Content block makes the menus the same for all folders and or galleries. Not what I want...

My main Family folder has many other folders and galleries, and my main Vacation folder has many other folders and galleries. Each (top level folder (Family and Vactions) require their own Menus. In other words the Family menu should appear on ALL folders and galleries below the main Folder.

Why not have the the NAV Menu content block should ONLY affect all folders and galleries of the Folder you set it up for, and below.

Right now the Navigation Content block applies either to Site, All Folders, Make this Folder Custom, and Galleries. None of these options will do what I want, as far as I have tested.

Please advise if you have any other suggestions.

Thanks.

Allen · June 7, 2018

You can add simple CSS to show different menus on different areas of your site. I do this for top banners.

The banners is easier because I add one single photo widget/box, leave it blank and define backgrounds to flow down by top folder.
Hint here, my current CSS: https://www.photosbyat.com/Banners/n-xfXD7

For menus you'll probably have to add each different one and turn on/of for different areas using parentnode.

Each of my top menus are assigned a different widget class name as are all widgets so using CSS turn one on and other off.
.sm-page-widget-20281047
.sm-page-widget-964555

hadron · June 7, 2018

Thanks Allen, your menu approach would sort of work for me just fine.
But I need a little help to understand your CCS (my questions at the end).

Regarding your Macros:
.sm-page-parentnode-kQnr7 .sm-page-widget-12536016,
.sm-page-node-kQnr7 .sm-page-widget-12536016 {
background: url(/photos/i-snFwjZ3/1/XL/i-snFwjZ3.jpg) no-repeat;
height: 154px; max-width: 1032px;
position:relative;
margin: 0 auto !important;
background-size: contain !important;
}

.sm-page-parentnode-Qm7v4 .sm-page-widget-map h2,
.sm-page-parentnode-Qm7v4 .sm-page-widget-map h3 {
color: gold;
}

Where do the .sm-page-node-kQnr7 .sm-page-widget-12536016 numbers come from.
Also, .sm-page-parentnode-Qm7v4
The Macros at the end of your CCS define the widgets, right?
Where do I learn more about widgets?
When you hover on "Birding Field Trips", the years panel shows, and when you hover on a year, the months panel shows up. How is this done?

Thanks, Hadron

Allen · June 7, 2018

Using Firefox I right click an element on the page and pick "Inspect Element". (Other browsers have this also)
This brings up box with html of page and the clicked element highlighted. In this case I clicked on Home of top menu.

Example below I right-clicked on top menu Home button. The li line with the home link was highlighted. Notice the class name sm-page-widget-20281047 in the top line. It's usually up about 5-8 lines from the highlighted line. This is one of the class names that applies to this unique widget. With that number it is unique to your site. All widgets have a different unique number. Two menus will have different numbers.

<div id="sm-page-widget-PHR5ZKND" class="sm-page-widget sm-page-widget-nav sm-page-widget-20281047" data-typeid="20281047">
       <div class="sm-page-widget-content">
       <div class="sm-page-widget-header"></div>
      <div id="sm-page-widget-Zgfp88Kw" class="sm-page-widget-body">
      <div class="sm-page-widget-nav-popover sm-page-widget-nav-horizontal sm-page-widget-nav-color-default 
                            sm-page-widget-nav-color-default sm-page-widget-nav-m sm-page-widget-nav-center 
                           sm-page-widget-nav-toplinks-regular sm-page-widget-nav-sublinks-regular 
                           sm-page-widget-nav-sublinks-separator">
             <ul class="horizontal">
                               <li class="sm-page-widget-nav-toplink"><a href="https://www.photosbyat.com">Home</a></li>

...
...

Now at the top of the html (scroll to top) look for <body class="sm-page-...." .... > There are a lot of class names assigned to this page.

This unique page is named sm-page-node-Qm7v4 and is my top Birds folder. The sm-page-parentnode-zsB4B (Site homepage) and any others if seen are parent folders to this page, gallery or folder.

In your case you will be looking to flow down from an upper folder like Family.
Go the Family top folder and get its unique class name. See <body> tag.

The .sm-page-node-Qm7v4 is the top folder to flow down from. In this case my top Birds folder.
Using .sm-page-parentnode-Qm7v4 says to flow down to all below this top folder. The parentnode only allies to pages below this top folder so another line, .sm-page-node-Qm7v4, takes care of the top folder.

This CSS below applies to two menus. show one and hide other.
1st menu
.sm-page-node-Qm7v4 .sm-page-widget-12536016,
.sm-page-parentnode-Qm7v4 .sm-page-widget-12536016 {display:block}
2nd menu
.sm-page-node-Qm7v4 .sm-page-widget-xxxxxxxxx,
.sm-page-parentnode-Qm7v4 .sm-page-widget-xxxxxxxxx {display:none}

I would create one CSS rule to hide all unique menus everywhere and add CSS to show on individual areas.

Show everywhere. Your basic menu to show everywhere.
.sm-page-widget-xxxxxxxxx,
.sm-page-widget-xxxxxxxxx {display:block}

Then below that show specific area menus.
/* hide basic menu */
.sm-page-node-Qm7v4 .sm-page-widget-11111111,
.sm-page-parentnode-Qm7v4 .sm-page-widget-11111111 {display:none}
/* show new specific menu */
.sm-page-node-Qm7v4 .sm-page-widget-22222222,
.sm-page-parentnode-Qm7v4 .sm-page-widget-22222222 {display:block}

hadron · June 8, 2018

Thanks very much Allen, it will take some time for me to absorb what you have done.

hadron · June 10, 2018

Hello Allen,

Thank you for trying to explain your CCS. I have studied your posts on CCS, understand some of it, but I have to admit it is too difficult for me to follow completely. I have read a couple of your other posts (incl. CSS Flowdown to Sub-Folders), but can't figure it out. I would have too many basic questions to understand what your CCS is doing, and make it work for me.

I'm assuming that your CCS code was NOT created using SM drag and drop tools, right? But rather hand coded.

Hence, I'm giving up on Nav Menus until SM allows a way to create different folder Nav Menus which do NOT work across ALL folders, but work rather on an Inherited basis.

I will try to use some of the other SM content blocks to do what I want...

Thanks,
Hadron

Gallery navigation

Comments