News

• Posted by fiammybe
• Posted on 4/15/2017

Building the new ImpressCMS website

Hi, with this post I'm starting a series that will take you along the way with us while we develop the new ImpressCMS website. The old website desperately needs a freshing-up, both in content and in visuals. This time I'm looking into breadcrumbs.

Unifying breadcrumbs

The take on breadcrumbs by the ImpressCMS core has always been that it is a module responsibility. This leaves us currently at a not so desirable state of having to align the different choices (or oversights) by module developers where it comes to the construction and display of breadcrumbs. 

I'm currently basing the new design on an existing design that i bought a license form, and that design has a particular breadcrumb design where the title of the page is shown on the left, and the rest of the breadcrumb is shown on the right of the page, on the same hight as the title.

Trying with Preloads

I was not looking forward to having to change every single module template to have a correctly working breadcrumb, so I started looking at preloads.

I really like preloads these days, they allow to do things on all pages of your site from a single file. Unfortunately, I wasn't able to get something working in short order. Something that did work for me was working with the header templates.

Settling on Templates

In the theme, a set of special variables is defined to hold the first 3 levels of the breadcrumb. The goal is to go further, but currently 3 levels is what is available without changing the modules.

Every module that we use at the moment has a header template. In those header templates, I simply assign the module-specific smarty variable to the variable that is defined in the theme. At the moment, the header template simply assigns one variable to another, nothing more. But it works.

For example, the iForum header template contains this:

</p>
<pre><{if $topic_title}><br /><{assign var='crumb_pagename' value=$topic_post.post_title}><br /><{elseif $category.title}><br /><{assign var='crumb_pagename' value=$category.title}><br /><{elseif $forum_name}><br /><{assign var='crumb_pagename' value=$forum_name}><br /><{/if}><br /><br /><{if $parent_forum}><br /><{assign var='crumb_module_url' value="/modules/$icms_dirname/viewforum.php?forum=$parent_forum"}><br /><{assign var='crumb_module_name' value=$parent_forum}><br /><{assign var='crumb_path' value=$forum_name}><br /><{/if}></pre>
<p>

This is one of the more complex, but it allows me to have a crumbtrail based on crumb_pagename, crumb_module_name and crumb_path.

By doing this, I was able to handle the crumbtrails more easily. In the future, a unified crumbtrail API would be preferable, but that's not there yet. 

Have a look at http://beta.impresscms.org to follow the latest developments and changes, and follow this blog to be kept up-to-date.