Layout alternativi degli articoli Joomla!

Creare layout alternativi degli articoli Joomla!
Creare layout alternativi degli articoli Joomla!

A primo impatto, leggendo il titolo del presente articolo, si potrebbe pensare ad una rivisitazione aggiornata dell'. 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:

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:

EstensioniTemplateLista 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:

  1. default.php
  2. 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:

  1. default.php
  2. default_links.php
  3. 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 protostarmylayout.

Opzioni layout alternativo articolo Joomla!

Salvare e chiudere l'articolo ed aggiornare il frontend.

Conclusioni

Al termine di questi brevi e semplici passaggi, dovremmo avere il seguente risultato:

Articolo joomla con layout alternativo su due colonne

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.