JCE editor

 

Installare JCE

Nella malaugurata ipotesi che il server vi restituisca invece un errore di installazione (mi è capitato ad esempio nell'hosting gratutito ilbello.com) non scoraggiatevi e scaricatevi sempre dal sito del produttore i due distinti pacchetti plg_jce_156.zip e com_jce_157.zip e, contrariamente a quello che dicono molte guide, installate prima il plugin e poi la componente. A questo punto l'installazione dovrebbe completarsi felicemente.

Configurare JCE

Adesso andiamo in Componenti--> Jce Administration--> Control Panel dove la scritta  Editor is not set as the default WYSIWYG Editor in the Joomla! Configuration ci avvertirà subito che JCE non è l'editor predefinito per il nostro sito. Cosa che andiamo subito a fare cliccando su Sito e poi su Configurazione dove dal menù a discesa alla quarta voce Editor WYSIWYG predefinito sceglieremo il nostro nuovo editor JCE 1.5.6. Ma non avevamo installato la versione 1.5.7? Vero, ma la scelta riguarda il plugin che è indietro di un numero rispetto alla componente.Tutto OK dunque.

Apro anche una parentesi per dire che abbiamo fatto adesso la scelta dell'editor predefinito ma ciò non impedisce che ad ogni singolo utente possa essere assegnato un editor diverso dai parametri individuali nella gestione utenti. Questo è anche il motivo per cui a qualcuno non appare il nuovo editor JCE e continua a trovarsi quello di default, perchè tempo addietro, settando i parametri del proprio utente , si era assegnato l'editor TinyMCE senza farci molto caso…

 

Usare JCE

A questo punto, specialmente se abbiamo un template con sfondo scuro, potrebbe succedere che non riusciamo a leggere bene il testo che inseriamo. La soluzione a questo fastidioso inconveniente è molto semplice. Andiamo in Componenti---> JCE---> Configurazione e alla voce Formatting settare a NO la voce Use Template CSS. Con questo rinunciamo ad applicare all'editor ICE il foglio di stile del nostro template.

 

Dal momento che siamo dentro la configurazione incolliamo anche questa stringa

gecko_spellcheck : true

nel riquadro immediatamente sottostante Custom Configuration Variables. Così attiviamo il correttore ortografico per la lingua italiana.

JCE Mediabox        Mediabox    JCE Mediabox

Dopo aver parlato di JCE in questo articolo, vediamo come renderlo ancora più potente con questo plugin davvero straordinario a mezzo del quale potremo far aprire da un nostro articolo una immagine, una mappa, un articolo, persino un video, con un gradevole effetto lightbox.

 

Si presuppone che abbiate installato l'ultima versione dell'editor JCE che al momento in cui scriviamo è la 1.5.7 con il relativo plugin 1.5.6.

Si presuppone anche che sappiate già usare JCE e il suo Image Manager. Diversamente andate a rileggervi l'articolo citato all'inizio.

Scaricare ed installare JCE Mediabox

Per prima cosa ci dobbiamo procurare il plugin che si scarica dal sito del produttore. Prendiamoci  l'ultima versione di JCE Mediabox (fino a poco fa si chiamava JCE Utilities). Una volta scaricato nel vostro computer lo dovrete installare nel modo usuale cliccando su Estensioni e poi su Installa/disinstalla e infine su sfoglia e poi su Carica file & Installa.

Configurare ed abilitare JCE Mediabox

Ad installazione felicemente avvenuta  andiamo ad abilitarlo da gestione plugin. Ci sono un bel pò di parametri configurabili ma per il momento lasciamo tutto come lo abbiamo trovato e limitiamoci solo a spuntare su SI l'attivazione del plugin.

Inserire immagini, articoli, mappe, video con JCE Mediabox

jce mediabox

Andiamo adesso ad inserire una immagine nel nostro articolo. Mettiamo il cursore nel punto dove vogliamo inserire l' immagine, poi clicchiamo sulla classica iconcina di JCE e inseriamo l'immagine che abbiamo già in una delle cartelle di joomla oppure scegliendola con il tasto sfoglia nel nostro computer e caricandola al volo su una cartella di Joomla! Stabiliamo anche le dimensioni che vogliamo che abbia la thumbnails, l'icona che vedremo nell'articolo e che, una volta cliccata ci mostrerà l'immagine a dimensioni naturali con l'effetto lightbox. Dopo averla inserita dobbiamo renderla cliccabile. Per far questo evidenziamola e poi clicchiamo sull'iconcina per inserire il link. Si aprirà stavolta il gestore dei link come vedete qui sopra e dovrete cliccare sull'icona dell'inserimento immagine (cerchiata in rosso) in modo da scegliere quella che vorrete jce popupfar aprire al clic, presumibilmente la stessa che prima abbiamo inserito come thumbnail. Tutte queste cose le sapevamo già, però. E ancora non abbiamo compreso perchè mai l'immagine dovrebbe aprirsi con effetto lightbox. Allora prima di cliccare su UPDATE e chiudere il pannello cliccate sulla tab Advanced e nel box Class List scegliete dal menù a discesa la voce jcepopup.

 

Se tutto è andato per il verso giusto potrete adesso andare nel frontend ed ammirare l'immagine che si apre con un gradevole effetto lightbox.

C'è da dire che questo plugin lavora davvero in modo eccellente. Ha una qualità che non è presente in moltissime altre applicazioni simili. Un esempio: possiamo linkare immagini di qualsiasi dimensione, anche grandissime ma il popup che si aprirà si adeguerà alle dimensioni del monitor dell''utente evitando fastidiosi scroll e lasciando all'utente stesso la scelta di ingrandire ulteriormente l'immagine usando il tasto destro del mouse. Possiamo ovviamente linkare una immagine ad una parola invece che a una thumbnail, con la comodità di richiamare immagini contestuali all'argomento di cui stiamo scrivendo. Non solo, possiamo anche richiamare un articolo presente nel nostro sito joomla che si aprirà nel popup senza moduli o altri parti del template, o qualsiasi altra pagina web anche esterna al nostro sito e farla aprire dentro il lightbox. Potremo linkare in questo modo una mappa per esempio, oppure un video, semplicemente inserendo l'URL che vedete nella barra del vostro browser. Ci pensate che comodità! Alzi la mano chi non è incappato almeno una volta nella difficoltà di inserire il codice di un video di YouTube in un articolo...

 

Con questo plugin niente più difficoltà e quando ci avrete preso la mano sarà proprio semplice inserire in modo elegante diversi media dentro i nostri articoli.

Non ho esaurito con questo articolo tutte le possibilità e i modi di impiego di questo plugin. A voi prenderci gusto e discuterne nel forum.

 

EDIT 1.1.2011 : Con la versione attuale di JCE (plg_jcemediabox_1013_joomla15.zip) accade che, inserendo i video di youtube in un lightbox, al secondo clic appare una schermata bianca. Al terzo si vede il video, al quarto una schermata bianca, e così via, una volta si e una volta no. La soluzione è sempliccissima ed è stata scoperta in questo topic. Basta modificare l'indirizzo del video da inserire da così:

http://www.youtube.com/watch?v=Q496vum8VuI

a così:

http://www.youtube.com/v/Q496vum8VuI

Qui potete vedere JCE Mediabox all'opera in una demoOcchiolino

 

Articolo scritto da tonicopi - Joomla Css Zen Garden

Se si vuole mettere una immagine in relazione ad un'altra nella stessa pagina, cambiando così il lightbox in una fotogallery, come le prime due immagini di questa demo:

- nel box titolo scrivete così: Titolo galleria::Titolo foto

- nel box advanced/relazione tra la pagina e l'obbiettivo scegliendo (add value) dal menù a tendina scrivete una parola univoca tipo  frittata (o altro che vi venga in mente  :)) e le due immagini  faranno parte della stessa gallery. Così potrete fare con tutte le immagini presenti nella pagina  :D

 

- nel box (advanced/relazione) Relazione contenuto destinazione tra la pagina e l'obbiettivo scegliendo Aggiungi valore (add value) dal menù a tendina scrivete una parola univoca cioè il nome della galleria e le due immagini  faranno parte della stessa gallery. Così potrete fare con tutte le immagini presenti nella pagina

 

Si può utilizzare questo plugin anche per mostrare in modo simpatico il modulo di login come potete vedere qui a sinistra in basso. Ho usato un modulo di tipo html personalizzato per inserire il link al login con mediabox.

Inserendo i link dentro un modulo di tipo html personalizzato e applicando lo stesso suffisso classe css modulo dei menu (nel caso del rhuk _menu) si ottiene un menu molto somigliante agli altri ma con l'apertura della nuova pagina in un lightbox, come potete vedere nell'ultimo modulo a sinistra in basso.

Un link a una immagine da far aprire nel lightbox si può associare anche a una immagine rollover.

Infine diciamo che sono supportate anche le gif animate: provate a cliccare su questa qui sotto.

Inserire una immagine con mediabox su un rollover