Telefono: +39 392 33 73 731

Migliorato il breadcrumb di Contao

Di seguito riporto alcune modifiche al template "mod_breadcrumb.html5" per migliorarne il funzionamento in Contao 3.

La prima cosa che ho corretto è la voce del link verso la home page: di default viene preso tutto il titolo della pagina. Per le altre pagine questo va bene, ma in questo caso specifico credo sia fastidioso, di solito si vuole dare un titolo sensato (e SEO) alla home page, quindi qualcosa di lungo. Ma nel breadcrumb invece basterebbe una dicitura tipo "home", oppure una tipica icona a "casetta". O addirittura potrei voler togliere del tutto il primo link.
Nel modulo in back-end non ci sono opzioni per controllare il primo link, quindi è nel template che bisogna intercettarlo e modificarlo.

La seconda cosa che ho notato è il divider, potrei volerlo inserire. Anche in questo caso non c'è alcuna opzione in back-end, quindi devo fare la modifica sempre nel template.

Nel codice del template mod_breadcrumb va aggiunta una condizione "isRoot".
In questo modo posso trattare il link verso la home page come meglio credo: inserendo un testo, una immagine oppure togliendo del tutto l'elemento <li>. Nel mio caso ho deciso di caricare una icona png che ho nel mio tema, per il link ho usato l'insert tag "env::path" che restituisce la root di Contao.

Poi ho inserito uno span per il divider, dopo il tag <a>, in questo modo posso sfruttarlo via css, oppure inserisco direttamente una immagine come nel mio caso, è sempre una icona png. Le icone le ho fatte 20x20px con trasparenza.

Attenzione: nel codice seguente ho distanziato le parentesi " { { " degli insert tag, altrimenti Contao li esegue, bisogna rimetterli nella loro forma corretta.

<!-- indexer::stop -->
<ul class="breadcrumb">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
  <li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?> last"><?php echo $item['title']; ?></li>
<?php else: ?>
  <?php if ($item['isRoot']): ?>
  <li><a href=" { { env::path } } " title="home"> { { image::files/theme/ico-homewh.png } } </a> <span class="divider"> { { image::files/theme/ico-dividerwh.png } } </span></li> 
  <?php else: ?>
  <li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['title']; ?>"><?php echo $item['link']; ?></a> <span class="divider"> { { image::files/theme/ico-dividerwh.png } } </span></li> 
  <?php endif; ?>
<?php endif; ?>
<?php endforeach; ?>
</ul>
<!-- indexer::continue -->

Poi serve un ritocchino con i CSS, di seguito quelli che ho usato io.

.breadcrumb {
    list-style-type: none;
    margin: 0;
    padding-bottom: 10px;
    padding-top: 10px;
}
.breadcrumb li {
    color: #666666;
    display: inline;
}
.breadcrumb img {
    vertical-align: bottom;
}
Giovedì 27 Giugno 2013
(0 commenti)
CSS
PHP

Aggiungi un commento

Nome
E-mail (non verrà pubblicata)
Sito Web
Commento