This is another one of these techie posts in response to requests to describe how I implemented some features on my web site.
My site is based on the CE3 series web galleries by The Turning Gate. One of its features is a powerful framework for PHP extensions, called phplugins. They enable me to customize the look and feel of my web site without the need to modify any of the original source code.
In this post I talk about how I created my breadcrumbs using a PHP function that is called from a phplugins hook. The breadcrumbs show the location of the current page looked at and not the path taken to arrive at that page.
In following example, the reader is in the San Francisco gallery which is a sub-gallery of California which itself is a sub-gallery of North America.
I created a small test page where the final result is shown. The theme used is the CE3 Asphalt.
Pre-Requisites
- You have a TTG CE3 Lightroom web gallery
- Phplugins are enabled. If you don’t know what this means, please read this first
- Custom CSS is enabled (link)
Setup
First some PHP code that does all the heavy work to create the breadcrumbs. This goes into phplugins/phplugins.php. The function breadcrumbs splits the URL into its individual linked crumbs, concatenates them with the $separator and adds the $pagetitle. This function directly outputs the result as html.
function breadcrumbs( $pagetitle, $separator ) {
// Translate URL into bread crumb trail.
$crumb=explode("/",$_SERVER["PHP_SELF"]);
echo '<a href="/">Home</a> '. $separator . ' ';
while(list($key,$val)=each($crumb)){
$dir='';
if($key > 1){
$n=1;
while($n < $key){
$dir.='/'.$crumb[$n];
$val=$crumb[$n];
$n++;
}
$val = str_replace('_', ' ', $val); // Replace underscore with whitespace
if($key < count($crumb)-1) echo '<a href="'.$dir.'">'.ucwords(strtolower($val)).'</a> '. $separator . ' ';
}
}
$val = str_replace('_', ' ', $pagetitle); // Replace underscore with whitespace
echo ucwords(strtolower($val));
}
I place my breadcrumbs at the top of the content area just below the navigation bar using the ttg_canvas_top() phplugins hook.
- With $separator I can set the character used between the breadcrumbs. More on this later.
- Since I don’t want breadcrumbs on the frontpage, I bypass my breadcrumbs code when called on the home page.
- The breadcrumbs are encapsulated in a <div> named “my-breadcrumbs”. This is the hook for CSS styling.
- You can only have ONE ttg_canvas_top() function. If you already have one, you need to combine the two (Mat shows how to do this on his blog).
// Start of page content
function ttg_canvas_top( $style, $path ) {
$separator = '|'; // Breadcrumbs separator
if (G_STYLE == 'CE3-PAGES-HOME') {
// no breadcrumbs on home page
echo '<!-- No Breadcrumbs on home page -->';
} else {
echo '
<!-- Breadcrumbs -->
<div id="my-breadcrumbs" class="tab-content clearfix">
<div class="mantle clearfix">
<div class="core clearfix">
';
if (G_STYLE == 'CE3-GALLERY' || G_STYLE == 'CE3-AUTOINDEX') {
$tokens = explode('/', CURRENTPAGELOCATION);
breadcrumbs($tokens[sizeof($tokens)-1], $separator);
} else {
breadcrumbs(substr(CURRENTPAGENAME, 0,strrpos(CURRENTPAGENAME,'.')), $separator); // Remove suffix in page name
}
echo '</div>';
echo '</div>';
echo '</div> <!-- #my_breadcrumbs -->';
}
} // End ttg_canvas_top
Next a bit of CSS styling is needed so that my breadcrumbs match the look and feel of the entire site. On devices with a small screen, breadcrumbs are disabled. All the CSS code goes into phplugins/css/custom.css.
/* My Breadcrumbs
=================================================== */
#my-breadcrumbs {
margin: 0 auto;
padding: 0 24px;
font-size: 0.8em;
}
#my-breadcrumbs .mantle {
margin: 0px auto 0px;
padding: 10px 0;
width: auto;
max-width: 1132px;
}
/* No breadcrumbs on small screens */
@media only screen and (max-width: 991px) {
#my-breadcrumbs {
display: none;
}
}
Customization
One simple way to customize the breadcrumbs is to use a different separator:
And these are the corresponding code settings:
$separator = '|'; $separator = '>>'; $separator = '<i class="icon-caret-right"></i>'; $separator = '<i class="icon-double-angle-right"></i>'; $separator = '<i class="icon-arrow-right"></i>'; $separator = '<i class="icon-angle-right"></i>';
I really like the Font Awesome and its ease of use. Adding the class icon-large provides a nice effect:
$separator = '<i class="icon-angle-right icon-large"></i>';
Or a little color to freshen up the look:
$separator = '<i style="color: red;" class="icon-angle-right icon-large"></i>';
Limitations and Design Choices
I designed the breadcrumbs function with the structure of my website in mind. It is not intended to fit all situations.
There are a few limitations and assumptions:
- The breadcrumbs are built from the root directory, e.g. www.exemplar.com. If your site is located in a sub-folder www.exemplar.com/testsite, then the crumbs will include an additional level: eg, Home | Testsite | Page-x instead of Home | Page-x
- The breadcrumbs are derived from the URL. An underscore character is replaced with whitespace; dash characters are preserved. In order to have nice breadcrumbs, it is important that you use nice album names. So don’t call your Albums Gallery-1, Gallery-2 ….; use descriptive names. This is specially important for gallery sets!
- Breadcrumbs are not visible on screens smaller than 992px. This can be changed via CSS.
Donate
Do you like my breadcrumbs? Do you want to use them on your site? Please show your appreciation by donating to my pizza&wine fund. This helps keep me motivated to post other TTG CE3 related customizations.
Prints and Licensing: All images are available as fine art prints and for licensing. Please contact me for more details.
Hi Daniel,
do you know if your breadcrumbs would also work with the TTG CE3 WordPress theme as the base of a website?
Thank you!
Hi Markus
I didn’t try to use my breadcrumbs for the a WordPress based website. It is something I like to look at in the future.
For my blog section on my site, I created a custom breadcrumb implementation. But this is not ready yet for a public release.
– Daniel
Daniel, you made my day!
This provides me the freedom to change the Navigation elements as I like but still leaving the ttg package untouched – cool! I can now leave the computer and go watching and photographing breaching Humpback Whales 🙂
Enjoy the wine/pizza donation and should you ever make it to Sydney again (and I’m still here) let me know and I will add a bottle of Shiraz and a Pizza at my favourite pizzeria!
Cheers mate.
Great! I am happy that it works for you! Good luck chasing breaching Humpback Whales!
Hi Daniel,
I can only join the other commentators: Your stuff is eaasy to integrate and produce the breadcrumbs I was looking for. I have got one problem though, which (I think) Markus has already addressed, but I dont’t get it – maybe you can help me here.
I would like to replace the “Galleries” titel with “Galerien” exactly like Markus. When I do that in TTG Pages, this works all fine – I simply change the “Label” to “Galerien” and it shows up in the Navigation as expected, but the breadcrumbs still show “Galleries”.
I’m afraid that if the breadcrumbs are developped from the URL than this should be expected, because the directory is still called “galleries” – but you told Markus: Yes you can rename “Galleries” and the breadcrumbs should work?
I am confused – can you help me out here please? I can’t get it working.
Alfred
Hi Alfred,
The function breadcrumbs() needs to be enhanced in order to replace the crumb ‘galleries’ with ‘Galerien’. To do this, two additional calls to str_replace are needed right after the existing str_replace calls:
$val = str_replace('_', ' ', $val); // Replace underscore with whitespace $val = str_replace('galleries', 'Galerien', $val); // Replace galleries with Galerien <-- NEWThis should do the trick.
Regards,
Daniel
Hi Daniel,
Great idea and super implemented!
so far I have always written my breadcrumbs right within the Publisher in the page container. It works fairly well, but it is also error prone.
On my test page http://ce3.der-canonier.de/galleries/03-landschaft/01-gran_canaria/ the final version can be seen.
Is it possible in your php programming, to replace “Home” by the image and to complement the icon at the end?
Because I want to build my breadcrumbs as on the test page
sunny greetings
Markus
Thank you, Markus. In my previous implementation, I created the breadcrumbs by hand. After a while it just got too painful. Now I don’t have to think about them anymore 🙂
Yes, the generation of the breadcrumbs can be modified to add the home and back icons.
1) To change home to an icon: in the breadcrumbs() function, you need to replace the ‘home’ text with your image:
replace with something like
2) To add your ‘back’ icon at the end of the crumbs, just add the text after the breadcrumbs() function calls:
That should do the trick
Daniel
Note: Remove the whitespace after the ‘<'.
I can sign it 🙂
You are my hero – a donation is on the way.
But for that I have still some small questions
1)
– the image worked. Can I get the breadcrumbs to the center / or to the lower edge of the image?
– To remove the separator prior “Galleries”, it is enough to delete the command “$ Separator” from echo ‘ ‘. $ separator. ”, ?
– can I rename “galleries” in the German spelling “Galerie”?
– I suspect that I can change the color of the current page to red (or the fonts) in custom css?
Then I have to rename all my galleries. So far I have 01 – … 02 – … etc. used for setting for the order.
2) I find the function “breadcrumbs()” in “function ttg_canvas_top” twice:
if (G_STYLE == ‘CE3-GALLERY’ || G_STYLE == ‘CE3-AUTOINDEX’) {
$tokens = explode(‘/’, CURRENTPAGELOCATION);
breadcrumbs($tokens[sizeof($tokens)-1], $separator);
} else {
breadcrumbs(substr(CURRENTPAGENAME, 0,strrpos(CURRENTPAGENAME,’.’)), $separator); // Remove suffix in page name
}
In the first case, it looks like http://ce3.der-canonier.de/galleries/03-landschaft/01-gran_canaria/ without a distancance and an Icon.
In the secand case nothing appears
Hi Marcus,
– Yes you can rename galleries
– Yes, all styling attributes can be changed using custom css or using the embedded “style” as I did with the red ‘>’ separator example above.
– My breadcrumbs function uses the page name to create the crumbs. With some PHP code the numbers could be removed. One slow way would be to use str_replace(…) for each number.
– You need to add the ‘go back’ code after each breadcrumbs() call. Please note that you have to remove the whitespace characters for in “< i", "< a" and "< img". I had to add it so WordPress could display the source code without using it as special formatting... Cheers, Daniel
To remove the numbers with php, following line should do the trick:
To remove the numbers and dashes from the beginning of the crumb:
Breadcrumbs is cool. A donation is forthcoming. Just one problem with it: I’m trying to decrease the font size of the breadcrumbs and can’t seem to do it. Changing font-size in the custom.css has no effect, tried different em settings, small, smaller, px, and %. Size won’t change. I notice it is wrapped in it’s own div and I’m not a professional programmer but am wondering if font size or style would need to be contained in the div for it to work. Any idea what I’m doing wrong?
TIA Mark.
Hi Mark,
Following few lines of code show how to change the size of the breadcrumbs.
In my example, there is already a reference to #my-breadcrumbs where I set the font-size. So either update it in there or add the statement at the end of custom.css.
– Daniel