Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Generate <ul> style breadcrumb rich snippet

Tags:

html

php

I found various solutions for generating breadcrumbs, but all of them use elements, but my current breadcrumb is in unordered list style.

Here is what I done so far:

<div class="breadcrumb">
<ul>
<?php $seocrumbs = array_pop($breadcrumbs); ?>
<?php foreach($breadcrumbs as $idx=>$seocrumb) { ?>
<li>
<div <?php echo $idx == 0 ? '' : 'itemprop="child"'; ?> itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="<?php echo $seocrumb['url'];?>" itemprop="url">
      <span itemprop="title"><?php echo $seocrumb['text'];?></span>
    </a>
</div>    
</li>
<?php }?>
<?php 
//remove link from last item
echo $seocrumb['separator'];?> <li id="lastitem"><?php echo $seocrumbs['text']; ?></li>
</ul>    
</div>    

The problem with this code is that it is generating separate breadcrumbs, instead of mother key and childs.

<div class="breadcrumb">
<ul>
<li>
<div  itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="" itemprop="url">
      <span itemprop="title">Index</span>
    </a>
</div>    
</li>
<li>
<div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="" itemprop="url">
      <span itemprop="title">Category2</span>
    </a>
</div>    
</li>
 <li id="lastitem">Plášte 27.5&quot;</li>
</ul>    
</div> 
like image 537
Adrian Avatar asked Apr 27 '15 16:04

Adrian


2 Answers

Assuming that you have some sort of test breadcrumb arrays, similar to this:

$array1 = array ( "url"=>"http://example.com", "text"=>"Parent","separator"=>" ");
$array2 = array ( "url"=>"http://example.com", "text"=>"Child","separator"=>" ");
$breadcrumbs = array ($array1,$array2);

I modified your code as follows:

$output = "<div class='breadcrumb'><ul><li>";
$itemType = "itemtype='http://data-vocabulary.org/Breadcrumb'";
foreach ($breadcrumbs as $key=>$value) {
    if ($key != 0) {
        $itemProp = "itemprop='child'";
        $output .= "<li>";
    } else {
        $itemProp = '';
    }
    $output .= "<div $itemProp itemscope $itemType>";
    $output .= "  <a href='{$value['url']}' itemprop='url'>";
    $output .= "    <span itemprop='title'>";
    $output .= "      {$value['text']}";
    $output .= "    </span>";
    $output .= "  </a>";
    $output .= "</div>";
    if ($key != 0) {
        $output .= "</li>";
    } else {
        $output .= "<ul>";
    }
}
$output .= '</ul></li></ul></div>';
echo $output;

Which gives

<div class='breadcrumb'>
  <ul>
    <li>
      <div  itemscope itemtype='http://data-vocabulary.org/Breadcrumb'>
        <a href='http://example.com' itemprop='url'>
          <span itemprop='title'>Parent</span>
        </a>
      </div>
      <ul>
        <li>
          <div itemprop='child' itemscope itemtype='http://data-vocabulary.org/Breadcrumb'>
            <a href='http://example.com' itemprop='url'>
              <span itemprop='title'>Child</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
  </ul>
</div>

I'm making some assumptions about your starting array formatting, but this should be a workable format for you to tweak it and meet your needs.

like image 194
David Wyly Avatar answered Oct 18 '22 18:10

David Wyly


A foreach loop will generate a 1 dimensional breadcrumb trail. If you want

<ul>
<li>Category 1
     <ul>
     <li>item 1</li>
     <li>item 2</li>
     </ul>
</li>
<li>Category 2</li>
</ul>

You will need 2 foreach loops, 1 for each category, and 1 for each key.

<ul>
<?php
foreach ($categories as $c_idx=>$c_value){

     echo "<li>$c_value<ul>";

     foreach ($items as $i_idx=>$i_value){
         echo "<li>$i_value</li>"
     }
     echo "</ul>";
     echo "</li>"

}
?>
</ul>
like image 1
Zorgarath Avatar answered Oct 18 '22 16:10

Zorgarath