Telefono: +39 392 33 73 731

Contao minicalendar CSS e correzione SEO

Contao ha sia la gestione delle news, sia la gestione degli eventi. Le due funzionalità sono molto simili a prima vista, e qualcuno potrebbe chiedersi quando usare una piuttosto che l'altra.

In effetti ci sono alcune differenze significative. Le news sono più semplici, e possono adattarsi a numerosi scopi in cui dobbiamo gestire una serie di elementi, i quali poi si presentano sul sito sotto forma di lista (lista news, lista prodotti, blog coi commenti ad ogni post, ecc...), la gestione news di Contao è uno strumento molto versatile.
Possiamo usare due moduli front-end: una lista semplice e un archivio news, ultimamente preferisco usare quest'ultimo quasi sempre (perché permette di tenere in un'unica pagina sia la lista che il dettaglio, lo switch avviene automaticamente).
Di particolare le news hanno il flag per mettere una notizia in evidenza (mentre gli eventi questa funzione non ce l'hanno), questo è utile nel caso in cui volessimo presentare solo alcuni particolari elementi in home page o in una determinata lista.

Anche la gestione eventi in sostanza serve a presentare in front-end una lista di elementi, dispone praticamente di tutte le funzioni delle news eccetto quel flag per l'evidenza. Gli eventi però hanno ulteriori controlli basati sulla data, e possono riguardare un giorno futuro (con ora di inzio e fine), oppure una serie di giorni consecutivi (mentre le news hanno solo la data e ora in cui vengono create).
La lista degli eventi poi è configurabile per presentare solo quelli futuri o solo quelli passati, oppure tutti, e può restringere o allargare il periodo di selezione rispetto al giorno corrente. Oltre alla lista abbiamo anche il modulo calendario (cosa che le news non hanno), che permette di agevolare in modo visuale la selezione del periodo di consultazione. Il calendario si presenta in due grandezze diverse (cambiando template). Quindi gli eventi a ben guardare sono più potenti delle news nei casi in cui la data ha un ruolo fondamentale.

Aggiunta dell'immagine principale anche negli eventi

Purtroppo mi sono accorto che in tutti i template di default di Contao (sto usando la versione 3) manca il codice per mostrare l'immagine principale dell'evento. Questo è strano perché di fatto quel campo, come per le news, è previsto anche per gli eventi.
Quando ci serve quell'immagine quindi dobbiamo fare un template personalizzato (ad esempio event_introduzione.html5) ed aggiungere la parte a mano, è del tutto simile a quella delle news:

<?php if ($this->addImage): ?>
<figure class="intro_image<?php echo $this->floatClass; ?>"<?php if ($this->margin || $this->float): ?> style="<?php echo trim($this->margin . $this->float); ?>"<?php endif; ?>>

<?php if ($this->href): ?>
  <a href="<?php echo $this->href; ?>">
<?php endif; ?>
<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>">
<?php if ($this->href): ?>
  </a>
<?php endif; ?>

<?php if ($this->caption): ?>
<figcaption class="caption" style="width:<?php echo $this->arrSize[0]; ?>px"><?php echo $this->caption; ?></figcaption>
<?php endif; ?>

</figure>
<?php endif; ?>

CSS minicalendar

Se includiamo un modulo per il calendario, con il template mini calendar, Contao produce una tabella con determinati stili css. Il seguente codice è una impostazione generica per avere un design simile a quello dell'immagine in questo articolo (ho usato due font personalizzati).

table.minicalendar {
    width:100%;
    border:4px solid #e5dcd1;
    border-radius:5px;
    color:#453a33;
    font:1.6em/1.2em 'journal',Arial,Helvetica,sans-serif;
}

table.minicalendar td {
    width:14%;
    padding-top:2px;
    padding-bottom:3px;
    text-align:center;
    background-color:#fff;
    border-right:1px solid #ccc;
    border-bottom:1px solid #cccccc;
}

table.minicalendar .weekend {
    background-color:#f6f6f6;
}

table.minicalendar td.active {
    background-color:#458311;
}

table.minicalendar .active a {
    text-decoration:none;
    color:#D9D7D6;
}

table.minicalendar .today {
    background-color:#ffc;
}

table.minicalendar .label {
    padding-top:2px;
    padding-bottom:3px;
    text-align:center;
    background-color:#c3c3c3;
    border-right:1px solid #fff;
    font-weight:normal;
    color:#ae5b08;
    border-left:1px solid #fff;
}

table.minicalendar .head {
    padding-top:3px;
    padding-bottom:4px;
    text-align:center;
    background-color:#f9f9f9;
    border-right:1px solid #ccc;
    border-bottom:1px solid #cccccc;
}

table.minicalendar .current {
    background-color:#ae5b08;
    font-family:'league',Arial,Helvetica,sans-serif;
    font-weight:normal;
    color:#D9D7D6;
    text-transform:uppercase;
}

table.minicalendar .previous,
table.minicalendar .next {
    background-color:#453a33;
}

table.minicalendar .previous a,
table.minicalendar .next a {
    text-decoration:none;
    color:#ae5b08;
}

Fix SEO per Google

C'è una piccola correzione da fare al calendario: se avete una situazione come quella dell'immagine in questo articolo, abbiamo un singolo evento che dura per 5 giorni, quindi tutti i link di quei giorni aprono pagine identiche, Google potrebbe penalizzare i siti che contengono contenuti replicati. Questa lamentela c'è stata anche nel forum ufficiale di Contao, e Leo suggerisce una soluzione: aggiungere rel="nofollow" ai link del calendario in modo che i robot di Google non trovino pagine replicate.

Per motivi SEO quindi dobbiamo creare un template (ad esempio cal_eventi.html5) e fare questa modifica.
E per indicizzare i nostri eventi? domanda legittima, per farlo dobbiamo guidare Google con altri metodi, per esempio tramite una lista dei prossimi eventi in home page, oppure un archivio che raccoglie l'elenco degli eventi trascorsi, è più importante non replicare le pagine.

Il link del giorno del mini calendar va da così...
<a href="<?php echo $day['href']; ?>" title="<?php echo $day['title']; ?>">
  
a così...
<a href="<?php echo $day['href']; ?>" rel="nofollow" title="<?php echo $day['title']; ?>">
Mercoledì 06 Febbraio 2013
(0 commenti)
CSS

Aggiungi un commento

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