At www.welovecmsms.com I wanted a breadcrumbs trail as a navigational aid for the visitors. A breadcrumb trail tracks and displays each page viewed by a visitor of the website displaying a hierarchy of the current page in relation to the website's page structure.

But I also wanted to have it in "pretty urls"... Ugh, it is difficult to satisfy myself ;)

So I had to think of a method that creates URLs like welovecmsms.com/showcase/blog/cms-can-be-simple and show breadcrumbs like:

You are here: Home » Showcase » Blog » CMS Can Be Simple

Or in more general terms:

You are here: Home » Blog » Category page » Detail page

To adapt the default CMSMS breadcrumbs template seems to be the first step, but it looked to complex to me. It should be simpler to do in my opinion...

  How to use

In order to use this method the default {content} block has to be parsed by the Smarty template engine in the top of the Core::Page template. Read the following article for a more extended tutorial: Base CMS Made Simple page template with automated metatags.

Example Core::Page template

Create for each category a page with the CGBlog category tag:

The page structure will be:

1. home
2. blog
- 2.1 detailpage (not in navigation)
- 2.2 category-1
- 2.3 category-2
- 2.4 category-3

Note the page alias should be the lowercase category name and instead of spaces a dash (-)
Example: Business and Finance » business-and-finance

At this point we have the nice URL www.website.com/blog/category-page and breadcrumbs trail:

You are here: Home » Blog » Category page

Now lets display the detail page in the breadcrumbs list!

Go to the CMSMS Design Manager and open your Core::Page template and search for the breadcrumbs tag:

Change the breadcrumbs call with some if-else logic like:

What happens here?
By default the regular CMSMS breadcrumbs will be shown, but if $page_breadcrumbs has a value than that will be displayed instead.

In the detailtemplate of the CGBlog or News module we can build the alternative breadcrumbs trail... Add in the top of the template something like:

In the first line I pick the first category name.
When I add some line breaks to the code in the second line, you can see better what happens there. You can also see how I create an URL from the category name!

It will generate the HTML code to build:

You are here: Home » Blog » Category page » Detail page

This method works without problems for the News module because the module doesn't allow posts to be attached to multiple categories. But the CGBlog module does, in that case only the first category will be used. You can also use this method for other modules that have summary and detail views.

  Working example

• www.welovecmsms.com/showcase/blog/cms-can-be-simple

  1 Comment