La duttilità e flessibilità di Joomla! consentono una diversa impostazione per ogni pagina. Per impostazione si intende la visualizzazione, o meno, di determinati moduli da presentare nel sito. Nell'articolo odierno vedremo come è possibile ottenere un template con colonne collassabili.
Premessa: una diversa impostazione la si può ottenere con l'assegnazione di un template diverso per ogni link di menu. Possiamo immaginare che tale soluzione potrebbe richiedere una mole di lavoro enorme, quasi inimmaginabile, da dover apportare una modifica per ogni template prodotto.
Come scritto all'inizio, ci occuperemo di come realizzare un template Joomla! con colonne collassabili. In altri termini, impostando delle posizioni modulo in una determinata parte del template, (colonna destra o sinistra), tali colonne non verranno visualizzate se non sono soddisfatte alcune condizioni: se ci sono moduli da visualizzare nella colonna sinistra, o destra, essa verrà mostrata altrimenti verrà visualizzato solo il blocco centrale dei contenuti.
Impostazione del layout
Come layout di esempio avremo un template classico con 2 colonne, composto da:
- header;
- colonna sinistra;
- contenuti;
- footer
La larghezza totale del contenitore è di 1000 px. Possiamo immaginare di avere la colonna sinistra di 250 px e la parte centrale per i contenuti di 750 px.
Come "tradurre" questa condizione in codice PHP?
Si deve fare in modo che:
- se ci sono elementi (moduli) da visualizzare nella colonna sinistra, il layout deve avere due colonne
- altrimenti viene mostrata solo la colonna centrale dei contenuti
Realizzare un template con colonne collassabili non è molto dissimile dal realizzarne uno con le due colonne sempre visibili. L'unica cosa alla quale prestare attenzione è come e dove inserire il codice PHP per poter arrivare al risultato finale.
In un template "normale" gli snippet di codice, affinchè i moduli vengano visualizzati, sono i seguenti:
<div id="left"> <jdoc:include type="modules" name="left" style="xhtml" /> </div><!--/left--> <div id="content"> <jdoc:include type="component" /> </div><!--/content-->
Ovviamente, nella posizione blocco modulo "left" possiamo mettere tutti i moduli che vogliamo, a patto che si scelga quale visualizzare per primo.
Il codice PHP per le colonne collassabili
La condizione da scrivere nel file "index.php" va inserita nella zona della pagina in cui vogliamo le 2 colonne o la colonna unica per i contenuti. Riferendoci all'immagine del template riportata sopra, avremo:
<div id="left">
<?php if($this->countModules('left')) : ?>
<jdoc:include type="modules" name="left" style="xhtml" />
<?php endif; ?>
</div><!--/left-->
Come interpretare il codice appena scritto?
Se nella posizione left è abilitato un modulo, allora "quel modulo" verrà visualizzato nell'output del sito.
Il metodo CountModules è utilizzato all'interno di un template per determinare il numero di moduli abilitati in una determinata posizione. Viene comunemente utilizzato per includere in una certa posizione moduli nell'HTML, se almeno un modulo risulta abilitato per quella determinata posizione.
Fin qui nulla di particolarmente difficile. Vediamo adesso come far "convivere" le 2 condizioni che produrranno o le due colonne oppure un singolo blocco per i contenuti.
<?php if($this->countModules('left')) : ?>
<div id="content">
<?php else: ?>
<div id="content-all">
<?php endif; ?>
<jdoc:include type="component" />
</div><!--/content-->
Il risultato che si vuole ottenere è compreso in queste poche righe di codice. Vediamo nel dettaglio.
Si comincia con la condizione "if": se ci sono moduli in posizione left viene richiamato il "div#content"
altrimenti (else)
viene visualizzato il "div#content-all"
fine condizione "if"
<jdoc:include type="component" />
Ovviamente sia la colonna "#left", sia il "div#content" che il "div#content-all" sono stati formattati precedentemente nel foglio di stile.
Il codice CSS per le colonne
div#content{
width:750px;
float:left;
text-align:left;
}
div#content-all{
width:1000px;
text-align:left;
}
div#left{
width:250px;
text-align:left;
}
Cosi come è stato possibile creare la condizione con una colonna sinistra e la colonna centrale, alla stessa maniera si possono avere esempi di templates a 3 colonne, a 2 ed un'unica colonna, senza creare tanti templates per ogni esigenza. Basta solo applicare quanto appena visto nell'articolo.