Add css classes to breadcrumb items

Thanks for the suggestion. This is certainly possible by adding class attributes through an options array, like this:

function custom_breadcrumbs_home_crumb() {
  $hometext = variable_get('custom_breadcrumb_home', t('Home'));
  if ($hometext != '') {
    // testing breadcrumb classes
    $options = array('attributes' => array('class' => 'custom-breadcrumbs-home'));
    $trail = array(l($hometext, '<front>', $options));
  }
  else {
    $trail = array();
  }
}

You could then add a style rule for the custom-breadcrumbs-home class to your theme's style.css file. I added this, to make the home breadcrumb extra large as a test, and it worked as expected.

.custom-breadcrumbs-home {
  font-size: x-large;
}

Can you explain further what you would like to see?

Should we automatically add classes like:
custom-breadcrumbs-home for the home crumb
custom-breadcrumbs-node for a node-type custom breadcrumb
custom-breadcrumbs-views for a views-type custom breadcrumb, etc.

others?

For each item in the trail we could append 1, 2, 3, etc. to the class.

This could be done automatically, or as a site-wide configurable option.

It will take some thought, so it would help to hear various approaches and opinions on this.

This is a great idea!

In my case I need to be able to select a css class by number or order, so i can have (different) breadcrumb backgrounds in the same order on every page.

An example added in the attachment.

Again, great idea for a great module!

Cheers,
Danny

Here is a first attempt at adding html identifiers (id and class attributes) to custom breadcrumbs link. It addresses the second half of the request by heyyo in #2, providing several global configuration options but not the per-breadcrumb option.

I think it should provide a good starting point satisfying most use cases. I've tested this on a production server, and benchmarked it. I've found no adverse affects or measurable performance hit. Please test and review the patch.

Any feedback on this? I am willing to commit if someone can test and make sure it works as expected.

Hi,

I would love to test and review the patch, but I just don't understand how cvs and patching works. This is the third time I spend hours and hours trying to figure it out, but I don't even get a step closer. I might just look around town if there are any drupal developers out there who can explain it to me in person.

I really appreciate your effort in this issue and I'll try to lean patching asap.

Cheers,
Danny

Hello MGN,

I successfully applied your patch after many, many help from ksenzee and Heine on the irc chat.

I tried several combinations and they all worked perfect.

Thank you very much, MGN. This is exciting.
This patch is exactly what I need for my website that goes online in a few weeks. Perfect timing. :)

Can I add this patch to my website or should I wait for the .dev ?

Cheers,
Danny

Thanks for testing. I would still like to have some feedback from heyyo or others interested in this patch, but I expect it or something very close to it will eventually get committed. So I would say go ahead and use the patched version for now if it is useful to you, but stay tuned and upgrade to the latest dev once this issue is marked fixed (hopefully soon).

Thanks heyyo. These are great suggestions. I make a few modifications and post a new patch.

I've just about completed the modifications that I can make.

1) Why combine type and numbers class ? If someone need both it will be impossible to use numbers if there are different types. I think it's better to separate them(it's really details MGN...)

I agree, it gets confusing when they are combined, So instead, of custom-breadcrumbs-node-2 for the second node-type breadcrumb item, I will use class = "custom-breadcrumbs-node custom-breadcrumbs-item-2"

2) I don't think options for each custom breadcrumb is really necessary with so much options in global configuration.
I think it could be simplified by adding a unique id to each breadcrumb in the

Like this it will be easy to identify each breadcrumb in the css and assign them different aspects.
The id could be cbc-node-XX, cbc-viewsname, cbc-term-XX...

This sounds great, but I can't think of a way to do this. The div container is provided by the theme via the phptemplate_breadcrumb function and it is not dynamic. Since custom breadcrumbs sets the $breadcrumb array, it is possible to add classes and ids to the individual links. So I can provide an option to add classes like "custom-breadcrumbs-node-8" (where 8 might be the unique breadcrumb id for this node-type breadcrumb) for all of the breadcrumb items after the home breadcrumb. But the home breadcrumb item is the same for all custom breadcrumbs and so it wouldn't have a unique class.

What do you think of this? If anyone has a suggestion on how to provide/modify this unique div container for the breadcrumb, I would be happy to hear it.

3) Really details :-) The word custom-breadcrumbs for class is long and make the html heavier... But maybe it's good for SEO :-P

I agree that its heavy, but its also makes it possible to identify the module that is providing the class/id. Looking at other modules it seems the convention is to use the full module name (see dhtml_menu, tagadelic, views, etc for examples) so I think I'll stick with custom-breadcrumbs...

I think I have a solution for the option to add a unique id to each custom breadcrumb.

Since a theme can override the core theme_breadcrumb() function, the <div class="breadcrumbs"> can readily be modified to add a unique id by providing the function in the template.php. So this doesn't need to be done by custom breadcrumbs. Custom breadcrumbs can provide a function to produce and store the id string whenever the breadcrumb is set. To use the unique breadcrumb id, modify the phptemplate_breadcrumb function (or theme equivalent) in template.php to something like

/**
 * Return a themed breadcrumb trail.
 *
 * @param $breadcrumb
 *   An array containing the breadcrumb links.
 * @return a string containing the breadcrumb output.
 */
function phptemplate_breadcrumb($breadcrumb) {
  if (!empty($breadcrumb)) {
    $func = 'custom_breadcrumbs_unique_breadcrumb_id';
    $cbid = function_exists($func) ? $func() : NULL;
    return '<div class="breadcrumb' . (!is_null($cbid) ? ' '. $cbid : '') .'">'. implode(' ⺠', $breadcrumb) .'</div>';
  }
}

or whatever you like. Note the safety check to be sure that custom_breadcrumbs_unique_breadcrumb_id() exists before calling that function. This way if the custom breadcrumbs module is disabled, the site won't crash. I don't really know whether you would want to add this unique id as a second class, or do something else, but that's the advantage of this approach - I don't need to know. You can modify this theme override any way you like.

Here is a new patch against the latest dev. Let me know what you think.

Any thought on this? Has anyone had a chance to test the patch? I would appreciate the feedback.

If this seems like a viable approach, I can commit the code to the 6.x-2.x-dev version for further testing. But I don't want to commit if this does not seem reasonable.

Hi mgn,

Sorry I haven't tested it yet. Last patch took me an hour with the help of two people on irc. I have some time now. Are you on irc? I'm there as Danny_Joris . I'll try the new patch. I'm wondering: can i patch over the last patch or do i need to patch over a clean .dev version?

Cheers,
Danny

Thanks for be willing to test it out. You'll need to start with the latest dev. I am afraid I can't spend the time on irc right now, but perhaps another time. I think applying patches is a good resource.

Hi MGN,

Thanks for the patch. Got it working and the new functionality seems to work good. I only tried with nodes so far, but it seems that with the template.php function the display type and the id is successfully added. Personally I don't see the added value yet. As most themes add the node-types and other information put this info as classes in the tag. But that's why it is optional i guess.

When I enable the last two options and disable the first after, i see this: http://www.dannyjoris.be/files/fora/breadcrumbs-feb.png I guess it is to say that the last function is disabled when the first is disabled as well, but for me it looks like the last option is enabled, but cannot be modified.

Also all my default admin breadcrumbs show "custom-breadcrumbs-node" in as breadcrumb class. I believe admin pages are not nodes, or am i mistaken?

I'm also thinking that the 'custom-breadcrumbs-even' class can just be named 'even'. Table rows use the same short class for that. It's easy to differentiate between:
'table tr.even'
and
'#breadcrumb a.even'

Hope this helps and thanks again,
Danny

Thanks for your help testing this Danny. Finally got around to putting together a new patch (against the current 6.x-2.x-dev version) for this feature request. These changes address each of the problems that you noticed with the last. I would appreciate it if someone could test this one before I commit it.

I have been testing this for the last week and think its safe to commit to 6.x-2.x-dev. http://drupal.org/cvs?commit=344108.

I found, that the class addition takes effect only in my own breadcrumbs, but not for the system or automaticaly made breadcrumbs, like "Use the menu structure to set the breadcrumb trail". Its not a neccesary function, but today it took me half an hour to realize why the classes are only on some place, even if this is a global setting.

Thank you for this module.