Joomla Show

12-02-2008 13:13

Scritto da Bigham

Mi è capitato spesso di vedere template joomla a 2, 3 colonne con delle zone modulo collassabili.
Per collassabili intendo dire zone che caricano un certo numero di "posizioni" o "blocchi"di moduli e che qual'ora in queste posizioni non vi sia presente alcun modulo pubblicato, queste zone automaticamente non vengono visualizzate, lasciando più spazio per i contenuti nel nostro template.
In questo caso analizzeremo un sistema che non utilizza tabelle per l'impaginazione dei contenuti.

L'articolo è la traduzione di quello riportato su You Joomla

Vediamo quali sono i principi con i quali realizzare questo tipo di template.

 

Anzitutto creiamo un identificativo di classe nel foglio di stile del template template_css.css:

#contenitore_moduli{
  width:100%;
  margin:0 auto;
  text-align:center;
  color:#000;} 

Questo identificativo verrà utilizzato per dimensionare e formattare il contenitore dei moduli collassabili.
Ora decidiamo quanti moduli collassabili vogliamo gestire. Ad esempio ne imposteremo 4.
Aggiungiamo nel foglio di stile:

#mod1,#mod2,
#mod3,#mod4{
text-align:left;
 
float:left; /*Questo è il trucco!*/}

Questa sarà la struttura dei container che conterranno i moduli:

<div id="contenitore_moduli">
        <div id="mod1"> </div>
        <div id="mod2"> </div>
        <div id="mod3"> </div>
        <div id="mod4"> </div>
</div>

Come vedete esiste un continer principale di classe "contenitore_moduli" e al suo interno 4 container, uno per ogni modulo.

Vediamo adesso come applicare il collasso dei moduli utilizzando il codice php:

<?php if (mosCountModules('user1')||
            (mosCountModules('user2')||
            (mosCountModules('user3')||
            (mosCountModules('user4')) { ?>
<!-- Questa istruzione recita:
se ognuno dei seguenti moduli è pubblicato, Visualizza il container principale.
Il container principale collasserà se nessuno dei moduli è pubblicato -->
 
<div id="contenitore_moduli"><!-- Inizio container principale -->
<?php if (mosCountModules('user1')) {?><!-- Questo per far collassare un modulo -->
   <div id="mod1"><?php mosLoadModules('user1',-2);?></div><?php } ?>
<?php if (mosCountModules('user2')) {?>
   <div id="mod2"><?php mosLoadModules('user2',-2);?></div><?php } ?>
<?php if (mosCountModules('user3')) {?>
   <div id="mod3"><?php mosLoadModules('user3',-2);?></div><?php } ?>
<?php if (mosCountModules('user4')) {?>
    <div id="mod4"><?php mosLoadModules('user4',-2);?></div><?php } ?>
</div><?php } ?><!-- Fine container principale-->

La funzione mosCountModules('nome_zona_modulo') consente di sapere se in una particolare

zona_modulo è pubblicato uno o più moduli. La funzione infatti conta quanti moduli sono pubblicati.

La funzione mosLoadModules() consente di visualizzare un modulo in una zona modulo

Adesso scriviamo il codice che ci consente di capire quanti moduli sono presenti e quanto dovrà essere larga la zona che li conterrà.
Questo codice andrà inserito tra i tag e del template:

$nmod = 0;
if (mosCountModules('user1')) $shelf++;
if (mosCountModules('user2')) $shelf++;
if (mosCountModules('user3')) $shelf++;
if (mosCountModules('user4')) $shelf++;
// se sono pubblicati 4 moduli
if ( $nmod == 4 ) {
  $modwidth = '24%'; // ogni modulo sarà largo il 24%
// se sono pubblicati 3 moduli
}if ( $nmod == 3 ) {
  $modwidth = '33.3%'; // ogni modulo sarà largo il 33.3%
// se sono pubblicati 2 moduli
}if ( $nmod == 2 ) {
  $modwidth = '49%'; // ogni modulo sarà largo il 49%
} else if ($nmod == 1) { // se è pubblicato 1 modulo
  $modwidth = '100%'; // il modulo sarà largo il 100%
}
?>

La variabile $nmod conterrà il numero di moduli pubblicati mentre la variabile $modwidth conterrà
la dimensione della zona in cui saranno pubblicati i moduli. E' evidente che se non sono pubblicati
moduli la dimensione della zona sarà zero.
Questo comporterà la scomparsa della zona sulla pagina.
Questo codice va inserito prima di definire la struttura del template. Ho utilizzato le zone da user1 a user4 a titolo esemplificativo, ma è possibile utilizzare qualsiasi altro nome di zone blocchi modulo.

Vediamo come applicare le variabili definite in base al codice sopra riportato:

<?php if (mosCountModules('user1')||
            (mosCountModules('user2')||
            (mosCountModules('user3')||
            (mosCountModules('user4')) { ?>
 
<div id="myshelf"><!-- Inizio Contenitore principale-->
 
<?php if (mosCountModules('user1')) {?>
<div id="mod1" style="width:<?php echo $modwidth ?>;" >
       <?php mosLoadModules('user1',-2);?></div><?php } ?>
<?php if (mosCountModules('user2')) {?>
<div id="mod2" style="width:<?php echo $modwidth ?>;" >
       <?php mosLoadModules('user2',-2);?></div><?php } ?>
<?php if (mosCountModules('user3')) {?>
<div id="mod3" style="width:<?php echo $modwidth ?>;" >
       <?php mosLoadModules('user3',-2);?></div><?php } ?>
<?php if (mosCountModules('user4')) {?>
<div id="mod4" style="width:<?php echo $modwidth ?>;" >
       <?php mosLoadModules('user4',-2);?></div><?php } ?>
 
</div>!-- Fine Contenitore principale-->

Nel caso vogliate usare questo sistema con Joomla 1.5 dovrete fare una sostituzione:

 
mosCountModules("posizione") <b>con</b> $this->countModules("posizione")

inoltre la sintassi che carica i moduli è diversa:

 
<?php mosLoadModules('user4',-2);?>
<b>diventa</b>
<jdoc:include type="modules" name="user4" style="xtml" />

Definiamo adesso le classi standard di joomla per la formattazione dei moduli:

 
#mod1 .moduletable,#mod2 .moduletable,
#mod3 .moduletable,#mod4 .moduletable{
  text-align:left;
  padding:5px;
  color:#000;
  font-size:1.1em;
}
 
#mod1 .moduletable h3,#mod2 .moduletable h3,
#mod3 .moduletable h3,#mod4 .moduletable h3{
  text-align:left;
  padding-left:5px;
  color:#ff6600;
  font-size:1.3em;
 
}

Per capire meglio il funzionamento potete vedere la Demo

Commenti utenti  

Visualizza 1 di 1 commenti

Aggiungi il tuo commento