Changing Breadcrumb Behavior

kgphotos

Hi. I was wondering if there was a way to change the way the breadcrumb works. The way it works on my site now it reads Galleries-Photo365-January- the full breadcrumb. I would like it to say "Galleries" on the Gallery Page, then when you click on a gallery, say, Photo 365, it says "Photo 365". Then when you're in the folder of Photo 365 and you click on a month it reads "Photo 365 - January". Is this possible? If so, how?

Many thanks for your replies. I really appreciate all the help I get on here. Everyone is very helpful!

my website: http://www.karengrantphotography.com

photoclick

.sm-page-widget-5214868 .sm-breadcrumb li{display:none;}
.sm-page-widget-5214868 .sm-breadcrumb li:last-child {display:inline;}

kgphotos

Do I put this code in "Entire site", "All Folders", or "All Galleries" ?

Thank you!

photoclick

Start with All Folders and see if it does what you need.

kgphotos

Ok. I added the code to my "All Folders" and it seems to work there, but when I go into a gallery I get the full breadcrumb- "Galleries- Photo 365- January". I'd like the gallery to read "Photo 365-January" when in a gallery, instead of the full breadcrumb. I did try and add this code to the "All Galleries" as well, but it didn't work. What am I missing?

Thanks for your help!

my website: http://www.karengrantphotography.com

photoclick

It should have worked.. logically thinking:) Try moving it all to the entire site. Meanwhile I'll check something and let you know if you hsoudl be doing something different.

photoclick

The code should absolutely work in both - Folders and Gallery levels. However, placing it in the Entire Site level makes more sense.

kgphotos

photoclick- Thank you for helping me out. I just put it in my entire site and it still doesn't work....I still get the full breadcrumb when I am in a gallery..."Galleries-Photo 365-January" instead of reading "Photo 365-January". I even tried adding it to the Theme CSS too and it still didn't work... Right now, it's on the entire site. You can check it out on my site.

I appreciate your help...

my website...http://www.karengrantphotography.com

Allen

This will hide everything but the gallery title. "Entire Site" CSS

.sm-page-widget-breadcrumb {visibility: hidden}
.sm-breadcrumb-item h1 {visibility: visible}

Edit: This works on my site but I'm getting the gallery title assigned as h1. I do not see that on your site
and can not, so far, find that settings on mine. Somewhere there is a select emphasize for gallery title in
breadcrumb.

kgphotos

Hi Allen...ok I tried your code and it hid the entire breadcrumb...so I went back to photoclick's code and I turned off "Display Full Breadcrumb" in All Galleries...it works, (yea!) but now there is a folder icon next to the Gardens. I am attaching an image of what it looks like...

How do I hide the folder icon...so it just reads "Gardens- Stevens-Coolidge Estate"

Many thanks for your help!

check it out on my website

my website: http://www.karengrantphotography.com

Allen

I don't think there is a way. None of the li's in the breadcrumb have class names. Maybe hiding
a number of (n)th of types but the number of levels would possibly not be the same.

See if this works. This does all under only Gardens
.sm-page-parentnode-CLs6tQ .sm-breadcrumb li:first-of-type,
.sm-page-parentnode-CLs6tQ .sm-breadcrumb li:nth-of-type(2),
.sm-page-parentnode-CLs6tQ .sm-breadcrumb li:nth-of-type(3),
.sm-page-parentnode-CLs6tQ .sm-breadcrumb li:nth-of-type(4) {display: none}

Or

This does all under Galleries for all galleries (might have to hide another layer (5) )
.sm-page-parentnode-kwSwT .sm-breadcrumb li:first-of-type,
.sm-page-parentnode-kwSwT .sm-breadcrumb li:nth-of-type(2),
.sm-page-parentnode-kwSwT .sm-breadcrumb li:nth-of-type(3),
.sm-page-parentnode-kwSwT .sm-breadcrumb li:nth-of-type(4) {display: none}

This seems to work because you don't show the breadcrumb on the folder pages.

photoclick

My bad - I was wrong with the widget ID in my initial code. For FOlders use what you are already using. To handle all the galleries use:

.sm-page-widget-5214868 .sm-breadcrumb li{display:none;}
.sm-page-widget-5214868 .sm-breadcrumb li:last-child {display:inline;}

Alternatively you can use just one snippet to handle ALL breadcrumbs... but be waned - it will literally be applied to breadcrumbs on ALL your pages:

.sm-page-widget-breadcrumb .sm-breadcrumb li{display:none;}
.sm-page-widget-breadcrumb .sm-breadcrumb li:last-child {display:inline;}

Regardless of which flavor you use - the above code hides ALL breadcrumb elements but the very last one. Is this what you are after?

kgphotos

YEA Allen! It works!!!!

I added this code you gave me:

This does all under Galleries for all galleries (might have to hide another layer (5) )
.sm-page-parentnode-kwSwT .sm-breadcrumb li:first-of-type,
.sm-page-parentnode-kwSwT .sm-breadcrumb li:nth-of-type(2),
.sm-page-parentnode-kwSwT .sm-breadcrumb li:nth-of-type(3),
.sm-page-parentnode-kwSwT .sm-breadcrumb li:nth-of-type(4) {display: none}

Now, since I am no CSS guru...do I have to add a new line of code each time I add a gallery to a folder? You have nth-of-type (2), nth-of-type(3), nth-of-type(4) {display:none}. So if I add a gallery to a folder do I have to add in a line of code that says " nth-of-type(5). I am not sure what the nth-of-type means.

Also, if I create a new folder and add a gallery to that folder do I need to do anymore CSS coding or am I all set?


Many thanks for your help!!clap

kgphotos

photoclick wrote: »

My bad - I was wrong with the widget ID in my initial code. For FOlders use what you are already using. To handle all the galleries use:

.sm-page-widget-5214868 .sm-breadcrumb li{display:none;}
.sm-page-widget-5214868 .sm-breadcrumb li:last-child {display:inline;}

Alternatively you can use just one snippet to handle ALL breadcrumbs... but be waned - it will literally be applied to breadcrumbs on ALL your pages:

.sm-page-widget-breadcrumb .sm-breadcrumb li{display:none;}
.sm-page-widget-breadcrumb .sm-breadcrumb li:last-child {display:inline;}

Regardless of which flavor you use - the above code hides ALL breadcrumb elements but the very last one. Is this what you are after?

Hi photoclick...

I am after this look....Galleries to start the breadcrumb. Click on the Garden Gallery on my Gallery page. The breadcrumb changes to Gardens. Click on Stevens-Coolidge Place. The breadcrumb reads Gardens-Steven-Coolidge Place.

An example is is located on Denise Goldberg's site...click on the link and you will see what I am referring to... http://www.denisegoldberg.com/Gallery/

Many thank for your help!

my website: http://www.karengrantphotography.com

denisegoldberg

kgphotos wrote: »

An example is is located on Denise Goldberg's site...click on the link and you will see what I am referring to... http://www.denisegoldberg.com/Gallery/

Sorry, but using that page on my site is probably causing at least some of the confusion because that doesn't do what you appear to be trying.

The Gallery page on my site is a page that contains folders.

• The gallery page is not in a folder so the breadcrumb is just the home symbol and Gallery representing the page.
• Once a folder is clicked from the Gallery page, the folder opens so the breadcrumb is the home symbol and the name of the folder.
• Once an entry is clicked from the folder, the folder or gallery opens. The breadcrumb shows the home symbol and the full structure, folder > gallery.

With this presentation no CSS was used to hide or show parts of the breadcrumb.

I've included a screen shot (below) of the breadcrumb options for all galleries as seen from this gallery - http://www.denisegoldberg.com/Travel/Midcoast-Downeast-Maine-2015/Acadia-and-autumn-2015/.

This isn't what you have described on your site. You seem to be trying to show only part of the breadcrumb. My site always shows the full breadcrumb because I want my viewers to be able to use it for navigation within a folder. Note that only works as far as getting to a top level folder; clicking the home icon takes the viewer to the home page, not the Gallery page.

Most of the folders that are entered from my Gallery page are simply folders containing galleries. The only folder that isn't is the travel folder. It is a folder that contains folders and those folders contain galleries.

--- Denise

kgphotos

denisegoldberg wrote: »

Sorry, but using that page on my site is probably causing at least some of the confusion because that doesn't do what you appear to be trying.

The Gallery page on my site is a page that contains folders.

• The gallery page is not in a folder so the breadcrumb is just the home symbol and Gallery representing the page.
• Once a folder is clicked from the Gallery page, the folder opens so the breadcrumb is the home symbol and the name of the folder.
• Once an entry is clicked from the folder, the folder or gallery opens. The breadcrumb shows the home symbol and the full structure, folder > gallery.

With this presentation no CSS was used to hide or show parts of the breadcrumb.

I've included a screen shot (below) of the breadcrumb options for all galleries as seen from this gallery - http://www.denisegoldberg.com/Travel/Midcoast-Downeast-Maine-2015/Acadia-and-autumn-2015/.

This isn't what you have described on your site. You seem to be trying to show only part of the breadcrumb. My site always shows the full breadcrumb because I want my viewers to be able to use it for navigation within a folder. Note that only works as far as getting to a top level folder; clicking the home icon takes the viewer to the home page, not the Gallery page.

Most of the folders that are entered from my Gallery page are simply folders containing galleries. The only folder that isn't is the travel folder. It is a folder that contains folders and those folders contain galleries.

--- Denise

Hey Denise...thank you for responding! I was hoping you'd chime in..you are very knowledgeable on here.
Ok...so what I want is they way you have your breadcrumbs work on your gallery page... I click on Gallery on your homepage and it brings me to your Gallery Page. I then click on your "Wandering Near Home" and the breadcrumb changes to "Wandering Near Home". Click on that and I click on "Summer 2015" and the breadcrumb changes to "Wandering Near Home- Summer 2015". That is how I would like my breadcrumbs to work.

Ok, I think I found my problem.... In the organizer I created a folder and stashed my folders and galleries into that. So from the way you have your site set up...I would have to create a separate page and put an "All Folders Content Block" on it and store it outside the folders, right? So for example, create a new page and Label it "Galleries". Store it outside the folders in the the Organizer. Go to the newly created "Galleries Page" and customize with an All Folders content block. Then add my folders. Is that it it?

Edit: I took out Allens coding so you could see how my breadcrumbs work..

Thank you so much for your input Denise! You are great!

By the way...you're an awesome photographer. I love the photos you take at Stevens-Coolidge Place! You are lucky to be within walking distance. I love going there, but have to have my husband take me, so I don't get to go as often as I'd like. I can't drive because of medical issues. If you'd like, read my About me Page. It explains why there.

denisegoldberg

kgphotos wrote: »

Hey Denise...thank you for responding! I was hoping you'd chime in..you are very knowledgeable on here.
Ok...so what I want is they way you have your breadcrumbs work on your gallery page... I click on Gallery on your homepage and it brings me to your Gallery Page. I then click on your "Wandering Near Home" and the breadcrumb changes to "Wandering Near Home". Click on that and I click on "Summer 2015" and the breadcrumb changes to "Wandering Near Home- Summer 2015". That is how I would like my breadcrumbs to work.

Ok, I think I found my problem.... In the organizer I created a folder and stashed my folders and galleries into that. So from the way you have your site set up...I would have to create a separate page and put an "All Folders Content Block" on it and store it outside the folders, right? So for example, create a new page and Label it "Galleries". Store it outside the folders in the the Organizer. Go to the newly created "Galleries Page" and customize with an All Folders content block. Then add my folders. Is that it it?

Edit: I took out Allens coding so you could see how my breadcrumbs work..

Thank you so much for your input Denise! You are great!

By the way...you're an awesome photographer. I love the photos you take at Stevens-Coolidge Place! You are lucky to be within walking distance. I love going there, but have to have my husband take me, so I don't get to go as often as I'd like. I can't drive because of medical issues. If you'd like, read my About me Page. It explains why there.

Thanks Karen!

You're right - I am very lucky to have Stevens-Coolidge Place so close to me. I love walking there with my camera.

Yes, the difference in breadcrumb behavior in our sites is that you have a top level folder called Galleries with all of your other folders within that folder. I have a top level page called Gallery. That page has a Folders content element on it that contains a set of selected folders. (The folders on that page happen to be all of the public folders on my site in the order I wanted them displayed.) Since selecting something on my "gallery" page opens a top level folder, the breadcrumb is the home icon followed by the folder name. The steps you outlined in your post should give you the structure you want (without any code!) - but you will also need to move your folders from inside of the Galleries folder to be at the top level of your organizer structure. I think this will be easier to understand if you compare the /browse page on your site and mine (as I've linked below).

Also - are you aware of the built-in browse page? It's not very useful on your site at present because you've placed all of your folders within the Galleries folder. If you move them to the top level then you will be able to use /browse. I didn't place /browse in my menu because my pages are public (as opposed to unlisted) and I wanted a page that just showed folders. You can see the difference between your browse page and mine, and the difference between the browse page on my site and the gallery page:

http://www.karengrantphotography.com/browse
http://www.denisegoldberg.com/browse
http://www.denisegoldberg.com/Gallery/

--- Denise

Allen

kgphotos wrote: »

YEA Allen! It works!!!!

I added this code you gave me:

This does all under Galleries for all galleries (might have to hide another layer (5) )
.sm-page-parentnode-kwSwT .sm-breadcrumb li:first-of-type,
.sm-page-parentnode-kwSwT .sm-breadcrumb li:nth-of-type(2),
.sm-page-parentnode-kwSwT .sm-breadcrumb li:nth-of-type(3),
.sm-page-parentnode-kwSwT .sm-breadcrumb li:nth-of-type(4) {display: none}

Now, since I am no CSS guru...do I have to add a new line of code each time I add a gallery to a folder? You have nth-of-type (2), nth-of-type(3), nth-of-type(4) {display:none}. So if I add a gallery to a folder do I have to add in a line of code that says " nth-of-type(5). I am not sure what the nth-of-type means.

Also, if I create a new folder and add a gallery to that folder do I need to do anymore CSS coding or am I all set?


Many thanks for your help!!clap

The .sm-page-parentnode-kwSwT means every page under the top folder "Galleries" the CSS will apply.
.sm-page-node-kwSwT is the class name of the "Galleries" folder. Notice the parentnode of that
name. Using the parentnode tells the CSS to flow down and apply to all its children.

Adding any new folder/gallery under "Galleries" folder the CSS will automatically apply.
Just keep the same number of levels or the nth will change, longer breadcrumb.

kgphotos

denisegoldberg wrote: »

Thanks Karen!

You're right - I am very lucky to have Stevens-Coolidge Place so close to me. I love walking there with my camera.

Yes, the difference in breadcrumb behavior in our sites is that you have a top level folder called Galleries with all of your other folders within that folder. I have a top level page called Gallery. That page has a Folders content element on it that contains a set of selected folders. (The folders on that page happen to be all of the public folders on my site in the order I wanted them displayed.) Since selecting something on my "gallery" page opens a top level folder, the breadcrumb is the home icon followed by the folder name. The steps you outlined in your post should give you the structure you want (without any code!) - but you will also need to move your folders from inside of the Galleries folder to be at the top level of your organizer structure. I think this will be easier to understand if you compare the /browse page on your site and mine (as I've linked below).

Also - are you aware of the built-in browse page? It's not very useful on your site at present because you've placed all of your folders within the Galleries folder. If you move them to the top level then you will be able to use /browse. I didn't place /browse in my menu because my pages are public (as opposed to unlisted) and I wanted a page that just showed folders. You can see the difference between your browse page and mine, and the difference between the browse page on my site and the gallery page:

http://www.karengrantphotography.com/browse
http://www.denisegoldberg.com/browse
http://www.denisegoldberg.com/Gallery/

--- Denise

Hi Denise...

No, I wasn't aware of the built-in browse page. I will fix it up. I am updating my site and wasn't aware of that.

Thank you bringing that to my attention.

-Karen

my site.... http://www.karengrantphotography.com

kgphotos

Denise,

I believe I got my gallery breadcrumbs to work like yours. If you could take a moment to check it out I'd appreciate it.

I also fixed up the browse page, too.

Thank you again for your help!

-Karen

my site....http://karengrantphotography.com

denisegoldberg

kgphotos wrote: »

I believe I got my gallery breadcrumbs to work like yours. If you could take a moment to check it out I'd appreciate it.

I also fixed up the browse page, too.

Thank you again for your help!

-Karen

my site....http://karengrantphotography.com

You're very welcome Karen!

The breadcrumb looks good, as does the /browse page.

--- Denise

kgphotos

denisegoldberg wrote: »

You're very welcome Karen!

The breadcrumb looks good, as does the /browse page.

--- Denise

Thank you Denise!