Prosegue lo sviluppo del sito di cui a questo post (inutile aggiungere che ormai Joomla giace nel cestino, mentre Drupal, ancora una volta, si sta rivelando un ottimo CMS/framework).

Essendo un sito di impostazione giornalistica, di grande utilità risulterebbe quel piccolo scrippettino che permette di ridimensionare il testo degli articoli per facilitarne la lettura. In rete c’è una miriade di script utili alla causa, ma se concordate con me sul fatto che Drupal possiede già un ottimo motore javascript (ops, oggi si dice AJAX ) quale jQuery, che motivo c’è di caricare ulteriori script per ottenere quello che per metà già abbiamo?

Ebbene, ecco come ho fatto ad aggiungere il ridimensionamento del testo nel mio sito (con Drupal 5.1).

Come prima cosa, bisogna prendere il file fontsizer.js da qui (per ora lasciate perdere quello che c’è scritto sul sito, salvate il file e basta ).

Mettetelo nella directory del vostro tema, io l’ho messo in una cartella chiamata /js in modo da avere:

sites/all/themes/directory_del_tema/js/fontsizer.js

A questo punto scaricate questo plugin qui: serve ad aggiungere a jQuery il controllo dei cookie, ed è richiesto da Fontsizer. Installate anche questo nella cartella del vostro tema (nel mio caso, come sopra, nella cartella /js).

Ora bisogna dire a Drupal che deve caricare anche questi script nella visualizzazione del sito. Per fare questo, basta editare il file page.tpl.php nella directory del vostro tema e inserire, subito prima del tag </head>, questo.

Le opzioni min: -1, max: 4 indicano il range di dimensionamento dei caratteri e sono espressi in em.

Adesso bisogna inserire i comandi per il ridimensionamento del testo nella pagina, nel nostro caso bisogna editare il file node.tpl.php:

<a href="#" onclick="$.FontSizer.IncreaseSize();" title="Aumenta la dimensione del testo" class="increase-text">Più grande</a>
<a href="#" onclick="$.FontSizer.DecreaseSize();" title="Diminuisci la dimensione del testo" class="decrease-text">Più piccolo</a>
<a href="#" onclick="$.FontSizer.Reset();" title="Dimensione del testo normale" class="reset-text">Normale</a>

Inseriteli dove ritenete più opportuno e modificateli, ovviamente, come più vi aggrada. Il mio risultato (abbinato anche a qualche riga di CSS) è visibile nell’immagine in alto a sinistra all’inizio del post.

I selettori utilizzabili per dare il comando (per esempio $.FontSizer.DecreaseSize(); per diminuire il testo) sono questi:

IncreaseSize() - aumenta la dimensione dei caratteri

DecreaseSize() - diminuisce la dimensione dei caratteri

Reset() - torna alla dimensione normale del testo

SetSize(level) - imposta un valore level predeterminato di zoom

A questo punto la funzione di dimensionamento funzionerà sull’intera pagina web. Se volete limitare l’effetto ad un determinato DIV della pagina, dovrete editare il file fontsizer.js e scorrere fino alla riga 63:

$("body").css("fontSize", level+"em");

e modificare body con il selettore DIV cui applicare l’effetto (occhio a inserire anche il punto . o il cancelletto # se si tratta, rispettivamente, di attributo CLASS o ID).

Buon sviluppo!

PS: scusate, se qualcuno sa dirmi come diavolo si fa ad inserire il codice PHP, Javascript ecc… in un post su Wordpress, potrebbe gentilmente lasciarmi un commento per spiegarmi come fare? Grazie!