Ci sono molti modi per inserire le immagini nella realizzazione di un articolo per un sito internet, con questa breve guida vorrei mostrare come farlo utilizzando uno degli editor più diffusi ed apprezzati su joomla: JCE.
Questo editor è gratuito, comodo e veloce e permette di fare molte operazioni rispettando tutti gli accorgimenti ed associando tutti i tags di cui abbiamo parlato nel post precedente.
L'interfaccia e il pulsantino di inserimento
Quando si crea un nuovo articolo o se ne apre uno per modificarlo quella nell'immagine sottostante è la schermata di interfaccia del programma che appare. Per inserire l’immagine nel punto esatto in cui abbiamo posizionato il cursore bisogna cliccare sul pulsantino evidenziato.
La schermata popup:
Cliccando sul pulsantino si aprirà una schermata popup che raccoglie tutti i comandi necessari all’inserimento delle immagini che andranno ad arricchire il nostro testo.
Le finestra e le sezioni:
La finestra è divisa orizzontalmente in due sezioni. In basso si trovano tre colonne, le prime due mostrano il contenuto e le sottocartelle di “images” - la cartella principale che raccoglie i media del sito - ed i file in esse contenuti. Da qui è possibile navigare tra i file presenti sul server, selezionarli e visualizzarli nella terza colonna per poterli scegliere comodamente.
Se le immagini che cerchiamo non sono ancora sul server è possibile importarle cliccando sul pulsante “Carica” - la nuvoletta
posizionata sulla destra tra le due sezioni - creando anche le cartelle per ospitarle, mentre con i pulsantini che si trovano a destra dell'anteprima è possibile eseguire alcune operazioni come cancellare, rinominare e copiare.
Una volta selezionata la nostra immagine andiamo a vedere cosa succede nel riquadro superiore della schermata dove dobbiamo completare le impostazioni per la visualizzazione ottimale.
La prima etichetta: “Immagine”
In alto a sinistra di questa sezione sono presenti tre etichette che aprono le schede in cui è possibile impostare alcuni utili attributi. Appena si seleziona il file dell’immagine nel riquadro inferiore, in questa sezione appaiono automaticamente:
- la "URL" che, se abbiamo rinominato correttamente il nostro file, assomiglia molto alla url di una qualunque pagina del sito con le parole separate dal segno “-“.
- Il “Testo alternativo” che viene automaticamente compilato con il nome del file senza il segno “-“.
Il Testo alternativo è un tag molto importante per i motori di ricerca ed è comodo che JCE lo compili per noi in modo automatico. Se abbiamo dato un nome significativo all’immagine … è una cosa in meno da ricordare, altrimenti è possibile modificarlo e se per sbaglio lo dovessimo lasciare vuoto, al momento di applicare le modifiche JCE ce lo ricorderà, permettendoci di correggere questa dimenticanza. - Le “Dimensioni” che possiamo modificare impostando valori diversi da quelli originali.
Non è conveniente usare questo parametro per ingrandire perché il risultato sarebbe un'immagine “sgranata”. E' invece sempre consigliabile attribuire alle immagini una dimensione il più possibile vicina a quella che vogliamo utilizzare. Tuttavia può capitare che queste siano usate anche altrove e con altre dimensioni, oppure che le si vogliano visualizzarle ingrandite con un effetto popup - cosa possibile con JCE e di cui parleremo nella prossima guida - in questi ed in altri casi questo parametro può tornarci senz’altro comodissimo.
L’opzione “proporzionale” inoltre ci consente di modificare larghezza ed altezza in modo indipendente, ovviamente ottenendo una visualizzazione deformata, cosa che la rende una possibilità da vagliare molto attentamente.
Per completezza, il ridimensionamento può essere fatto anche col metodo drag&drop ovvero cliccando e trascinando direttamente un angolo dell'immagine fino ad ottenere la misura desiderata.
Il campo “Allineamento” riguarda la scelta di come allineare il testo che si trova intorno all’immagine. Con questa opzione stabiliremo quindi se allinearlo a destra o a sinistra o sotto eccetera.
Nelle caselle “Margin” invece andremo ad inserire in pixel lo spazio che vogliamo mantenere libero intorno all’immagine per migliorarne la lettura. Può essere applicato da una parte, da più parti o da tutte le parti, in base a come il testo la circonda.
Ed infine L’ultimo campo - che in questa schermata si intravede appena - è il “Bordo” con cui possiamo scegliere colore e spessore di una eventuale bordatura.
La scheda “Rollover”
Questa scheda presenta due sole caselline: "Mouseover" e "Mouseout". 
Questi campi possono essere usati per creare l’omonimo effetto di movimento al passaggio del mouse. Per farlo basterà inserire la url di due immagini leggermente diverse, ad esempio, una più chiara ed una più scura … et voilà il gioco è fatto!
Ed infine la scheda “Avanzato”.
Questa scheda contiene alcuni campi un po’ "complicati" ma noi ci occuperemo solo del tag “Titolo” che può agevolare l’utente nella navigazione da pc.
Titolo corrisponde al "tooltip" ovvero al testo che si vede apparire sul cursore quando si passa con il mouse sull’immagine e può essere utile, quando all’immagine è associato un link o uno zoom, per invitare a cliccare per accedere o ingrandire.
Ricapitolando:
- Posizionare il cursore nel punto in cui si vuole inserire l'immagine;
- Cliccare sul pulsantino;
- Scegliere l'immagine tra le sottocartelle "images";
- Verificare il Testo alternativo;
- Impostare le Dimensioni;
- Impostare l'Allineamento;
- Impostare i Margini di contorno;
- Nella scheda "Avanzato" inserire il Titolo "tooltip" (opzionale);
Spero di essere riuscito ad esporre semplicemente il modo di utilizzare JCE per inserire le immagini in un articolo per un sito internet e che questo possa tornarvi utile.
Nella prossima guida andremo avanti con la gestione delle immagini ed in particolare parleremo di come fare, sempre con questo editor, a "zoommare" le immagini ed altri contenuti con un effetto lightbox da galleria fotografica grazie al componente "popup JCE mediabox.