Telefono: +39 392 33 73 731

Sezioni personalizzate di Contao

Normalmente il template fe_page default di Contao può essere usato senza modifiche: ha una struttura polifunzionale con header, footer, e tre colonne centrali. Possiamo abilitare o disabilitare queste sezioni dal layout, e possiamo inserire o togliere contenuti da esse tramite i moduli, o gli articoli. Quindi in pratica non servirebbe toccare il codice.

A livello pratico però io trovo comodo creare sempre due template personalizzati: uno di pagina default e uno per la homepage. In questo modo sono meno legato ai css ed alle impostazioni di Contao inoltre posso diversificare le due pagine senza troppe preoccupazioni. Mi capita spesso di rinominare o spostare gli elementi, aggiungere o togliere tag, o aggiungere javascript specifici nell'head o prima della chiusura del body.

Quando non bastano le 5 sezioni predefinite esiste la possibilità di aggiungerne a piacere. Nel mio esempio ne creo una che chiamo "Prefooter". Concettualmente sarebbe una fascia del sito appena prima del footer, in cui presento contenuti della pagina diversi.

La prima cosa da fare è dire a Contao che voglio inserire questa nuova area della pagina, lo si fa dal menu "Impostazioni generali", troviamo il campo verso la fine della pagina, si può scrivere un elenco di sezioni separato da virgole.

 

In questo modo Contao ha appreso dell'esistenza della sezione Prefooter, ed ovunque sia possibile avrò tra le opzioni disponibili anche questa.

Vado quindi in Temi -> Layout e scelgo di aggiungere un modulo Articoli anche per la sezione Prefooter (poteva essere qualsiasi tipo di modulo).


Faccio una piccola premessa: quando creiamo la struttura del sito sapete che Contao automaticamente genera un articolo vuoto per ogni sezione principale. Quindi vado in Articoli e ne creo un altro subito sotto a quello fatto da Contao, e questa volta lo assegno invece alla sezione Prefooter. Posso riempire di contenuti entrambe le sezioni.


Per completare l'opera ci basta ora modificare il template della pagina, questa parte l'ho scoperta leggendo il forum ufficiale, le predisposizioni di Contao sono secondo me molto scomode:

  • Costringono a posizionare le sezioni in solo tre zone prestabilite
  • L'ordine delle sezioni avviene secondo l'ordine in cui le avete scritte nel campo delle impostazioni generali
  • Contao in alcuni casi duplica i contenuti (secondo quanto detto nel forum, non ho verificato)

Quindi la cosa migliore da fare è quella di rimuovere dal template queste tre righe.

<?php echo $this->getCustomSections('before'); ?>
<?php echo $this->getCustomSections('main'); ?>
<?php echo $this->getCustomSections('after'); ?>

Quindi, aggiungiamo la nostra sezione Prefooter esattamente dove vogliamo tramite il seguente codice. Da notare che la sintassi è leggermente diversa da quella usata per includere le sezioni predefinite (left, right, main, header, footer).

<?php if ($this->sections['prefooter']): ?>
<aside id="prefooter">
<div class="inside">
<?php echo $this->sections['prefooter']; ?>
</div>
</aside>
<?php endif; ?>
Venerdì 01 Febbraio 2013
(3 commenti)
PHP

Commento di Davide

Martedì 12 Novembre 2013

Ciao Marco, anzitutto complimenti per il sito e per i tuoi articoli, chiari e soprattutto indispensabili visto che i tedesconi non si decidono a fare guide in italiano! :)
Volevo chiederti: ho visto che hai aggiunto il div con classe .inside anche nella tua sezione personalizzata... a cosa serve?
Grazie!
Davide

Risposta di Marco

Ciao Davide, grazie dei complimenti, in effetti il team tedesco è restio ad elargire aiuti anche nel forum internazionale, che sarebbe nella lingua della perfida Albione. Quindi non pensare di trovare molto italiano da loro, semmai affidati al nostro forum contaocms.it.

Il div ".inside" è usato per gestire meglio i contenuti quando abbiamo il container che occupa un'area superiore ad essi. Mi spiego meglio con un esempio pratico: l'header occupa il 100% della pagina, e come background mostra una immagine che va da lato a lato, e forse anche oltre. Tuttavia, non voglio che il contenuto dell'header (cioè logo e menu) vada al 100%, preferisco che resti ad una larghezza massima di 1000 pixel, al centro. Ecco quindi che hai bisogno dei due div.

Questa cosa per me è diventata ancora più indispensabile usando Bootstrap 3, per ora puoi vedere come ho reso il sito Kombat League, ma ne ho in cantiere altri. Ho sposato Contao con Bootstrap, e sono convinto che il risultato sia valido. Quindi seguendo la logica di Contao, ho un container "libero" al 100% (#header, #main, #premain, #prefooter ecc...) cioè mi creo delle fasce nella pagina. Poi al loro interno metto altri div con class ".container" (al posto di .inside) in modo da formattare le dimensioni secondo la griglia di Bootstrap. Un piccolo trucco che da enormi vantaggi, dopo mesi di studio ormai ragiono in binomio... non riesco a pensare a Contao senza Bootstrap.

Commento di Davide

Mercoledì 13 Novembre 2013

Sai che proprio stasera stavo provando Bootstrap su Contao? Mi torna l'idea di sostituire .inside con .container; a questo punto elimini anche il div #wrapper che c'è subito dopo il <body>?

Risposta di Marco

Esatto, proprio così. Il #wrapper diviene inutile, inoltre non ho mai apprezzato le dimensioni impostate a livello di Layout di Contao, se hai presente quando abiliti le colonne o righe. Quelle misure le preferisco dare nel CSS, dove ritengo sia il loro posto.
Poi un container dentro al body potrebbe avere senso solo in casi particolari, quando per esempio vuoi combinare due fondi con immagini sovrapposte. Quella dei background multipli nello stesso elemento è una funzione esistente in CSS3, ma non è ancora pienamente compatibile, avrei problemi con IE8, quindi non la sto usando al momento... magari fra qualche altro mese, se IE8 decide di morire :).

Commento di Davide

Mercoledì 13 Novembre 2013

Altra cosa: usando bootstrap, nell'edit del layout di contao deselezioni tutti i framework css? O lasci il generatore di layout?

Risposta di Marco

Deseleziono tutto, includo solo Tinymce che sono gli stili particolari impostati nell'editor, potrei prevederne di specifici per il cliente.
Non conosco bene i vari stili del framework di Contao, fin dalle versioni più lontane ho sempre bypassato tutto con miei CSS, perché mi davano fastidio alcune scelte. Nel tempo hanno aggiunto vari stili ed una griglia a 12 colonne, ma non ho approfondito la questione, uso il mio Bootstrap. E i miei template sono ormai modificati in funzione di esso.

Inoltre il mio Bootstrap è custom, solo il css ridotto all'osso, senza javascript e css di tipografia, bottoni, icone ecc... sono un maniaco dell'essenziale.
Ho una versione con spaziatura e una senza (dipende dal sito). Addirittura ho modificato a mano alcune cose (es: tolto gli stili print che stampano per esteso gli url dei link, bruttura).

Aggiungi un commento

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