In questa sezione verrà analizzato l'uso del prodotto e verranno proposte alcune piccole modifiche alle viste di Plone al fine di integrare PloneSlimbox.

Galleria di immagini

L'uso di PloneSlimbox è semplicissimo: il prodotto non crea nient'altro che una nuova vista che sovrascriverà atct_album_view.

All'interno di Plone possiamo creare una cartella (Folder) contenente delle immagini, ovvero possiamo utilizzare un cercatore (Smart Folder) che trovi le immagini per noi.

Una volta fatto questo scegliamo dal menu vista (display) -> Vista Provini (Thumbnail View).

Ora, quando cliccheremo su un'immagine, lo sfondo della pagina verrà oscurato ed essa verrà ingrandita in primo piano.

Muovendo il mouse sulla destra, o sulla sinistra dell'immagine ingrandita sarà inoltre possibile navigare all'interno della galleria appena creata.

Nella parte bassa dell'immagine saranno presenti anche due collegamenti che puntano a diverse sue visualizzazioni: il primo link porta alla visualizzazione standard di Plone, il secondo alla visualizzazione a tutto schermo.

Consiglio di visitare la demo presente sul sito di Slimbox per rendersi conto delle potenzialità della libreria.

Inserimento delle immagini in documento

L'integrazione di Slimbox con le altre viste di Plone è piuttosto semplice; come si legge sul sito ufficiale della libreria, è sufficiente creare un link con degli attributi in html standard compilati ad hoc.

Per esempio:

<a href="/it/labs/documentazione/tutorial/ploneslimbox/url dell immagine da visualizzare" rel="lightbox" title="Didascalia dell'immagine">Testo del collegamento</a>

Attraverso questo tag creeremo un collegamento che punta all'immagine contenuta nell'attributo href, che si aprirà alla maniera di Lightbox (dall'attributo rel) e avrà come didascalia il contenuto dell'attributo title.

Con Slimbox è possibile creare anche slideshow di immagini modificando l'attributo rel come segue:

<a href="/it/labs/documentazione/tutorial/ploneslimbox/url della prima immagine"    rel="lightbox[nome_galleria]">testo del collegamento 1</a>
<a href="/it/labs/documentazione/tutorial/ploneslimbox/url della seconda immagine" rel="lightbox[nome_galleria]">testo del collegamento 2</a>
<a href="/it/labs/documentazione/tutorial/ploneslimbox/url della terza immagine"   rel="lightbox[nome_galleria]">testo del collegamento 3</a>

In questo modo verranno creati in automatico i link ai margini dell'anteprima per visualizzare le immagini successive o precedenti.

Possiamo già intendere, dopo questa breve spiegazione, quanto possa essere semplice integrare Slimbox nei nostri documenti, attraverso l'editor Kupu.

Creiamo un nuovo documento di tipo Pagina in Plone e inseriamo un immagine. Dopodichè la selezioniamo e creiamo un link che punti all'immagine stessa; clicchiamo ora sul tasto 'html' di Kupu per visualizzare il sorgente html del documento e raggiungiamo il punto del codice in cui si trova il collegamento.

Non resta altro da fare che aggiungere a mano gli attributi del link:

rel="lightbox" title="titolo dell'immagine"

Il risultato finale sarà questo:

N.B. Se stiamo utilizzando Plone 3, ed è abilitata la modifica dei contenuti tramite KSS, il collegamento a Slimbox non funzionerà in quando il click del mouse aprirà la finestra di modifica e non l'immagine. Questo sistema funzionerà solo per gli utenti di Plone che non hanno diritti di modifica sulle pagine dove abbiamo integrato Slimbox.

Visualizzazione Notizie

Vediamo ora come può essere possibile automatizzare l'utilizzo di Slimbox all'interno delle viste.

PloneSlimbox crea una vista per un prodotto esterno, CoreBlog; in questo modo, se lo abbiamo già installato, nel nostro Plone vedremo che tutti gli elementi del blog incorporeranno la libreria Slimbox per la visualizzazione delle immagini.

Un elemento che possiamo facilmente personalizzare è la visualizzazione delle news del sito; per personalizzare questa vista dobbiamo seguire due semplici passi:

1. Creare un piccolo script che ci aiuti nella scrittura di una didascalia per le foto
2. Modificare la vista newsitem_view

1. Creazione dello script

Entriamo nella ZMI della nostra installazione di Plone, apriamo la cartella portal_skins/custom, e creiamo al suo interno uno Script (Python) dal nome newsitem_slimbox_title

Modifichiamo lo script appena creato inserendo nel campo di testo Parameter List i valori:

caption, image

e modifichiamo il testo dello script in questo modo

title = "<strong>%s</strong><br/>" % caption
url = image.absolute_url() # url dell'immagine

label = context.translate(domain='slimbox', msgid='full-size') # label del link all'immagine a schermo intero
desc = context.translate(domain='slimbox', msgid='Click to view full-size image...') # descrizione del link

title += '<a href="/it/labs/documentazione/tutorial/ploneslimbox/%s/image_view_fullscreen" title="%s">%s</a> ' % (url, desc, label)

return title

Quanto abbiamo scritto restituirà un tag html che utilizzeremo per la didascalia della nostra immagine.

2. Creazione della vista

Per creare la nuova vista, all'interno della ZMI di Plone, cerchiamo la posizione dell'elemento newsitem_view (si trova nella cartella portal_skins/plone_content/newsitem_view).

Apriamo il file e clicchiamo sul pulsante customize per crearne una copia (solitamente nella cartella custom).

Modifichiamo quindi la vista sostituendo, da riga 38, il seguente testo:

<a href="#" 
      tal:attributes="href string:$here_url/image/image_view_fullscreen"
      id="parent-fieldname-image">
   <img tal:replace="structure python: here.tag(scale='mini', css_class='newsImage')" src="/it/labs/documentazione/tutorial/ploneslimbox/tutorial" alt="" />
</a>

con:

<a href="#"
       tal:attributes="href string:$here_url/image_preview; 
                       title python:here.newsitem_slimbox_title(here.imageCaption,here.getImage());
                       rel string:lightbox"
       id="parent-fieldname-image">
   <img tal:replace="structure python: here.tag(scale='mini', css_class='newsImage')" src="/it/labs/documentazione/tutorial/ploneslimbox/tutorial" alt="" />
</a>

In questo modo abbiamo ricreato l'anteprima dell'immagine allegata alla notizia aggiungendo gli attributi necessari a Slimbox.

Utilizzando questo semplice metodo con ogni tipo di contenuto che contenga un'immagine allegata, riusciremo ad avere un perfetto zibaldone correttamente integrato con Slimbox.

Traduzione del prodotto

Attualmente PloneSlimbox è disponibile in lingua inglese e giapponese.

Dato il numero limitato di stringhe da tradurre consiglio di tradurre a mano il prodotto prima dell'installazione creando il file slimbox-it.po nella cartella i18n del prodotto. I più volenterosi possono seguire l'eccellente guida su questo portale (Internazionalizzare dei prodotti Plone) mentre i più pigri troveranno, in allegato a questo tutorial, una proposta di traduzione.