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.

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.

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):

• $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.