Realizzazione e restyling blog personali, siti internet professionali, aziendali ed ecommerce
Web Hosting, amministrazione, gestione ed assistenza

Come promesso nel post precedente ecco un'altra breve guida su come gestire i link all'interno di un articolo da pubblicare sul proprio sito internet utilizzando l'estensione "Mediabox" di JCE, uno degli editor più diffusi su Joomla.

Questa funzionalità si aggiunge alla normale gestione dei link ed è particolarmente utile per aprire con uno zoom "popup", immagini o altri contenuti multimediali ma anche documenti come pdf ecc con un gradevole effetto lightbox da galleria fotografica.
Ma cominciamo dall'inizio:

Inserire un link su un testo o su una immagine

Creare un link, come ad esempio quello presente all'inizio di questo articolo che rimanda al post precedente, può essere molto utile. Per farlo è sufficiente selezionare la parola, la frase o l'immagine che desideriamo utilizzare come "pulsante" e cliccare sul bottoncino a forma di catena presente nell'interfaccia dell'editor JCE pulsantino link che apre la schermata "gestione link" dove è possibile impostare tutte le caratteristiche necessarie.

JCE mediabox gestione linkLa prima casella "Url" è quella in cui dobbiamo inserire il nostro link. Possiamo utilizzare diversi metodi in base a quello che desideriamo linkare:

  • digitare l'indirizzo (url) - anche di una pagina esterna al nostro sito internet - o incollarlo con "copia-incolla"
  • cercare all'interno del nostro sito con "cerca" o sfogliando i contenuti presenti nelle cartelle sottostanti
  • cliccare sul pulsantino a forma di documento (JCE documento) per selezionare un file sfogliando le cartelle del sito o importandolo dal nostro pc
  • cliccare sulla bustina (JCE bustina) per inserire un link per l'invio di una email.

La seconda casella "Testo" riporta appunto il testo che abbiamo selezionato, "post precedente". Quando si seleziona un'immagine appare invece la dicitura "element selection".

Per completare l'inserimento è sufficiente impostarne la "Destinazione" nell'omonima casella in fondo alla schermata.
La scelta predefinita apre il nuovo link "nella stessa finestra" che va quindi a sostituire nel browser la pagina che stiamo leggendo mentre, se vogliamo che il link si apra in una nuova finestra senza abbandonare quella di provenienza, dobbiamo impostare la voce specifica.

Ultimo passaggio, facoltativo, ed ultima casella: "Titolo". Il titolo è il famoso "tooltip", una casella di testo che appare quando si passa su un link con il puntatore del mouse e che può essere di aiuto all'utente del sito internet. E' consigliabile inserire il tooltip in questa casellina solo nel caso di un link testuale. Per le immagini infatti è preferibile gestirlo nell'apposito pannello. (vedi post precedente)

Cliccando sul pulsante "Aggiorna" si conclude l'operazione salvando le impostazioni. Per modificarle è sufficiente riselezionare il testo o l'immagine e riaprire la schermata "Gestione link" cliccando sul pulsantino a forma di catena.

Fino a quì abbiamo visto come inserire un semplice link con JCE, adesso però vediamo cosa possiamo fare grazie all'estensione "MediaBox":

Aprire un link "popup" con un effetto LightBox

Questo effetto aggiunge al nostro post un tocco semplice ma elegante all'apertura di un documento, di una immagine o di un altro contenuto multimediale. Questo ci permetterà ad esempio di creare una piccola galleria con le immagini ingrandite presenti nel nostro post, ma anche di inserire molti altri formati: pdf, file audio o video con cui arricchire il nostro articolo. Tutti si apriranno sempre con il giusto visualizzatore, ridimensionati alla misura dello schermo e con il gradevole e caratteristico effetto Lightbox.  Vediamo quindi come realizzare tutto questo con pochi passaggi.

Al momento della scelta del link clicchiamo sul pulsantino (JCE documento) questo aprirà la schermata "File browser". Da quì è possibile sfogliare i file già presenti sul server del sito oppure importarli dal nostro pc. Una volta scelto il contenuto, confermando si torna alla finestra principale "Gestione link" e quindi si clicca sulla terza "linguetta": Popup.

JCE madiabox popupSelezionando "Popup JCE MediaBox" dal menu a tendina del primo campo - Tipo - come indicato nell'immagine appaiono numerose opzioni. Quelle che ci interessano davvero sono solo: Didascalia e Gruppo.

La prima - Didascalia - è una descrizione che appare in basso sulla cornice dentro cui si aprie il popup del contenuto che abbiamo selezionato, possiamo inserire una breve descrizione che servirà a migliorare l'esperienza del nostro visitatore.

La seconda - Gruppo - può essere usata se desideriamo creare una continuità con tutti gli altri popup presenti nell'articolo. Attribuendo un nome univoco a tutti infatti, potremo creare una vera e propria "galleria" che ci permetterà di passare da un contenuto all'altro cliccando sulle frecce indicatrici.

Cliccando sul pulsante "Inserisci" salviamo le impostazioni e torniamo alla schermata dell'editor dove concluderemo la redazione dell'articolo.

Ricapitolando:

  • Selezionare l'immagine o il testo che faranno da pulsante
  • Cliccare sul pulsantino a forma di catena JCE pulsantino link
  • Cliccare sul pulsantino a forma di documentoJCE documento
  • Sfogliare e scegliere la foto o il contenuto che apparirà zoommato
  • Cliccare sulla linguetta "Popup"
  • Selezionare il "Tipo" dal menu a tendina: Popup JCE MediaBox
  • Inserire la "Didascalia" descrittiva (facoltativo)
  • Inserire il "Gruppo" per creare la galleria (facoltativo)
  • Cliccare su "Inserisci" per salvare le impostazioni

Per cambiare le impostazioni, selezionare il testo o l'immagine linkata e cliccare di nuovo sul pulsantino con la catena.
Per cancellare il link, sempre dopo averlo selezionato, cliccare sul pulsantino a sinistra che raffigura appunto una catena spezzata,

Pochi passi davvero per arricchire di contenuti i nostri post con un effetto elegante e molto gradevole che renderà più piacevole la navigazione tra le nostre pagine dei visitatori ... e dei motori.


Per qualunque domanda o informazione