Breadcrumb Help

Archive
1

Hi, I have breadcrumbs on my site and my main issue is on some pages I have a descriptive page title. So on these pages with the breadcrumb the titles are very long. I was wondering how I could add in an if statement so that if a another tag is specified in the md file that should overrule the title name but only on the breadcrumbs.

Below is the breadcrumb twig code.

{% set crumbs = breadcrumbs.get() %}
{% set breadcrumbs_config = config.plugins.breadcrumbs %}
{% set divider = breadcrumbs_config.icon_divider_classes %}

{% if crumbs|length > 1 or breadcrumbs_config.show_all %}
		<div class="row clearfix mb">
				<div class="breadcrumbIn">
<div id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	<ul>
    {% if breadcrumbs_config.icon_home %}
	<li><a href="/" class="toptip" title="Homepage"> <i class="icon-home"></i> </a></li>
    {% endif %}
    {% for crumb in crumbs %}
        {% if not loop.last %}
            <li><a href="{{ crumb.url }}/" itemprop="url"><span itemprop="title">{{ crumb.menu }}</span></a></li>
        {% else %}
             {% if breadcrumbs_config.link_trailing %}
                <a href="{{ crumb.url }}" itemprop="url"><span itemprop="title">{{ crumb.menu }}</span></a>
            {% else %}
                <li><span itemprop="title">{{ crumb.menu }}</span></li>
            {% endif %}
        {% endif %}
    {% endfor %}
	</ul>
</div>
{% endif %}
				</div><!-- breadcrumb -->
		</div><!-- row -->

This could output Home > Discography > A - Artists Discography > Aman Hayer Discography Albums > Album Name

I would ideally on some of those .md files create a new header variable called breadcrumb and this should be used if it exists in stead of the page title. If this does not exist then it should of course show the page title.

2

This is very easy with Grav :slight_smile:

  1. Breadcrumbs is already looking for a menu setting, that in turn defaults to title, but you can simply add a:
menu: Short Title

In your content and it will use this rather than the full title. The menu field is used by Grav where space is more at a premium, such as in menus, breadcrumbs etc.

If you want to have a different title, menu and breadcrumb text, you can do that too with this second approach:

  1. Simple add a new header variable to your pages that need it such as:
breadcrumb: Short Title

Then copy the breadcrumbs.html.twig partial from the plugin into your theme’s templates/partials/ folder and edit it there.

Then in that file simply change the line that says:

<a href="{{ crumb.url }}" itemprop="url"><span itemprop="title">{{ crumb.menu }}</span></a>

to

<a href="{{ crumb.url }}" itemprop="url"><span itemprop="title">{{ crumb.header.breadcrumb ?: crumb.menu }}</span></a>

So it uses the shortened terninary operator to see if a header.breadcrumb exists for the current ‘crumb’ and uses that if true, else it uses the default menu text, which if not specified, uses the title.

tada!

3

Hi

Thanks for the reply, the first option suites my needs perfectly :slight_smile:

I looked at the code for ages and could not see how it was getting the title when t looks for menu but never tried adding the menu to the page. Will do that now and with a site of 4000 pages I just need to make this change on about 60 pages so not too bad :d

4

Or you can use something like:

{{ crumb.menu|length > 50 ? crumb.menu|slice(0, 50) ~ '...' : crumb.menu  }}

It will crop the length of the breadcrumb title to 50 symbols and add three dots.