Nell'articolo odierno verrà illustrato come ottenere una immagine di sfondo differente per ogni articolo Joomla!, senza dover installare alcuna estensione.
Tale soluzione può essere applicata sia ad un template personalizzato, sia al template di default che troviamo già installato in Joomla!. La demo per l'articolo in oggetto è stata provata sul template "Protostar".
Vediamo come fare.
Prima di procedere, collegarsi via FTP alla root nella quale è installato Joomla. Nella cartella "templates" selezionare quella del tema attualmente in uso. Trasferire sul desktop il file index.php. Sarebbe bene fare una copia di backup, casomai qualcosa non dovesse andare per il verso giusto.
Una volta aperto il file index.php in vista codice, con un editor, nella parte superiore abbiamo:
defined('_JEXEC') or die;
subito dopo, scrivere:
$pageId = '0';
$pageClass = '';
$menu = JFactory::getApplication()->getMenu()->getActive();
if (is_object($menu)){
$pageClass = $menu->params->get('pageclass_sfx');
$pageId = 'menuItem_' . $menu->id;
}
Il codice riportato crea una classe per ogni voce di menu presente nel sito, denominata menuItem_. A tale classe si aggiunge l'id di ogni singola voce di menu. Infatti l'ultimo rigo di codice:
$pageId = 'menuItem_' . $menu->id;
dovrebbe essere abbastanza esplicativo.
A cosa serve l'id delle voci di menu? A rendere univoca una pagina rispetto ad un'altra, in maniera tale che grazie al codice CSS è possibile personalizzare le pagine del sito come desideriamo.
Se si sta utilizzando il file index.php del template "Protostar", si dovrebbe apportare ancora una piccolissima modifica. Sempre in vista codice, portarsi verso il rigo 130. Dove è scritto:
<body class="site <?php echo $option . ' view-' . $view....
eliminare tutto il codice esistente in maniera tale da avere soltanto:
<body>
Salvare il file e riportarlo nella cartella.
Controllare l'ID delle voci di menu
Effettuare il login come super amministratore e selezionare, dal menu amministrativo la voce Menu ⇒ Menu Principale.
Nella pagina Menu: Voci di menu vediamo sul lato destro gli ID associati ad ogni voce.
Ovviamente queste sono le voci di una mia installazione Joomla. A te saranno completamente diverse. Quello che voglio mettere in evidenza è sempre il rigo di codice che ho riportato più su:
$pageId = 'menuItem_' . $menu->id;
Sicuramente adesso è più semplice. Quindi avremo la classe menuItem_ID dove ID sta per l'ID delle voci di menu, come riportato nella figura più su.
Accertiamoci che tutto è andato per il meglio ed apriamo una pagina qualsiasi di Joomla, sempre in vista codice. Nella mia demo ho:
body class="menuItem_101" body class="menuItem_108" body class="menuItem_115"
Altro non sono che gli ID riportati nell'immagine e corrispondenti alle voci di menu.
Il codice CSS per i background delle pagine
Prima della scrittura del codice, trasferiamo le immagini nella cartella:
/templates/protostar/images
Trasferire il file template.css oppure quello di personalizzazione user.css sul desktop, dalla cartella:
/templates/protostar/css
ed aggiungere le seguenti regole:
.menuItem_101 {
background: url(../images/1.jpg);
}
.menuItem_108 {
background: url(../images/2.jpg);
}
.menuItem_115 {
background: url(../images/3.jpg);
}
.menuItem_101, .menuItem_108, .menuItem_115{
background-repeat:no-repeat;
background-position: center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
background-attachment:fixed;
}
A te saranno sicuramente diverse, se hai molte voci di menu in più.
L'ultima dichiarazione:
background-attachment:fixed;
serve per avere lo sfondo fisso mentre si scorre la pagina.
Se si vogliono rendere le pagine del sito più leggere quando vengono richiamate da smartphone, possiamo aggiungere una regola CSS + Mediaqueries, indicando che fino ad una determinata dimensione del media utilizzato, non deve apparire alcuna immagine di sfondo.
@media screen and (max-width:767px){
.menuItem_101, .menuItem_108, .menuItem_115{
background:#fff;
}
}
Così possiamo andare incontro a coloro i quali non hanno a disposizione una connessione veloce.