Document Actions
PloneSlimbox
Note: Return to tutorial view.
Primo approccio al prodotto
PloneSlimbox è un semplice prodotto per Plone che integra la libreria Slimbox per la visualizzazione delle immagini. PloneSlimbox si basa sulla libreria Javascript Slimbox e crea una vista alternativa per Thumbnails view, ovvero atct album view.
Slimbox
Slimbox è un clone del popolare Lightbox di Lokesh Dhakar, scritto utilizzando le librerie mootools. Slimbox è stato disegnato, come si legge dal sito web ufficiale, per essere snello, efficiente e compatibile al 100% con l'originale Lightbox.
Lightbox
Lightbox è un semplice script in Javascript usato per renderizzare le anteprime delle immagini in primo piano sulla pagina senza doverla ricaricare. Dal sito web ufficiale si legge che è semplice da installare e funziona con tutti i 'moderni' browser.
Stato del Progetto
Il progetto è attualmente allo stato beta ma offre già l'opportunità di essere utilizzato nel migliore dei modi all'interno di Plone.
Release utilizzata
Per questo tutorial è stata utilizzata la release 0.3.1 di PloneSlimbox pubblicata a settembre del 2007. I principali cambiamenti dell'ultima versione riguardano la correzione di alcuni bachi nell'html, il supporto a Plone3 e l'integrazione della versione 1.41 di Slimbox.
Autore
Licenza
MIT License
Home page del progetto
http://plone.org/products/plone-slimbox
Repository
Installazione
Per installare PloneSlimbox è sufficiente scaricare il prodotto dal sito ufficiale e copiare i file nella cartella Products della propria istanza Zope.
Una volta riavviato Zope, dal pannello di controllo di Plone bisogna aprire la pagina per l'aggiunta e la rimozione dei prodotti, scegliere PloneSlimbox e cliccare su 'installa'.
La disinstallazione può avvenire nello stesso modo.
Requisiti prodotto
Zope 2.8.x o successivi
Plone 3.0.x, Plone 2.5.x o Plone 2.1.x
"Python Imaging Library (PIL)":http://www.pythonware.com/products/pil/
Altri prodotti supportati
"COREBlog2":http://coreblog.org/ 0.9b o successivi
Piattaforma test
Per i test svolti in questo articolo è stata usata la seguente configurazione di sistema senza alcun tipo di modifica al software originale:
Linux Debian 4.0 Etch
Zope 2.10.4
Python 2.4.4
Plone 3.0.1
Oggetti creati nel sistema
All'installazione di PloneSlimbox viene creata, tra gli skin del Plone, una sottocartella chiamata plone_slimbox, in cui risiedono tutti i file necessari al suo funzionamento.
Vengono inoltre registrarti i seguenti script in portal_javascript:
mootools.v1.11.js
slimbox.js
e in portal_css:
slimbox.css
Tutorial
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:
- Creare un piccolo script che ci aiuti nella scrittura di una didascalia per le foto
- 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.
