Gestione delle immagini

Dai preliminari all’uso (ed aggiunta) delle immagini in Zen-Cart

Per un negozio online le immagini sono di primaria importanza: esse infatti rappresentano uno dei pochi elementi di contatto diretto con il Cliente. Un’immagine sciatta, poco rappresentativa del prodotto rischia di colpire negativamente il potenziale acquirente e di allontanarlo dal Sito.
Si ricorda che tutta l’attività di Studio e Pianificazione del Progetto effettuato a monte di qualsiasi altra attività è fondamentale: ideare e sviluppare su carta il negozio (ed in generale qualsiasi Sito) non è una perdita di tempo, anzi … l’esperienza ha dimostrato che maggiore è stato l’impegno in questa fase e minore è stato il tempo per la realizzazione con peraltro un risultato molto più gratificante, perciò in quest’ottica, non si raccomanderà mai abbastanza la cura delle immagini!
Per quanto di sua spettanza, Zen Cart si fa in quattro per aiutarvi a mettere in rete immagini quanto meno decenti. Ecco come.

Preliminari

Anzitutto, un po’ di teoria delle immagini.
Se si caricano immagini di tipo fotografico occorre usare il formato .jpg (o .jpeg); se invece si usano immagini di tipo grafico (tipo clip art) occorre usare i formati .gif o .png.

° non si può ottenere uno sfondo trasparente con il .jpg, lo si otterrà invece con il .gif o il .png
° non salvare una fotografia in formato .gif: non solo la qualità dell’immagine ne risentirà notevolmente ma per come i dati verranno salvati la dimensione del file sarà molto più grande del dovuto.
° la dimensione del file di un’immagine dipende interamente dalle sue dimensioni fisiche, dal tipo di formato usato per salvarla e dal grado di compattazione utilizzato.
° quando si compatta un’immagine usando uno dei formati suddetti si perdono necessariamente informazioni riguardanti l’immagine stessa. Perciò servirsi sempre di una copia, MAI DELL’ORIGINALE.

Ai fini di una buona fruibilità e navigabilità del Sito le dimensioni del file di immagine rimangono elemento importante anche nell’era della banda larga, e considerato che alcuni visitatori continuano a collegarsi in rete attraverso connessioni via modem a 56Kb, bisognerà sforzarsi di ottenere immagini di qualità con file di dimensioni ridotte al minimo indispensabile. Oltretutto risparmierete in termini di consumo di banda.

L’uso delle immagini in Zen Cart

Zen Cart visualizza le immagini in 3 formati: quello piccolo (thumbnails o “small”), usato in svariati listini; quello medio (“medium”), usato nella pagina di informazioni sul prodotto e quello grande (“large”), richiamato con il link “ingrandisci immagine” posto nella pagina di informazioni sul prodotto.

Volendo si possono utilizzare dimensioni diverse per i vari listini (categorie, vetrine, ecc.), ma se si vuole dare uniformità al Sito è preferibile usare un solo formato definendolo “small” (“piccolo”).
Per settare le dimensioni di “small” e “medium” (del formato “large” si parlerà più avanti) occorre andare in Admin > Configurazione > Gestione Immagini. Se si vuole che tutte le immagini abbiano la stessa larghezza mentre l’altezza (“height”) può variare, basterà settare la larghezza (“width”) sul valore (es.: 100) desiderato e “height” su 0 avendo cura di controllare che la funzione “Calcola Dimensione Immagine” sia attivata. Se si desidera invece che le immagini abbiano tutte la stessa altezza, basterà settare “Larghezza” su 0 e attribuire a “Altezza” il valore voluto.
A questo punto si possono caricare le immagini per mezzo dell’ FTP nelle cartelle di immagini già predisposte e lasciare che il sistema faccia il resto del lavoro.

Predisporre le cartelle giuste per le immagini giuste

Il risultato probabilmente sulle prime non soddisferà. Infatti poniamo che si siano caricate solo piccole (“small”) immagini con 100 pixel di larghezza e che le immagini “medie” (quelle che appariranno sulle pagine info prodotti) siano state settate a larghezza 400: la qualità delle immagini andrà perduta (per il meccanismo di compattazione) quando il codice le espanderà fino al quadruplo delle loro dimensioni.
Per evitare l’inconveniente occorrerà creare 3 serie di immagini: piccole, medie e grandi, compattate e salvate nelle dimensioni con le quali andranno poi visualizzate.

Ciascuna immagine andrà poi caricata nella rispettiva cartella: images per le piccole, images/medium per le medie e images/large per le grandi.

Ottimizzare le immagini per Zen Cart

Per prima cosa occorre stabilire le dimensioni delle immagini grandi che verranno visualizzate sul Sito.
N.B.: come accennato in precedenza in Zen Cart NON si possono settare le dimensioni delle immagini grandi.
Il sistema però le visualizzerà nelle dimensioni con le quali saranno state caricate.
Occorrerà quindi disporre di immagini grandi dalle dimensioni prestabilite, e regolare il file javascript di Zen Cart in modo che, cliccando su “ingrandisci immagine”, la finestra di pop-up si apra nelle dimensioni volute.

Il file da modificare si trova in /includes/modules/pages/product_info/jscript_main.php.

Trovare la funzione popupWindow(url) e modificare i valori di (larghezza) width= e (altezza) height= portandoli alle dimensioni volute.
Sarà meglio evitare di scegliere dimensioni superiori a quelle dell’originale (se l’immagine andasse espansa ne risentirebbe la sua qualità). Nella maggior parte dei casi per le immagini grandi una larghezza di 400 o 500 pixel sarà sufficiente. Se si lavora con una fotocamera digitale, si potrà scegliere una dimensione di immagine che sia direttamente proporzionale a quella fornita dalla fotocamera come ad esempio 480 o 640.

Esempio pratico.

Vogliamo inserire le prime immagini nel Sito immaginario il.mio.e-commerce.it
Si tratta delle immagini di una scodella, di un calice e di un coltello che andranno collocate rispettivamente nelle categorie (già predisposte) coperti, bicchieri e posate.
Di ciascun oggetto avremo preparato tre immagini, come detto, ciascuna serie con la stessa estensione (.gif/.png o .jpg) e dalle dimensioni predefinite.
Con l’FTP andiamo alla radice del Sito sul server web e creiamo la cartella coperti in html/images.
Avremo così html/images/coperti.
Ripeteremo poi l’operazione in html/images/medium(se quest’ultima cartella non esiste già la creeremo) avendo così html/images/medium/coperti e poi ancora in html/images/large.

L’operazione andrà quindi rinnovata per le voci bicchieri e posate.

A questo punto saremo pronti a caricare le immagini.
Per la scodella avremo, ad esempio,

scodella.gif
scodella_MED.gif
scodella_LRG.gif

a seconda delle dimensioni (rispettivamente piccola, media e grande).
Per il calice avremo

calice.png
calice_MED.png
calice_LRG.png

Per il coltello avremo

coltello.jpg
coltello_MED.jpg
coltello_LRG.jpg

Caricheremo allora scodella.gif nella cartella html/images/coperti avendo così html/images/coperti/scodella.gif.
Poi caricheremo scodella_MED.gif nella cartella html/images/medium/coperti avendo così html/images/medium/coperti/scodella_MED.gif.
Infine caricheremo scodella_LRG.gif nella cartella html/images/large/coperti avendo così html/images/large/coperti/scodella_LRG.gif.

Ripeteremo le stesse operazioni per calice e coltello.
Le immagini appariranno automaticamente in catalogo. Semplice !

Immagini aggiuntive

Poniamo che della scodella si voglia mostrare una seconda immagine nella pagina Info Prodotto e il suo ingrandimento.
Prepareremo la seconda immagine piccola della scodella, che chiameremo scodella_01.gif, e l’immagine grande, che chiameremo scodella_01_LRG.gif. Caricheremo l’immagine piccola in html/images/coperti e quella grande in html/images/large/coperti.
Le due immagini verranno rilevate automaticamente dal sistema.

ATTENZIONE !!!
alla sostanziale differenza di percorso tra i metodi utilizzati nel caricare via FTP le immagini:

images/nome-della-sotto-cartella/ … e
images/medium/nome-della-sotto-cartella/ …
images/large/nome-della-sotto-cartella/…