Uno sfondo diverso in ogni pagina

Durante lo sviluppo di un sito per una azienda produttrice di abbigliamento mi è stato chiesto che le varie pagine del sito avessero sfondi diversi atti a valorizzare i singoli prodotti o le linee di prodotto. Pertanto (quasi) ad ogni voce di menù doveva corrispondere un differente layout della pagina.

Sfondo pagina e voce di menù

La prima soluzione che viene in mente è quella di creare templates differenti e di abbinarli alle singole voci di menù tramite la funzione "assegnazione al menù" della gestione templates; ma quando si parla di decine di sfondi, tale soluzione diviene subito improponibile a causa della scomodità di assegnazione/gestione e della inutile duplicazione del codice. Dovremmo infatti avere una lunga serie di templates che differiscono tra loro solo per poche righe.
Vediamo un approccio più razionale.

I ccs assegnati da menù

Quando si crea una voce di menù, nella colonna di destra, in  'Parametri - Sistema' -> 'Suffisso class CSS pagina' è possibile indicare una classe css che joomla userà durante la fase di rendering della pagina.
In realtà la dizione, così come la spiegazione ("Suffisso class CSS pagina:Un suffisso applicato alla classe CSS della pagina. Permette di ottenere uno stile individuale per la pagina"), sono un poco forvianti.
Infatti lo stile inserito  non è impostato nella pagina, ma solo in alcuni elementi presenti nell'area destinata alla visualizzazione del componente.
La classe non è poi applicata al contenitore del componente, ma, come detto, solo ad alcuni elementi del componente stesso quali componentheading, contentpane, contentdescription ed altri.
Inoltre non si tratta di una funzione di sistema del framework di Joomla!, ma di una implementazione lasciata alla buona  volontà dello sviluppatore del componente, e, per tanto, talvolta assolutamente ignorata.
La mancanza della indicazione del css a livello di pagina, la frammentazione e la ripetizione dell'informazione, se non l'assoluta mancanza della stessa, rendono impossibile sfruttare questa informazione, almeno così come è, per il nostro scopo.

Le classi css dei menù per cambiare l'immagine di sfondo

La possibilità di inserire la classe css, durante la creazione della voce di menù, o all'atto della modifica della stessa, è però una soluzione decisamente funzionale e facile da usare, anche se le persone designate alla gestione del sito sono poco esperte; conviene pertanto trovare il modo di sfruttarla.
La soluzione è quella di intervenire sul template del sito e fare sì che la classe sia inserita ove serve a noi, anche se Joomla! non è previsto che arrivi in tali posizioni.

All'inizio del  template, subito sotto il controllo della inclusione in Joomla! (defined( '_JEXEC' ) or die( 'Restricted access' );) inseriamo il codice per recuperare la classe css:

codice Joomla 1.5

$pageId = '0';
$pageClass = '';
$menu = &JMenu::getInstance('site')->getActive();
if (is_object($menu)){
    $params = new JParameter($menu->params);
    $pageClass = $params->get('pageclass_sfx');
    $pageId = 'menuItem_' . $menu->id;
}
$pageClass = 'pg' . ($pageClass ? htmlspecialchars($pageClass) : 'generic');

codice Joomla 1.6 - 2.5

$pageId = '0';
$pageClass = '';
$menu = JSite::getMenu()->getActive(); // nota con php 5.3+ non si deve usare & dopo l'operatore di assegnazione
if (is_object($menu)){
 $pageClass = $menu->params->get('pageclass_sfx');
 $pageId = 'menuItem_' . $menu->id;
}
$pageClass = 'pg' . ($pageClass ? htmlspecialchars($pageClass) : 'generic');

codice Joomla 3.x

$pageId = '0';
$pageClass = '';
$menu = JFactory::getApplication()->getMenu()->getActive(); // nota con php 5.3+ non si deve usare & dopo l'operatore di assegnazione
if (is_object($menu)){
 $pageClass = $menu->params->get('pageclass_sfx');
 $pageId = 'menuItem_' . $menu->id;
}
$pageClass = 'pg' . ($pageClass ? htmlspecialchars($pageClass) : 'generic');

Dato che l'informazione relativa al suffisso css è inserita anche nei vari elementi dell'output del componente, il codice inserisce il prefisso 'pg' per renderne più agevole l'uso; rendere il nome univoco nella pagina è per altro necessario qualora lo si voglia usare come id e non come class. la variabile $pageId è invece sempre univoca nella pagina (non essendo usata da Joomla! ma solo da noi).

Qualora non sia inserito alcun nome di classe verrà impostata la classe 'pggeneric'.

Ovviamente è possibile assegnare a più pagine (voci di menù) la stessa classe css, mentre $pageId varierà per ogni voce essendo generata a partire dall'id della voce di menù.

Ora non resta che visualizzare le classi ove interessa; nel caso specifico le classi dovevano essere inserite all'interno del tag body per poter cambiare l'immagine di sfondo dell'intera pagina, quindi:

<body class="mainBody <?php echo $pageId; ?> <?php echo $pageClass; ?>">

oppure, a seconda di ciò che vi serve

<body class="mainBody" id="<?php echo $pageId; ?>">

Notate lo spazio tra le varie classi che serve a separarle: all'interno dei css il separatore è la virgola, nell'html è lo spazio.

Naturalmente nulla vieta di inserire le classi in una altra parate del template, ad esempio nel div che contiene l'area del componente.

Il css per cambiare l'immagine di sfondo della pagina

Una volta inserito il codice nei punti opportuni del file index.php del template, è sufficiente definire le varie classi che si vogliono usare nel file css del template, ad esempio:

.pggeneric{
    background: transparent url(../images/sfondo.jpg) no-repeat top left;
}
.pgcInverno{
    background: transparent url(../images/collezione_inverno.jpg) no-repeat top left;
}
.pgcPrimavera{
    background: transparent url(../images/collezione_primavera.jpg) no-repeat top left;
}
.pgcEstate{
    background: transparent url(../images/collezione_estate.jpg) no-repeat top left;
}

Durante la creazioni delle voci di menù sarà poi necessario inserire la classe prescelta per ogni sezione del sito (cInverno, cPrimavera, cEstate).

Conclusioni

In questo modo, veloce ed elegante, è stata aggiunta la possibilità di variare lo sfondo della pagina per ogni sezione del sito.
Cambiare l'immagine di sfondo in ogni pagina è una tecnica che va usata con attenzione e con parsimonia; se non ben pensata e realizzata, infatti, tende a confondere il navigatore ed ad ingenerare nello stesso l'idea che chi ha realizzato il sito non avesse le idee chiare sul lavoro che stava realizzando.