A primo impatto, leggendo il titolo del presente articolo, si potrebbe pensare ad una rivisitazione aggiornata dell'override output del core di Joomla!. In parte potrebbe essere così ma, come vedremo, si tratta di una tecnica leggermente differente che consente di ottenere molteplici layout alternativi degli articoli di Joomla!, a seconda delle diverse esigenze.
Differenze tra override del core di Joomla! e layout alternativo
L'override del core di Joomla! agisce a livello globale, per tutto il sito, senza che vengano intaccati i files nativi dell'installazione di Joomla!
Questo significa che se dovesse esserci un aggiornamento, nulla di quanto modificato andrà perduto.
Si prenda, ad esempio, la pagina che visualizza una categoria blog. Nel caso volessimo l'immagine di introduzione prima del titolo, non resta che "spostare" il blocco di codice php relativo al titolo stesso e posizionarlo, con un semplice taglia/incolla, dopo il codice per la visualizzazione dell'immagine.
Da questo si desume che se il nostro sito contiene più voci di menu con visualizzazione categoria blog, TUTTE le pagine con le intro avranno la stessa ed identica impostazione.
Il layout alternativo, invece, lo si potrebbe considerare un "override più mirato", a seconda delle diverse esigenze.
Esso consente di creare tanti override della stessa tipologia di pagina, selezionandoli dall'area di amministrazione di Joomla!, in fase di creazione dell'articolo.
I layout alternativi possono essere applicati a:
- Componenti
- Plugin
- Moduli
- Categorie
- Voci di menu
L'esempio dimostrativo è stato fatto con il template Protostar e ci occuperemo del layout alternativo di un articolo statico di Joomla!
N.B. Il layout alternativo è possibile ottenerlo con qualsiasi tipo di template. Sia esso del core di Joomla!, commerciale, o realizzato da noi.
Creare la cartella HTML per l'override
Prima di realizzare il layout alternativo, si deve creare una cartella e nominarla html, nella quale avremo i files su cui apportare le modifiche di layout.
Questo passaggio possiamo farlo direttamente dall'area di amministrazione di Joomla!
Dal menu amministrativo, fare click su:
Estensioni ⇒ Template ⇒ Lista template
Selezionare il link Nome_Template Dettagli e File in corrispondenza del template in uso.
Nella pagina successiva, in alto a sinistra, fare click sul tab Crea override.
Nella seconda colonna, Componenti, fare click su com_content e poi su article.
Riceveremo il messaggio che l'override è andato a buon fine.
Via FTP controlliamo che i files:
- default.php
- default_links.php
si trovino al seguente percorso:
/root/templates/template-in-uso/html/com_content/article/default.php /root/templates/template-in-uso/html/com_content/article/default_links.php
Creare il layout alternativo
L'impostazione del singolo articolo di Joomla!, come sappiamo, è a "colonna unica". Poniamo il caso che, per una qualsiasi esigenza, desideriamo il testo su due colonne.
Dalla cartella html dell'override prendere il file default.php e portarlo sul desktop.
Innanzitutto si deve fare una copia e nominare il file, per esempio: mylayout.php.
Aprire il file con un editor di testo ed individuare, indicativamente al rigo 120, il blocco di codice:
<div itemprop="articleBody"> <?php echo $this->item->text; ?> </div>
Al seguente div aggiungiamo una classe, two-column, in maniera tale che il codice diventi:
<div class="two-column" itemprop="articleBody" > <?php echo $this->item->text; ?> </div>
Salvare il file e riportarlo, via FTP, nella cartella html.
Fare attenzione in quanto adesso avremo tre files invece dei due iniziali:
- default.php
- default_links.php
- mylayout.php
CSS per il file mylayout.php
Nel file .css del template, aggiungiamo il seguente codice:
.two-column{
margin:1.5em 0;
border:1px solid green;
}
@media screen and (min-width:768px){
.two-column{
-moz-column-count:2;
-moz-column-gap:20px;
-webkit-column-count:2;
-webkit-column-gap:20px;
column-count:2;
column-gap:20px;
}
}
body.itemid-109 h1{
line-height:normal;
margin:0;
padding:15px 0;
text-align:center;
}
Il bordo di colore verde solo per mettere in risalto il contenitore. La mediaquerie, @media screen and (min-width:768px) per far visualizzare il testo su due colonne con dimensioni di schermo da 768px in poi.
Creare un articolo Joomla! con layout alternativo
Passiamo alla creazione di un articolo statico e vediamo se il tutto è andato a buon fine.
Dopo aver creato un articolo ex-novo o modificato uno già esistente, portarsi nel tab Opzioni, posto sull'editor di Joomla!
La prima voce Layout è quella che fa al caso nostro.
Espandere la select e selezionare Dal template protostar ⇒ mylayout.
Salvare e chiudere l'articolo ed aggiornare il frontend.
Conclusioni
Al termine di questi brevi e semplici passaggi, dovremmo avere il seguente risultato:
Come scritto all'inizio dell'articolo, questo tipo di override non funziona a livello globale bensì solo e soltanto quando si seleziona il layout mylayout. In questo modo possiamo ottenere tutti i layout che vogliamo, da associare solo a determinate voci di menu, costruendo particolari tipi di impostazioni di pagina.