maidireJoomla.it

Una delle tecniche più interessanti usate nella realizzazione di template per Joomla è appunto quella di combinare codice php e codice html per realizzare effetti particolare come, ad esempio, il cosidetto collasso delle colonne in una pagina.

Supponiamo di avere un template così disegnato:

in rosso ho segnato i nomi delle posizioni modulo corrispondenti, mentre in nero i nomi delle classi del foglio di stile con cui sono formattati i container <div>. Alcuni nomi di posizioni modulo corrispondono ai nomi delle classi di stile.

Questo è il codice che troveremo nel file index.php

<div class="header"> 
    <jdoc:include type="modules" name="logo" style="xhtml"  />
</div>
<div class="breadcrumbs"> 
     <jdoc:include type="modules" name="breadcrumbs" style="xhtml"  /> 
</div>
<div class="main-container">
    <div class="side-left"> 
       <jdoc:include type="modules" name="left" style="xhtml"  />
    </div>
    <div class="content"> 
       <jdoc:include type="message" />
       <jdoc:include type="component" />
    </div>
    <div class="side-right">
       <jdoc:include type="modules" name="right" style="xhtml"  />
    </div>
</div>
<div class="footer"> 
    <jdoc:include type="modules" name="footer" style="xhtml"  />
</div>

Come vedete la disposizione del codice prevede 6 container <div> disposti in sequenza uno dopo l'altro. La disposizione affiancata dei tre container <div> di classe side-left, content e side-right viene realizzata utilizzando le classi del foglio di stile:

.header{
 width: 980px;
 height: 70px;
 border: 1px solid green;
}
/* ------- zona centrale della pagina --------- */
.main-container{
   width: 980px;
   height: 200px;
}
.side-left{
   width: 190px;
   height: 200px;
   float: left;
   border: 1px solid red;
}
.content{
   width: 590px;
   height: 200px;
   float: left;
   border: 1px solid cyan;
}
.side-right{
   width: 190px;
   height: 200px;
   float: left;
   border: 1px solid black;
}
/*-----------------------------------------------*/
.footer{
   width: 980px;
   height: 70px;    
   float: left;
   border: 1px solid green;
}

In questa situazione abbiamo assegnato ai tre box container una larghezza fissa in pixel suddividendo un'area complessiva di 980pixel.
Ovviamente ho inserito solo quelle proprietà di stile che mi interessava vedere, in un template vero e proprio potremmo averne altre in più.

Collassare una colonna significa non visualizzare il box container che la crea. Se vogliamo collassare la colonna destra del template non dobbiamo permettere la visualizzazione del tag <div class="side-right"> ... </div> e, ovviamente, di tutto ciò che  contiene. Questo è possibile farlo solo a condizione che non vi siano moduli pubblicati nella posizione modulo right.

In Joomla è presente la funzione countModules('nome_posizione') che restituisce il numero di moduli che sono pubblicati nella posizione specificata tra parentesi.

Vediamo come usarla all'interno del codice del nostro template:

<div class="main-container">
   <div class="side-left"> 
      <jdoc:include type="modules" name="left" style="xhtml"  />
   </div>
   <div class="content"> 
      <jdoc:include type="message" />
      <jdoc:include type="component" />
   </div>
 
    <div class="side-right">
      <jdoc:include type="modules" name="right" style="xhtml"  />
    </div>
 
</div>

.content_wide{
 width: 785px;
 float: left;
}

<div class="main-container">
 <div class="side-left"> 
 <jdoc:include type="modules" name="left" style="xhtml"  />
 </div>
 
 <div class=""> 
 <jdoc:include type="message" />
 <jdoc:include type="component" />
 </div>
 
 <div class="side-right">
 <jdoc:include type="modules" name="right" style="xhtml"  />
 </div>
 
</div>

La prima modifica riguarda la creazione di una variabile $classe_contenuti a cui verrà assegnato il nome della classe di stile da utilizzare se sono presenti o meno moduli nella posizione right. Se la leggiamo in linguaggio umano il costrutto php può leggersi così:

SE (ci sono moduli nella posizione right) {

        $classe_contenuti contiene 'content';

ALTRIMENTI

        $classe_contenuti contiene 'content_wide';

FINE SE

La seconda moficica riguarda il container <div> adibito ai contenuti. In questo caso viene aggiunta una istruzione php che stampa il valore della variabile $classe_contenuti. Quindi avremo:

se ci sono moduli nella posizione right verrà visualizzato

<div class="content">

se non ci sono moduli nella posizione right  verrà visualizzato

<div class="content-wide">

Il risultato sarà il seguente:


E se volessimo aspandere l'area dei contenuti a seconda della presenza della colonna sinistra piuttosto che della destra o addirittura se ambedue vengono collassate?

Il principio è sempre lo stesso:
- definire una o più classi di stile per il container "content" con larghezze diverse e nomi di classe diversi
- controllare la presenza dei moduli nelle posizioni modulo right e left
- in base a quali colonne collassano applicare al container adibito ai contenuti una classe di stile piuttosto che un'altra.


Nel fogli di stile potremmo definire queste due classi di stile per i contenuti:

.content_wide{
 width: 785px;
 float: left;
 height: 200px;
 border: 1px solid cyan;
}
.content_extra{
 width: 980px;
 float: left;
 height: 200px;
 border: 1px solid cyan;
}

Nel codice del template controlliamo anche la presenza di moduli nella posizione left in questo modo:

 <div class="side-left">
 <jdoc:include type="modules" name="left" style="xhtml"  />
 </div>

<?php
 if ($this->countModules('left') && $this->countModules('right')) {
 $classe_contenuti = 'content';
 } else {
 if ($this->countModules('left') || $this->countModules('right')) {
 $classe_contenuti = 'content_wide';
 } else {
 $classe_contenuti = 'content_extra';
 }
 }
 ?>