Giuida passo passo che spiega come inserire un logo in un template custom per Joomla! 4, quinto articolo della serie dedicata alla realizzazione di template personalizzati per Joomla!
Nel precedente articolo della serie, Menù di navigazione con Boostrap 5 in un template per Joomla! 4, ti ho mostrato come realizzare una navbar, oggi vedremo come inserire al suo interno un logo.
Per prima cosa dovrai crearne uno a tuo piacimento, per cui con Illsutrator, Photoshop o con il tuo programma di grafica preferito provvedi a realizzare il tuo logo.
Potrai utilizzare diversi formati, jpeg, png o anche webp ma in questo caso dovresti usare degli accorgimenti, se vuoi saperne di più leggi questo articolo: Immagini WebP, cosa sono e come utilizzarle.
Ti illustrerò 2 metodi diversi, partiamo subito dal più semplice:
Inserire il logo nei file del template:
La prima cosa da fare è di creare una cartella images all'interno della cartella del tuo template, in seguito inserisci il tuo logo all'interno di questa cartella.
Avendo creato una nuova cartella dovrai dire a Joomla che esiste, per cui nel templateDetails.xml dovrai inserire il codice corrispondente, nella parte relativa ai files aggiungi questo codice:
<folder>images</folder>Salva per terminare.
Ora apri l'index.php del tuo template e trova il codice relativo alla tua navbar che dovrebbe essere questo:
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Titolo del sito</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<jdoc:include type="modules" name="navigazione" style="none" />
</div>
</div>
</nav>Sostituisci:
<a class="navbar-brand" href="#">Titolo del sito</a>con:
<a class="navbar-brand" href="#"><img src="/images/logo-di-esempio.png" width="230px" height="61px"></a>Salva per terminare e il tuo sito ora visualizzerà il logo:
Per questo esempio non ho inserito il testo alternativo per l'immagine tramite il tag alt.
Questo metodo è semplice e abbastanza immediato, ma sul lungo andare potrebbe complicare la vita visto che le rivisitazioni del logo non sono poi così inusuali.
Ogni volta bisognerebbe modificare tutto dai file del template, con tempistiche non proprio immediate, per cui ora ti spiegherò il secondo metodo:
Inserire il logo dal backend di Joomla! 4.
Per farlo dovrai "istruire" Joomla! su quali siano le operazioni che vorrai effettuare dal pannello amministrativo del sito, di nuovo entra in gioco il file templateDetails.xml.
Dopo la chiusura del tag positions e subito prima di </extension> inserisci questo codice:
<config>
<fields name="params" >
<fieldset name="Layout" label="Impostazioni del layout del sito">
<field name="logo" type="radio" default="1" label="Logo" description="Vuoi usare un logo per il tuo sito?">
<option value="0">No </option>
<option value="1">Si </option>
</field>
<field name="logofile" type="media" label="Inserisci qui il Logo" />
<field type="spacer" name="block1" hr="true" />
<field name="titolo" type="radio" default="1" label="Titolo del sito" description="Vuoi usare il titolo del sito?">
<option value="0">No </option>
<option value="1">Si </option>
</field>
<field name="sitetitle" type="text" default="" label="Inserisci il titolo del sito, fallo anche se non lo userai" />
</fieldset>
</fields>
</config>Lo scopo è quello di inserire un "pannello" nella sezione "stili template" da cui poter inserire dei parametri di configurazione per il tuo template.
Per farlo hai comunicato a Joomla! dei parametri di configurazione all'interno dei tag <config> e </config> nello specifico:
1) tramite <fieldset name="Layout" label="Impostazioni del layout del sito"> hai creato una tab che si occuperà di gestire alcuni aspetti del layout a cui hai dato il titolo "Impostazioni del Layout del sito".
2) Tramite <field name="logo" type="radio" default="1" label="Logo" description="Vuoi usare un logo per il tuo sito?"> inserisci un'opzione per decidere se voler utilizzare un logo e la gestisci tramite i comandi "no" e "si"
3) tramite <field name="logofile" type="media" label="Inserisci qui il Logo" /> crei l'opzione per caricare un file media
4) tramite <field name="titolo" type="radio" default="1" label="Titolo del sito" description="Vuoi usare il titolo del sito?">inserisci un'ulteriore opzione che servirà per decidere se avere "logo testuale" del sito al posto dell'immagine, anche in questo caso gestita tramite i comandi "no" e "si".
5) infine tramite <field name="sitetitle" type="text" default="" label="Inserisci il titolo del sito, fallo anche se non lo userai" /> crei l'opzione per inserire il titolo testuale.
Salva per terminare e sul backend del tuo sito, nella sezione degli stili del template, aprendo il tuo template custom troverai questa tab:
Apri ora l'index.php alla riga 1 hai questo codice:
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>ora dovrai "estenderlo" e deve diventare:
<?php defined( '_JEXEC' ) or die( 'Restricted access' );
$app = JFactory::getApplication();
$titolo = $this->params->get('titolo');
$sitetitle = $this->params->get('sitetitle');
$logo = $this->params->get('logo');
$logofile = $this->params->get('logofile');
$templateparams = $app->getTemplate(true)->params; ?>Vedi da solo che hai inserito i paramentri che avevi precedentemente preparato nel tuo templateDetails.xml, ora li ha resi "funzionanti" tramite : $templateparams = $app->getTemplate(true)->params;
Come ultima fase dovrai inserire il codice php per poter visualizzare i paramentri di configurazione sul frontend del sito:
<a class="navbar-brand" href="#">
<?php if ($logo == 1) { ?>
<img src="/<?php echo ($templateparams->get('logofile'));?>" alt="<?php echo htmlspecialchars($templateparams->get('sitetitle'));?>" width="230px" height="61px">
<?php } ?>
<?php if ($titolo == 1) { ?>
<span class="titolo-sito"> <?php echo htmlspecialchars($templateparams->get('sitetitle'));?></span>
<?php } ?>
</a>Il codice è abbastanza basilare, in pratica se dal backend scegli di visualizzare il logo, if ($logo == 1), verrà visualizzata l'immagine che avrai caricato sul backend, echo($templateparams->get('logofile')); , questa immagine userà il paramentro "sitetitle" per la descrizione alternativa.
Se deciderai di visualizzare il titolo anziche il logo, if ($titolo == 1), verrà "scritto" all'interno di un elemento span.
Ovviamente potrai decidere di far visualizzare entrambi, dovrai lavorare di css sul tuo stile personalizzato come ti ho indicato in: Creare un template per Joomla! 4 terza parte: inserire fogli di stile
Ti ho mostrato 2 vie per inserire un logo in un template custom per Joomla! 4, in teoria potremmo anche finire qui ma manca un ultimo passaggio che è valido per entrambi i metodi:
Inserire un link alla home page sul logo
individua questo codice:
<a class="navbar-brand" href="#">e sostituiscilo con:
<a class="navbar-brand" href="/<?php echo $this->baseurl ?>">Salva per terminare.
Ora il tuo logo o il titolo del tuo sito porteranno alla home page se verranno cliccati a prescindere da quale pagina si stia visitando.
Se hai domande scrivile nei commenti.
