Telefono: +39 392 33 73 731
Email: info@zod.it
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;
}
Nel 2018 ho scelto Serverplan, leggi l'articolo "La mia esperienza con gli hosting" per conoscere la mia opinione sui servizi e le prestazioni di alcuni famosi provider italiani.
Aggiungi un commento