Trucchi: mostrare immagini come categorie in home page

cappello a cilindro da maghiC'è un modo davvero semplice per mostrare in modo automatico una immagine collegata a una categoria accanto ad un articolo pubblicato nella nostra home page. Vediamo come...

Nasce da una richiesta sul forum l'esigenza di mostrare  una immagine diversa per ogni categoria di appartenenza vicino agli articoli pubblicati in home page, con la visualizzazione tipica della home di joomla. Ho fatto una ricerca ed ho trovato una soluzione davvero semplice, brillante  e molto pulita, dato che useremo la tecnica dell'override del template.

Per prima cosa creiamo dentro la cartella images (quella di Joomla! non quella del template) una cartella categories dove inseriremo le immagini che dovranno rappresentare le nostre categorie. Queste immagini potranno avere qualsiasi estensione .jpg .png .gif (ma tutte uguali) e si dovranno chiamare esattamente come il numero ID della categoria che dovranno rappresentare. Per esempio, se la mia categoria ha ID 12 e io decido di fare una immagine di tipo .gif la chiamerò: 12.gif

Una volta create tutte le immagini che ci servono e messe dentro la cartella images/categories/ talchè l'indirizzo dell'immagine di prima sarà:
images/categories/12.gif
dovremo inserire una stringa di codice nel file che imposta la prima pagina, visualizzazione blog, di Joomla!
Come anticipato useremo la tecnica dell'override e come esercizio faremo l'inserimento nel template rhuk milkyway che ciascuno di noi ha presente nella installazione di Joomla!. Potremo perciò fare la nostra prova senza provocare danni.

Per prima cosa dobbiamo creare dentro la cartella html del template rhuk milkyway una cartella chiamata com_content e dentro questa una cartella chiamata frontpage dentro la quale copieremo il file

components/com_content/views/frontpage/tmpl/default_item.php

che avrà dunque questo percorso:

html/com_content/frontpage/default_item.php

Adesso apriamo questo file e cerchiamo questo codice (circa a riga 14):

Immagini come categorie

per incollarci subito sotto questo codice:
<img src="images/categories/<?php echo $this->item->catid?>.gif">
 
E' tutto. Se adesso andiamo a vedere, in home page sarà comparsa davanti al titolo di ogni articolo l'immagine corrispondente alla categoria cui appartiene l'articolo stesso, che noi avevamo chiamato esattamente come l'ID della categoria e che avevamo messo dentro la cartella images/categories.

Chiaramente potrete incollare quella stringa in qualunque punto del file default_item.php per far comparire l'immagine dove garba a voi. Attenzione a modificare la parte finale ( .gif) della stringa con la giusta estensione corrispondente alle vostre immagini se diverse dalla .gif

Gli articoli appartenenti a categorie per le quali non mettete una immagine nella cartella images/categories appariranno, come prima di questa modifica, senza alcuna immagine.

Con  l'override del file default_item.php relativo alla visualizzazione di tipo blog prima pagina le icone appariranno solo in home page. Se volete far apparire l'immagine anche nella visualizzazione del singolo articolo allora dovrete fare l'override  del file:
components\com_content\views\article\tmpl\default.php
incollandoci opportunamente la stessa stringa che abbiamo utilizzato per il default_item.php sostituendo la parola item con article.

Qui potete osservare in una demo come ho messo le icone nella home page del mio sito.

Articolo scritto da tonicopi - Joomla Css Zen Garden


CommentaCommenta questo articolo sul forum