Customize Gallery specific to folder only

TallPhotoGuyTallPhotoGuy Registered Users Posts: 160 Major grins
edited March 29, 2016 in SmugMug Customization
How do you have a customized gallery for all galleries in a folder vs sitewide

Comments

  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited 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">
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited 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;
    }
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • TallPhotoGuyTallPhotoGuy Registered Users Posts: 160 Major grins
    edited March 19, 2016
    Just getting back to this

    Where do i find the tag on each page to get class names
  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited March 19, 2016
    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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • TallPhotoGuyTallPhotoGuy Registered Users Posts: 160 Major grins
    edited 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
  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited March 19, 2016
    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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • TallPhotoGuyTallPhotoGuy Registered Users Posts: 160 Major grins
    edited 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
  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited 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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • TallPhotoGuyTallPhotoGuy Registered Users Posts: 160 Major grins
    edited 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
  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited March 20, 2016
    Flow down from /tinsley folder
    .sm-page-parentnode-9GMgcv .sm-page-widget-breadcrumb {display:none}
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited 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}
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • TallPhotoGuyTallPhotoGuy Registered Users Posts: 160 Major grins
    edited 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
  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited 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}
    Al - Just a volunteer here having fun
    My Website index | My Blog
Sign In or Register to comment.