Customize Gallery specific to folder only

TallPhotoGuy · October 26, 2015

How do you have a customized gallery for all galleries in a folder vs sitewide

Allen · October 26, 2015

You can use the new "parentnode" class name to flow changes down to the children (sub-folders,
Pages and galleries) of a folder. These class names can be found in the <body> tag on each page.

Folder class name
.sm-page-node-XxXxX
For each child of that folder a class name is added
.sm-page-parentnode-XxXxX

So you can specify a CSS change for all the children of that specific folder.

Here's an example of a gallery body tag four levels down. Four "parentnode" names for folders up to the top.

<body style="" class="sm-user-professional sm-page sm-page-node sm-page-node-MV6vbT 
  sm-page-parentnode-zsB4B sm-page-parentnode-Qm7v4 sm-page-parentnode-FqkP4 
  sm-page-parentnode-Qn3Vv sm-page-gallery sm-page-gallery-album sm-page-initialized">

Allen · October 26, 2015

I show different top banners on many folders (legacy categories) on my site. The best method I've
found so far is add a blank HTML widget/box to the "entire site" at the top of page. Then with CSS
define the background of that box/widget for all the different locations.

small example: .sm-page-widget-12536016 is the blank widget class name.

/* site wide */
.sm-page-parentnode-zsB4B .sm-page-widget-12536016, /* flow down to children */
.sm-page-node-zsB4B .sm-page-widget-12536016 {        /* top folder */
   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;
}

     /* archery */
.sm-page-parentnode-D2dwD .sm-page-widget-12536016, /* flow down to children */
.sm-page-node-D2dwD .sm-page-widget-12536016 {        /* archery folder */
   background: url(/photos/i-2r6NDBZ/1/XL/i-2r6NDBZ.jpg) no-repeat; 
   height: 77px;  max-width: 1024px;
   position:relative;
   margin: 0 auto !important;
   background-size: contain !important;
}

TallPhotoGuy · March 19, 2016

Just getting back to this

Where do i find the tag on each page to get class names

Allen · March 19, 2016

TallPhotoGuy wrote: »

Just getting back to this

Where do i find the <body> tag on each page to get class names

Look in the page source. Do a search on "<body". The sm-page-node-xxxxxx is the unique class name
for a page, folder, page or gallery. The sm-page-parentnode-xxxxx is a parent folder and ones will
listed all the way to to top folder.

Page source example of one of my galleries.

...
...
</head>
[COLOR=Red]<body [/COLOR]class="sm-user-professional sm-page sm-page-node [COLOR=Red]sm-page-node-3qFpzx[/COLOR]  
     sm-page-parentnode-zsB4B sm-page-parentnode-Qm7v4 sm-page-parentnode-Dr59hs 
     sm-page-parentnode-pGcFvm sm-page-gallery sm-page-gallery-album">
<div id="sm-page-content" class="sm-page-content">.....
...

Single gallery, or folder or page, CSS using its unique class name.
.sm-page-node-3qFpzx {color:#fff}

You can apply CSS to everything below a specific folder using the parentnode class name.
From page source above using the direct parent folder of this gallery. This CSS will flow down
and apply to everything below the folder, even sub-folders.
.sm-page-parentnode-pGcFvm {color:#fff}

Looks like the parentnodes are listed from top to bottom down the tree in the body class.

TallPhotoGuy · March 19, 2016

looking in my source i would add this to my css

.sm-page-node-fQNc3j
.sm-page-parentnode-NWC5g
.sm-page-parentnode-9GMgcv
.sm-page-parentnode-4HDzRm

is that correct, ignoring the actual name

Allen · March 19, 2016

TallPhotoGuy wrote: »

looking in my source i would add this to my css

.sm-page-node-fQNc3j
.sm-page-parentnode-NWC5g < homepage
.sm-page-parentnode-9GMgcv
.sm-page-parentnode-4HDzRm

is that correct, ignoring the actual name

Assuming this order is correct
.sm-page-parentnode-NWC5g < homepage .sm-page-node-NWC5g
.sm-page-parentnode-9GMgcv < folder .sm-page-node-9GMgcv
.sm-page-parentnode-4HDzRm < sub-folder .sm-page-node-4HDzRm

.sm-page-node-NWC5g is your homepage.
.sm-page-parentnode-NWC5g is used to flow down from your homepage.
Any CSS applied to parentnode will affect your whole site.

I assume you want to start in the sub-folder 4HDzRm

If you go to the folder where you want to start the CSS to flow down. Verify that 4HDzRm is correct.
Grab that class name (assuming .sm-page-node-4HDzRm) of that folder
Use it also for the parentnode for flow down.

.sm-page-node-4HDzRm whatever, << changes just this folder
.sm-page-parentnode-4HDzRm whatever << flows down to all below
{...}

It would be easier to describe if you posted a link to the starting folder.

TallPhotoGuy · March 19, 2016

hewitt.smugmug.com is my Homepage.

hewitt.smugmug.com/tinsley and below I want to manage as a separate design, etc. /tinsley will have a folder per year, /tinsley/2008.... within /tinsley/2008 there will be one or more galleries, pretty simple. If I make a change to the /tinsley design, etc I want the change to propogate to all of /tinsley. I don't want each folder or gallery to be custom. Does this help

Allen · March 19, 2016

This targets only the /tinsley folder page.
.sm-page-node-9GMgcv
This targets all sub-folders and galleries (flow down) under the /tinsley folder
.sm-page-parentnode-9GMgcv

I use this method to show different banners for most top folders but you can start the flow down at any level.

TallPhotoGuy · March 20, 2016

I do not think I am asking the right question. I
When I add a new folder/gallery I want its design to be different than my current homepage design, which I believe is Willow from smugmug. For exampled my old design had breadcrumbs in each gallery. I want to use a menu instead. Right now each gallery is custom, removing the breadcrumb and adding a menu. Thats a lot of work. I want it ti be automatic within Tinsley and below

Allen · March 20, 2016

Flow down from /tinsley folder
.sm-page-parentnode-9GMgcv .sm-page-widget-breadcrumb {display:none}

Allen · March 20, 2016

For the menu add it site wide then. "menu" = appropriate CSS

hide everywhere
"menu" {display:none}
show Flow down from /tinsley folder
.sm-page-parentnode-9GMgcv "menu" {display:block}

TallPhotoGuy · March 29, 2016

Allen

Still a bit confuse. Attached is the code from 5 pages. The 1st 4 pages are my new format, the 2015 path. The 2014 page is the old format. Right now I have to customize each level. At the 3 level I have 20 years or 20 page node names, within each year are about 4 galleries, another 4 page node names or 80 total. Whats needed to minimize custommization

Tinsley

Tinsley/Tinsley-Main

Tinsley/Tinsley-Main/Tinsley 2015

Tinsley/Tinsley-Main/Tinsley 2015/Rollercoaster-2015

Tinsley/Tinsley-Main/Tinsley 2015/Tinsley-Caroline-2015

Allen · March 29, 2016

/Tinsley
<body class="sm-page sm-page-node sm-page-node-9GMgcv sm-page-parentnode-NWC5g">

Tinsley/Tinsley-Main
<body class="sm-page sm-page-node sm-page-node-qv3xRx sm-page-parentnode-NWC5g sm-page-parentnode-9GMgcv">

I would put the CSS in "entire site"

The 1st red is the class name of the Tinsley folder. If you go down a level from that folder you'll see
the class name for the parentnode of the Tinsley folder.

So if you use the parentnode of the Tinsley folder in a CSS rule it will apply to everything in the Tinsley folder.
(Flow down to all below)

.sm-page-parentnode-9GMgcv whatever {whatever}

If you want to apply the CSS to the Tinsley folder AND everything below you have to add the folder itself to the rule.

.sm-page-node-9GMgcv whatever,
.sm-page-parentnode-9GMgcv whatever {whatever}

Customize Gallery specific to folder only

Comments