Realizzare un template per Joomla! con colonne collassabili

Per il solo scopo dimostrativo, l'articolo riguarderà un template classico con 2 colonne, così composto:

A tal proposito ho preparato una immagine di esempio:

template con 2 colonne
Schema template con 2 colonne

La larghezza totale del contenitore è di 1000 px; possiamo immaginare di avere la colonna sinistra di 250 px ed il box per i contenuti di 750 px. Se è stata focalizzata la "condizione" fatta nell'introduzione, si deve "tradurre" la stessa da linguaggio umano in codice PHP per fare in modo che, appunto, la suddetta condizione venga soddisfatta.

Per comodità la riporto qui di seguito:

se ci sono moduli nella colonna di sinistra, o destra, essi verranno mostrati, altrimenti verrà visualizzato solo il blocco centrale dei contenuti.

Realizzare un template con zone collassabili non è molto dissimile dal realizzarne uno con le due colonne sempre visibili; l'unica cosa alla quale prestare attenzione è, appunto, 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 blocco modulo left è abilitato almeno 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 modulo. 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 ID content"

altrimenti (else)

viene visualizzato il "div ID content-all"

fine condizione "if"

<jdoc:include type="component" />

Ovviamente sia la colonna con "ID left", sia il "div ID content" che il "div ID content-all" sono stati formattati nel foglio di stile CSS.

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;
}

Dai tre codici appena scritti è possibile vedere come far "quadrare i conti" con la dimensione parziale o totale delle colonne. Molto semplice direi.

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 templates a seconda delle esigenze. Basta solo applicare quanto appena visto nel presente articolo.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati