Non usare parentesi nei nomi delle immagini con VirtueMart

La notizia breve è che se usate le parentesi nei nomi delle immagini per VirtueMart, non le vedrete nella carrellata Lightbox presente di default nella scheda prodotto. Per cui non usatele.

Se volete altri dettagli, continuate a leggere.

Slimbox

Slimbox è il clone di Lightbox utilizzato per visualizzare le slide di immagini in VirtueMart.

Per chi non lo sapesse, Lightbox è una applicazione JavaScript per mostrare immagini in un cosiddetto modal box. E fin qui ho citato quasi pari pari Wikipedia. Usando una definizione molto più terra terra, si tratta di quell’effetto ormai diffusissimo per cui le immagini vengono caricate in una finestra solitamente posizionata al centro della pagina, mentre tutto il resto diventa scuro.

Rispetto all’originale, Slimbox risulta essere più leggero: da qui deriva infatti il nome.

Problemi di visualizzazione

Recentemente abbiamo avuto dei problemi, per cui alcune specifiche immagini risultavano mancanti nella carrellata Slimbox, pur essendo presenti nel file system. Dopo un po’ di ricerca e verifiche per ridurre i confini dell’anomalia, abbiamo scoperto che tutte le immagini in questione avevano delle parentesi all’interno del nome, ad esempio

/components/com_virtuemart/store_imgs/prodotto_uno_(ok).jpg

Indagando un po’ più a fondo, abbiamo capito il problema.

URL

In un nome di file, e come parametro di un tag HTML img, le parentesi sono perfettamente valide. Ma Slimbox (così come Lightbox, del resto) per realizzare il suo effetto crea dei link completi alle immagini, ad esempio

http://www.gibilogic.com/components/com_virtuemart/store_imgs/prodotto_uno_(ok).jpg

Solo che… le parentesi sono caratteri non validi in un URL, così come ad esempio gli spazi, i punti esclamativi e altri. Quindi se ci sono le parentesi l’URL non risulta valido e quindi non funziona. Non possiamo quindi neanche dire che sia un bug di Slimbox: non è colpa sua se l’URL che cerca di reperire non è valido.

Soluzione

La soluzione più semplice e consigliata è quella di non usare parentesi nei nomi dei file: questo non dovrebbe comunque essere difficile, e con degli script si possono anche rinominare facilmente le immagini esistenti.

Volendo essere più testardi, la soluzione corretta è quella di sostituire nell’URL i caratteri “(” e “)” con gli equivalenti codici http, ovvero “%28” and “%29”. Per far sì che se ne occupi automaticamente PHP, usare la funzione urlencode().

A occhio e croce, questa modifica in VirtueMart dovrebbe essere applicata al file theme.php che si occupa di costruire i tag di visualizzazione delle immagini nella scheda prodotto; ma non abbiamo ancora avuto modo di approfondire questa modifica. Se ci sono novità vi aggiorneremo senz’altro su questo blog.