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ù

esempio di sfondoLa 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.

Commenti   

0 #4 Guest 2012-08-06 08:28
Grazie infinite per l'articolo.
Il paragrafo "Le classi css dei menù per cambiare l'immagine di sfondo" mi è stato utilissimo.
Grazie ancora!
Citazione
-1 #3 Di Fabrizio Aldo 2012-02-14 18:04
Molto interessante. Vorrei sapere se questo metodo va bene anche nel caso in cui si vuole modificare lo sfondo di un solo modulo menù (o si vuole togliere il bordo). Inoltre bisogna inserire un'immagine per lo sfondo o basta il codice colore?

Grazie.
Aldo

===Risposta
per modificare lo sfondo di un solo modulo basta assegnargli una classe specifica dal pannello di gestione delle estensioni.
Non serve inserire alcun codice.
Citazione
+1 #2 Antonio 2012-01-21 19:25
Grazie per la risposta.
Ho notato però che il codice sopra crea un errore in joomla 1.7.
Ho trovato poi su docs.joomla.org
una parte di codice che effettivamente funziona.

Complimenti comunque per l'articolo

===Risposta:
in realtà il codice funziona: mancava solo un ";" dopo "$pageClass = ''", cosa abbastanza evidente. consiglio uno studio, almeno di base del php, prima di mettersi a modificare il codice, altrimenti è difficile capire che cosa sia opportuno o meno fare!!

ciao,
marco
Citazione
+1 #1 Antonio 2012-01-11 21:16
Ho provato il suo codice su joomla 1.5,ho eseguito dei test su joomla 1.7 ma il nome della classe che richiama i parametri del menu è diverso.
Con joomla 1.7 come è possibile risalire al suffisso pagina impostato pre ogni voce menu?

===Risposta:
con J1.6+ cambiano i nomi delle classi ed il modo di ottenere i parametri, basta dare un'occhiata alle note di migrazione su joomla.org per capire come intervenire. comunque, per comodità dei lettori, ho inserito anche il codice per j1.6+
Citazione

Aggiungi commento

Please note: URL in text are not linked and user's site address is only for internal use and is not published.

Comments are human checked. All spam will be removed, so don't waste your time and, especially, mine!

Codice di sicurezza
Aggiorna