Breadcrumbs for TTG CE4

This is another one of these techie posts in response to requests to describe how I implemented some features on my web site.

Last year I showed how to add breadcrumbs to websites powered by The Turning Gate‘s CE3 series of Lightroom web plugins. A month ago, they introduced the CE4 version. All the Publisher managed galleries and gallery sets now natively support breadcrumbs. But there is no support for breadcrumbs for the other pages. I appreciate a consistent look of my web pages so I went ahead and updated my breadcrumbs for CE4.

dl top

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 CE4 related customizations.

[paypal-donation]

Pre-Requisites

  • You have the TTG CE4 Pages Lightroom web plugin
  • Phplugins are enabled. If you don’t know what this means, please read this first

Setup

I restructured the breadcrumb code to make it easier to install and use. The following PHP code goes into ‘phplugins/phplugins.php’.

function breadcrumbs($home, $crumb, $separator ){
echo '
<!-- Breadcrumbs -->
<div id="breadcrumb-container" class="block-id the-block clearfix">
<div class="mantle clearfix">
	<div class="core clearfix">
	<ul class="breadcrumbs">';
		if ($home != ''){
			echo '
			<li class="crumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
			<a href="/" itemprop="url"><span itemprop="title">'.$home.'</span></a></li>
			<li class="crumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> '.$separator.' </li>
			';
		}
		echo '
		<li class="crumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
			<span itemprop="title">'.$crumb.'</span>
		</li>
	</ul>
	</div>
</div>
</div> <!-- #breadcrumb-container -->
';	
}

function breadcrumbs_for_pages($style, $path){
$separator = '<i class="fa fa-angle-right "></i>';
$home = "Home";

// Special pages
if (ALBUMTITLE == 'Search Results' ) {
	breadcrumbs($home, 'Search Results', $separator);
} else {		
	if (G_STYLE == 'CE4-PAGES-GALLERIES') {
		breadcrumbs($home, 'Galleries', $separator);
	} elseif (G_STYLE == 'CE4-PAGES-SERVICES') {
		breadcrumbs($home, 'Services', $separator);
	} elseif (G_STYLE == 'CE4-PAGES-INFO') {
		breadcrumbs($home, 'Info', $separator);
	} elseif (G_STYLE == 'CE4-PAGES-ABOUT') {
		breadcrumbs($home, 'About', $separator);
	} elseif (G_STYLE == 'CE4-PAGES-CONTACT') {
		breadcrumbs($home, 'Contact', $separator);
	} elseif (G_STYLE == 'CE4-CART') {
		breadcrumbs($home, 'Cart Checkout', $separator);
	} elseif (G_STYLE == 'CE4-WORDPRESS') {
		breadcrumbs($home, 'Blog', $separator);	
	}
}
}

The function ‘breadcrumbs’ creates the crumb trail for a page while the function ‘breadcrumbs_for_pages’ detects the page the breadcrumbs have to be created for. There are a few customization options available at the top of ‘breadcrumbs_for_pages”. They should match what you set in Publisher Admin panel (http://your_site.com/ttg-be/publisher/?c=admin&a=list_settings):

Breadcrumb settings

  • $separator: That’s the breadcrumb separator.
  • $home: Thats the breadcrumb home name. If it is empty (“”), the home breadcrumb is not shown.

To activate the breadcrumbs, there is one more function to add to phplugins.php:

function ttg_canvas_top( $style, $path ) { 
	breadcrumbs_for_pages($style, $path);
}

You may only have ONE ttg_canvas_top() function in phplugins.php. In case you already have one, you need to combine the two (Mat shows how to do this in the CE4 documentation).

Unfortunately, the galleries breadcrumb styling is located in the gallery template CSS file which for obvious reasons is not included in the Pages CSS code. You need to add some lines to ‘phlugins/css/custom.css’ for the breadcrumbs to look nice. Below are the lines I use for my site. Best is, when you copy the breadcrumb styling from your gallery template file (‘/ttg-be/templates/gallery/your-gallery-template-name/lib/css/style-component.css’).

#breadcrumb-container.the-block .mantle {
	margin-top: 8px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	}

#breadcrumb-container.the-block .core {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	}

ul.breadcrumbs {
	line-height: 1.5em;
	margin: 0;
	padding: 0;
	}

ul.breadcrumbs li {
	display: inline;
	font-size: smaller;
	line-height: 1.5em;
	list-style: none;
	margin: 0 4px 0 0;
	padding: 0;
	}

Limitations and Design Choices

Breadcrumbs are designed for a CE4 Pages based setup with the WordPress blog located in the ‘/blog’ subdirectory. Following page types are supported:

  • Pages: Gallery index, Services, Info, About, Contact
  • Search
  • Cart
  • WordPress blog

The breadcrumbs are not shown on the home page, but are visible on mobile devices.






Prints and Licensing: All images are available as fine art prints and for licensing. Please contact me for more details.

2 thoughts on “Breadcrumbs for TTG CE4”

  1. Whoops, One more time Daniel. Seems I missed an update to TTGCE4 publisher (203a) that addressed this very problem. With the new update installed the mangled breadcrumbs have returned to their previous state of coolness and all is right with the world. Sorry to have troubled you with this one.
    Regards, Mark

  2. Daniel, I’ve made my annual donation via paypal but breadcrumbs is giving me fits in CE4. The old code worked like a dream in CE3 and my hackjob of converting it to CE4 sort of worked but not very well. I’ve put your new code in phplugins and have spent the afternoon wacking away at custom.css to get the look about right but the only breadcrumbs that appear are the word HOME if that is enabled in TTG-be publisher or the name of the page if Home is disabled. Not quite as cool as it was in CE3. Any idea what I might have buggered up? I have a couple of auto index created galleries and breadcrumbs doesn’t find them at all.
    Mark

Comments are closed.