Agevolare la fruizione dei contenuti presenti sul proprio sito è uno dei fattori più importanti per migliorare l’esperienza degli utenti. Spesso, per motivi di spazio, non è possibile inserire immagini di grandi dimensioni, proprio perché dissonanti col testo descrittivo presente. Sui siti, poi, talvolta è utile l’inserimento di video, riproduttori audio e post dei propri social. Per farlo senza impattare troppo nei layout delle proprie pagine è possibile utilizzare alcuni strumenti come link diretti al contenuto.
Esistono, però, anche dei semplici strumenti che consentono di espandere i contenuti in un popup acquisendo maggiore chiarezza. Per farlo su un sito sviluppato con il CMS Joomla! è possibile scaricare ed utilizzare il plugin RokBox, un semplice strumento in grado di facilitare proprio questa operazione senza troppe operazioni.
Per prima cosa, effettuiamo l’accesso al backend Joomla!, poi seguiamo il percorso Estensioni -> Gestione -> Installa e cercare RokBox tra i plugin disponibili.
Dopo averlo installato ed attivato, nell’editor sarà possibile vedere la nuova voce RokBox (sottolineata in rosso nell’immagine in basso), che permetterà di impostare il popup. Dopo l’installazione non saranno necessarie tante operazioni all’interno delle opzioni di plugin, che si limitano a definire le misure massime del popup e il livello di qualità dell’immagine in percentuale.
In questo testo di prova abbiamo inserito alcuni dei metodi per utilizzare RokBox, come il link al testo, link ad un video da un’immagine, un collegamento video ed un ingrandimento d’immagine. Vediamo queste operazioni una alla volta.
Link immagine su testo
Per visualizzare un’immagine a partire da un testo, sarà necessario sottolineare la parte di testo che diverrà un link (nel nostro caso le parole eiusmod tempor) e fare clic sul tasto RokBox dell’editor (sottolineato nell’immagine in alto). Si aprirà così la seguente finestra di dialogo.
RokBox – Pagina di impostazioni
Dopo aver inserito il link all’immagine, è possibile inserire una regola CSS, il titolo dell’album ed una didascalia. RokBox consente anche di inserire direttamente l’immagine da ingrandire immettendo nuovamente il link e selezionando thumbnail. Il testo poi apparirà come un collegamento ipertestuale e, cliccandoci sopra, apparirà un popup con l’immagine selezionata.
Come si può intravedere nella figura, l’immagine di esempio apparirà proprio sopra all’articolo.
Link a video da immagine
In questo caso, anziché sottolineare il testo, dovremo selezionare l’immagine da linkare al video per poi fare clic sul tasto RokBox negli strumenti dell’editor. All’apertura della finestra bisognerà inserire l’URL del video ed una didascalia da unire ad esso.
Dopo aver fatto clic sull’immagine presente nell’articolo il popup mostrerà l’intero video direttamente nella pagina.
Link Video da testo
Così come abbiamo fatto per il popup dell’immagine a partire dal testo, allo stesso modo potremo inserire un intero video partendo da un collegamento ipertestuale. Basterà evidenziare la parola (nel nostro caso VIDEO), fare clic sul tasto RokBox ed inserire tutti i link come in precedenza.
Facendo clic sul collegamento creato, si aprirà un popup come quello mostrato nell’immagine in alto.
Ingrandimento immagine
Come detto ad inizio tutorial, RokBox consente anche di espandere le immagini alla loro dimensione originale. Inserendo una miniatura, infatti, dopo aver evidenziato l’immagine e fatto clic sul pulsante RokBox, basterà inserire l’URL all’immagine anche nel campo Thumbnail. Il risultato sarà quello nell’immagine in basso.
Ovviamente questo plugin consente anche di inserire i contenuti partendo dal codice HTML. Per farlo, basterà entrare nell’editor Codemirror ed utilizzare la sintassi corretta {rokbox}.
