Translate

Tags: ,

JCE Mediabox - Inserire immagini con effetto lightbox

Questo plugin di JCE è davvero straordinario. Una volta che impariamo ad usarlo bene potremo rinunciare tranquillamente ad ogni altro plugin per inserire immagini qua e là nei nostri articoli con un gradevole effetto lightbox.

Si scarica dal sito del produttore l'ultima versione di JCE Mediabox (fino a poco fa si chiamava JCE Utilities).

Si presuppone che abbiate installato l'ultima versione dell'editor JCE.

Installiamo quindi il plugin JCE Mediabox nel modo usuale e poi 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.

Andiamo adesso ad inserire una immagine nel nostro articolo. Mettiamo il cursore nel punto dove vogliamo inserire l' immagine e 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.

LegsFino a questo momento però l'immagine che abbiamo inserito ridimensionandola non è ancora un link. Per renderla tale dobbiamo cliccarci sopra per evidenziarla e quindi cliccare questa volta sull'iconcina dei link. Si aprirà un pannello come questo che vedete in basso a destra jce utilities2e dovrete cliccare sull'icona dell'inserimento immagine in modo da scegliere quella che vorrete far aprire al clic, presumibilmente la stessa che prima abbiamo inserito come thumbnail. Una volta fatto questo ancora non abbiamo finito e dovremo cliccare sulla tab Advanced in modo da scegliere di far aprire l'immagine in un popup con effetto lightbox. jce utilities3

Bisogna dire che questo plugin lavora davvero in modo eccellente a dir poco. Infatti come avete visto, possiamo scegliere  noi l'immagine che farà da thumbnail e stabilirne la dimensione. Immagine che può anche essere diversa da quella che poi si aprirà al clic.

Possiamo poi linkare immagini di qualsiasi dimensione, anche grandissime come quella che vi posto qui in basso. Ma il popup che si aprirà si adeguerà alle dimensioni del monitorbaciobici dell''utente evitando fastidiosi scroll e lasciando all'utente stesso la scelta di ingrandire ulteriormente l'immagine usando il tasto destro del mouse.

Possiamo inoltre linkare una immagine ad una parola invece che a una thumbnail, come avete visto, 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 o qualsiasi altra pagina web tipo una mappa. Quindi davvero questo plugin ci consente di rendere con grande facilità molto interattivi i nostri articoli. Se stiamo parlando di un grande uomo di stato possiamo subito associare al volo la sua immagine alle parole grande uomo di stato, tanto per fare subito un altro esempio....
Potete linkare persino un video su youtube semplicemente copiando e incollando la URL che vedete nel browser.

elvisO anche potete collegare il video a una immagine come potete vedere cliccando su Elvis Presley qui di fianco per ascoltare il mitico brano Suspicious Mind.

amicheBSe avete avuto la pazienza e la bontà di arrivare fin qui in fondo allora meritate proprio un premio. Vi svelo un'ultima capacità di questo meraviglioso plugin.

Una cosa che sanno davvero in pochi, tanto che non se ne trova traccia nemmeno nel sito ufficiale di JCE.  Aggiungendo l'attributo retro="true" all'immagine che usate per thumbnail vi restituirà al clic l'immagine ingrandita ma dal verso opposto. Cliccate nell'immagine qui a destra delle mie due amiche (che ringrazio per la disponibilità) per capire cosa intendo....

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

Si può utilizzare questo plugin anche per mostrare in modo simpatico il modulo di login usando 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.

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.

pitonassa

Add a comment

Aggiungere una nuova posizione modulo in un template Joomla

La struttura di un sito fatto con joomla solitamente ha una parte centrale gestita dal componente homepage e alcune parti (meglio chiamate "blocchi") in cui è possibile inserire dei moduli. I menu, ad esempio, sono gestiti dai moduli; quando decidiamo di mettere il menù sulla destra, in alto nel nostro sito selezioniamo a questo modulo una posizione. Per capire come Joomla organizza i moduli apriamo il menu “Estensioni>Gestione moduli”.

 

gestmoduli

Viene qui visualizzato l’elenco dei moduli presenti nel sito. Di ogni modulo possiamo impostarne la posizione nel nostro template. Le posizioni possono essere pensate come aree in cui possiamo inserire uno o più moduli, inserirli verticalmente o orizzontalmente.

Ogni template, essendo unico, gestisce le posizioni all’interno della pagina in modo differente, senza una regola precisa tranne la corrispondenza di alcune definizioni come “left”, "right" “top”, “footer”. Ma queste definizioni non corrispondono in tutti i template alla stessa posizione. Cambiando template a volte non compaiono dei moduli, oppure compaiono ma in posizioni completamente diverse da quelle del template precedentemente impostato come predefinito.

Per vedere quali sono le posizioni che vengono fornite da un template apriamo la pagina “Gestione template” e clicchiamo su “Anteprima” . Verrà mostrata una pagina in cui, sovrapposto al template, viene mostrata una maschera che elenca le posizioni utilizzate da ogni modulo per il template in uso.

Come inserire una nuova posizione

Apriamo il nostro client FTP e colleghiamoci al server in cui risiede fisicamente il nostro Joomla. Selezioniamo la cartella templates ed apriamo la directory del template in uso. Scarichiamo sul nostro pc ed apriamo il file templateDetails.xml per studiarne la struttura: scorriamo fino a trovare il tag <positions>.

img-r3

Le posizioni identificate dal file sono quelle utilizzabili all’interno del template. Questo ci indica quali posizioni possiamo usare, ma non dove vengono utilizzate. Per capire dove queste vengono visualizzate ed il loro funzionamento, apriamo il file index.php. Troviamo all’interno pezzi di codice HTML e PHP; speciali istruzioni definite come jdoc:include

img-r4

Questa istruzione indica a Joomla di includere tutti i moduli che hanno come posizione “user4”. Per modificare dove deve essere visualizzata una posizione è sufficiente agire nel file index.php e nel CSS; si raccomanda prudenza perchè basta una piccola distrazione e possiamo "distruggere" il nostro bel template. Per questo si raccomanda, prima di ogni modifica, di salvare il file e conservarlo in caso di emergenza.

Per aggiungere una nuova posizione invece apriamo il file templateDetails.xml ed aggiungiamo una nuova voce <position>, definendola con un nome univoco non in uso. Ora all’interno del file index.php individuiamo la posizione dove verrà aggiunta la posizione ed inseriamo una linea di codice come questa:

<?php if ($this->countModules('nomeposizionecreata')) : ?>
<div id="miodiv">
<jdoc:include type="modules" name="miaposizione" />
</div>
<?php endif; ?>

A questo punto non resta che applicare a questa posizione i corretti stili CSS in modo che venga visualizzata nella giusta posizione e nel modo da noi desiderato. Si raccomanda sempre la massima prudenza. L'errore è dietro l'angolo quando tocchiamo questi tipi di file

 

Add a comment

Come effettuare un Backup del sito Joomla!

Molto spesso noi Webmaster alle prime armi ci "adagiamo" sulla consapevolezza che il nostro fornitore di Hosting ci assicura il Backup, magari mensile o bisettimanale, del nostro sito, questo è sbagliato!
E' vero anche che a seconda del fornitore e dei servizi aggiunti, i Backup potrebbero essere giornalieri, ma quelli fatti dall'Hoster dovrebbero servire solo in caso di "emergenza".
Sarebbe molto utile invece farli personalmente, magari a cadenza regolare, o comunque quando sappiamo che il sito è "OK".

Add a comment

Creare una Intropage per Joomla

Ogni tanto capita di voler visualizzare, al posto del template predefinito del sito, una pagina introduttiva (Intropage) contenente ad esempio un'immagine cliccando sulla quale si accede al sito vero e proprio.

La soluzione che propongo in questo articolo prevede l'utilizzo di un secondo template vuoto e un articolo di Joomla contenente l'immagine da visualizzare nella Intropage.

Add a comment