Breadcrumbs for the CGBlog and News module

  Previous article Next article  

Breadcrumbs for the CGBlog and News module

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.2
  Last updated: 16-07-2017
  Comments: 1

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
{strip}
    {$content = "{content}" scope=global} <------ Pay attention
{/strip}<!DOCTYPE HTML>
<html lang="en">
    <head> </head>
    <body>
        <header> </header>
        <nav> </nav>
        <main>
            {$content} <------ Pay attention
        </main>
        <footer> </footer>
    </body>
</html>

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

{CGBlog category='category-name'}

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:

{nav_breadcrumbs}

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

<div class="breadcrumbs">
  {if empty($page_breadcrumbs)}{nav_breadcrumbs}{else}{$page_breadcrumbs|default:''}{/if}
</div>

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:

{if $entry->categories}{$category = $entry->categories[0]['name']}{/if}

{$page_breadcrumbs = "You are here: {cms_selflink page='home' text='Home'}&nbsp;&raquo;&nbsp;{cms_selflink page='blog' text='Blog'}&nbsp;&raquo;&nbsp;{cms_selflink page=$category|lower|munge_string_to_url text=$category}&nbsp;&raquo;&nbsp;{$entry->title}" scope=global}

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!

{$page_breadcrumbs = "
You are here: {cms_selflink page='home' text='Home'}&nbsp;&raquo;&nbsp;
{cms_selflink page='blog' text='Blog'}&nbsp;&raquo;&nbsp;
{cms_selflink page=$category|lower|munge_string_to_url text=$category}&nbsp;&raquo;&nbsp;
{$entry->title}
"
scope=global}

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.


A2 Webhosting CMS Made Simple

  Working example



A2 Webhosting CMS Made Simple

  Comments

  Click here to leave a comment






This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)
  « Enter the CAPTCHA code (lower case)

Your IP address will be stored on submit. I reserve the right to change or delete your response without notice!
In case of abuse your IP address will be blocked!


Can I have your attention for a moment?

Did this tutorial help you solving a problem at your (clients) website and it saved you many hours of work? Great!!
Consider buying Rolf a cup of coffee in return! [ Click here ]


  1 Comment

CMS Made Simple 2.2.2 - Tutorials, tips and tricks - CMSMS 2.2.2

Breadcrumbs for the CGBlog and News module

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.2
  Last updated: 16-07-2017
  Comments: 1

A2 Webhosting CMS Made Simple