Il mio amico Luca mi ha chiesto come fare per incorporare nel suo blog (realizzato con WordPress) un’immagine elaborata con l’effetto Zoomify.

Zoomify in pratica ritaglia e ridimensiona un’immagine ad alta risoluzione in tanti pezzettini e li rimonta tramite un applet Flash secondo una struttura piramidale, per cui quando si zooma (o zumma?) su una parte dell’immagine totale, vengono caricati al volo i pezzettini a risoluzione più alta, permettendo di guardare i dettagli che interessano senza dover caricare tutta l’immagine intera.

Hmm… mi sa che non mi sono spiegato molto bene… più o meno è quello che fa google maps quando ci si “avvicina al suolo”: carica foto satellitari più dettagliate solo per la zona visualizzata.

Per generare questo tipo di immagini Luca usa un’applicazione gratuita (ma non libera!) disponibile per Finestre e Mele, ma non per Pinguini, scaricabile dal link sopra. L’applicazione genera un file “ZoomifyViewer.swf”, un html che lo contiene ed una cartella con le immagini ritagliate ed un file xml di istruzioni per ricomporle. Il tag html relativo al file flash sarà qualcosa di questo genere:

<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" WIDTH="600" HEIGHT="450" ID="theMovie">

    <PARAM NAME="FlashVars" VALUE="zoomifyImagePath=ZoomifyImageExample">

    <PARAM NAME="MENU" VALUE="FALSE">

    <PARAM NAME="SRC" VALUE="ZoomifyViewer.swf">

    <EMBED FlashVars="zoomifyImagePath=cantagrilli_pano" SRC="ZoomifyViewer.swf" MENU="false" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"  WIDTH="600" HEIGHT="450" NAME="theMovie"></EMBED>

</OBJECT>

Notare che nei i parametri passati al filmato c’è il percorso della cartella con le immagini, nel nostro caso cantagrilli_pano; il file ZoomifyViewer.swf è con buona probabilità sempre lo stesso, per riusarlo in futuro basterà cambiare il percorso della cartella nei parametri.

Lasciando da parte il file html, si carichi sul server del sito sia il file swf che la cartella con le immagini. Nel nostro caso si è optato per mettere entrambi sulla root del sito.

Per inserire il file swf in un post su WordPress torna utile il plugin SwfObj, che sfrutta la libreria SwfObject.
Il plugin è molto facile da usare, una volta installato appare un simbolo in più negli strumenti dell’editor e basta premerlo per aprire una finestrella simile a quella per inserire le immagini, con tutti i parametri del caso, che alla fine genera una stringa simile a questa:

[swfobj src="ZoomifyViewer.swf " width="720" height="450"]

Quello che non viene detto nel manuale del plugin, è che i parametri aggiunti manualmente alla stringa vengono comunque passati al .swf, quindi per inserire il percorso della cartella delle immagini la stringa andrà modificata così:

[swfobj src="ZoomifyViewer.swf " width="720" height="450" FlashVars="zoomifyImagePath=cantagrilli_pano"]

Ed è tutto!

Advertisements