Author: Robin Sowell

Share Your Knowledge!

This fast-growing section of our site is the new one-stop shop for educational materials for ExpressionEngine with rich and expert content, from both EllisLab and the community. Submit your article, tip, or solution today!

  • Smarter Breadcrumbs with Layout Lists

    in: Front-end Development, Tips, Templating

    Layout List variables make it easy to reuse content in a variety of ways.

    Define the breadcrumb name, URL and position on your content templates:

    {layout:set:append name='breadcrumb_urls'}{path='second'}{/layout:set:append}
    {layout:set:append name='breadcrumb_titles'}Second crumb{/layout:set:append}
    {layout:set:append name='breadcrumb_jsonld_positions'}2{/layout:set:append}
    
    {layout:set:append name='breadcrumb_urls'}{path='active'}{/layout:set:append}
    {layout:set:append name='breadcrumb_titles'}Active crumb{/layout:set:append}
    {layout:set:append name='breadcrumb_jsonld_positions'}3{/layout:set:append}

    Output it in whatever format you need on your layouts.

    Bootstrap’s Modern Business template’s HTML breadcrumbs:

    {layout:breadcrumb_urls}
        {if count == 1}
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="index">Home</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="{value}">{layout:breadcrumb_titles index='{index}'}</a>
                </li>
        {if:elseif count < total_results}
                <li class="breadcrumb-item">
                  <a href="{value}">{layout:breadcrumb_titles index='{index}'}</a>
                </li>
        {if:else}
                <li class="breadcrumb-item active">
                    {layout:breadcrumb_titles index='{index}'}
                </li>
            </ol>
        {/if}
    {/layout:breadcrumb_urls}

    A structured markup BreadcrumbList:

    <script type="application/ld+json">
        {
            "@context": "http://schema.org",
            "@type": "BreadcrumbList",
            "itemListElement": [
            {
                "@type": "ListItem",
                "position": 1,
                "item": {
                    "@id": "https://example.com/index",
                    "name": "Home"
                }
            }
            {layout:breadcrumb_urls}
            ,{
                "@type": "ListItem",
                "position": {layout:breadcrumb_jsonld_positions index='{index}'},
                "item": {
                    "@id": "{value}",
                    "name": "{layout:breadcrumb_titles index='{index}'}"
                }
            }
            {/layout:breadcrumb_urls}
        ]}
    </script>

    DRY, flexible, easy to maintain and update. Your final result will look like:

    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="index">Home</a>
        </li>
        <li class="breadcrumb-item">
            <a href="second">Second crumb</a>
        </li>
        <li class="breadcrumb-item active">
            Active crumb
        </li>
    </ol>
    
    <script type="application/ld+json">
        {
            "@context": "http://schema.org",
            "@type": "BreadcrumbList",
            "itemListElement": [
            {
                "@type": "ListItem",
                "position": 1,
                "item": {
                    "@id": "https://example.com/index",
                    "name": "Home"
                }
            },
            {
                "@type": "ListItem",
                "position": 2,
                "item": {
                    "@id": "https://example.com/second",
                    "name": "Second crumb"
                }
            },
            {
                "@type": "ListItem",
                "position": 3,
                "item": {
                    "@id": "https://example.com/active",
                    "name": "Active crumb"
                }
            }]
        }
    </script>
    | Read in 3 minutes
.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases