Supporto volontario e collaborativo per Joomla!® in italiano

Come creare una lista di categorie Joomla con le immagini

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Lista categorieTra i vari tipi di voci di menu di Joomla troviamo anche "Lista di singola categoria".  Questa voce di menu visualizza gli articoli e le sottocategorie della categoria selezionata.  La schermata di default della Lista di singola categoria è molto semplice (vedi immagine a fianco).

Per renderla più accattivante possiamo fare in modo che accanto al nome delle categorie appaia l'immagine ad esse associata. Vediamo come personalizzarla con un semplice override del template.

Creare le categorie e gli articoli

Creiamo una categoria principale e le sue sottocategorie e pubblichiamo degli articoli assegnati a queste categorie.
Ad ogni categoria assegnamo un'immagine andando nel tab Opzioni. Possibilmente tutte della stessa larghezza, per ottenere un risultato più gradevole.

Immagine categoria


Una volta terminato vedremo in Contenuti > Categorie l'albero delle categorie create:


Albero delle categorie

Cambiare le Opzioni degli articoli


Andiamo in  Contenuti > Articoli > Opzioni e nel tab Categoria modifichiamo in questo modo i parametri:
  • Livelli sottocategorie > Tutte
  • Messaggio nessun articolo > Nascondi
  • n. articoli nella categoria > Mostra

Opzioni

Creare la voce di menu


Creiamo la voce di menu di tipo "Lista di singola categoria" e selezioniamo la categoria principale contenente le sottocategorie create:

Voce di menu

Nel lato pubblico del sito vedremo questo

Lista categorie

Creare un override


Per cambiare questa schermata creiamo un override del template. Possiamo farlo con il metodo spiegato in questo articolo oppure da amministrazione di Joomla.
Il file da modificare si trova in com_content/category/default_children.php

Andiamo in Estensioni > Template > Template e clicchiamo sul template che stiamo utilizzando (nel nostro esempio Protostar)

Template


Clicchiamo sul tab Crea override, clicchiamo su com_content e poi su category

Creazione override

Clicchiamo ora su Editor, selezioniamo la cartella html > com_content > category e poi il file default_children.php. Sulla destra apparirà un editor per modificare il file.
Inseriamo tra la riga 44 e 45 (con le successive versioni di Joomla la posizione può cambiare) il seguente codice

<?php echo '<img src="'.json_decode($child->params)->image . '" />'; ?>



Inserendo il codice all'interno del link del titolo della categoria, anche l'immagine sarà collegata alla categoria. ecco il risultato:

Modifica del file di override

Classe css per migliorare l'aspetto


Protostar è un template basato su Bootstrap 2, possiamo quindi utilizzare le classi di Bootstrap per migliorare l'aspetto delle immagini.
Inseriamo la classe "img-polaroid" all'immagine (la classe "img-thumbnail" è pendente in Bootstrap 3) in questo modo:

<?php echo '<img class="img-polaroid img-thumbnail" src="'.json_decode($child->params)->image . '" />'; ?>



Ecco il risultato finale:

Risultato finale



Articolo tratto da:
https://www.ostraining.com/blog/joomla/subcategories/

commentaCommenta questo articolo sul forum

Ultima versione di Joomla!®

downloadVer. 3.6.5 Stabile Italiana
Data di rilascio:14 Dicembre 2016
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: