Immagini cliccabili nei post (quirks mode), solo per le skin quirks mode

Attenzione

Questa guida è da utilizzare per i forum in Quirks Mode (Vecchio Template)

***

Introduzione

Uno dei problemi che può presentarsi utilizzando una skin del template quirks è lo spaginamento dei messaggi causato dall'inserimento di immagini di grandi dimensioni, coi browser attuali è possibile ovviare al problema inserendo, in colori e stili, una semplice riga di codice, .color img {max-width: XXpx} ,al posto di XX va inserito il valore numerico desiderato, con questo codice non si ottiene un vero e proprio ridimensionamento automatico (come avviene usando una skin del template standard) ma è possibile stabilire una larghezza massima per le immagini nei messaggi, quelle con una larghezza superiore al valore stabilito verranno visualizzate con quella larghezza (e l'altezza ridotta in proporzione).

Questo ridimensionamento causa però un altro problema, le immagini di grandi dimensioni non possono essere visualizzate nelle loro dimensioni reali, a meno che l'autore del messaggio non abbia avuto l'accortezza di postare anche il link cliccabile dell'immagine, chi volesse visualizzarla in dimensioni reali dovrebbe copiare manualmente, usando il tasto destro del mouse, il link dell'immagine per poi incollarlo in un'altra scheda del suo browser, in modo da aprire l'immagine in quella scheda.

Con lo script pubblicato ( va utilizzato in sostituzione del codice inseribile in colori e stili ) in 2 versioni in questa guida potete ovviare a questo piccolo inconveniente, la prima versione vi consentità di inserire automaticamente, utilizzando il tasto IMG del modulo di risposta, le immagini ridimensionate come immagini con link, basterà quindi cliccare sull'immagine postata per far aprire, in una nuova scheda, l'immagine nelle sue dimensioni reali, utilizzando la seconda versione dello script l'immagine ridimensionata non sarà cliccabile, ma verrà inserito, sopra di essa, il link all'immagine non ridimensionata):

Con entrambe le versioni rimane comunque possibile utilizzare il normale tag BBCode IMG e quindi inserire immagini senza link, cliccando sul tasto IMG vi apparirà una finestra di scelta a 2 pulsanti, con la domanda

Desideri inserire una immagine ridimensionata con link?

cliccando sul pulsante Sì l'immagine verrà inserita col codice per ridimensionarla e creare il link all'immagine non ridimensionata, scegliendo invece il pulsante No l'immagine verrà inserita normalmente, senza ridimensionamenti o codici aggiunti.




Inserite questo script

in Amministrazione > Grafica > Codice HTML > Codice HTML che sarà mostrato in FONDO a tutte le pagine, per funzionare lo script richiede una personalizzazione, in questa riga

var DIM="200" //larghezza massima delle immagini in pixel

il valore della variabile DIM ( 200, nell'esempio) sarà la larghezza massima (in pixel) con cui verranno visualizzate le immagini nei messaggi, sostituite il valore di esempio con quello più adatto alle vostre esigenze

Per la comodità degli amministratori che volessero aggiungere, via CSS, delle personalizzazioni alle immagini ridimensionate (bordi, angoli arrotondati, eccetra) all'immagine viene aggiunta una apposita classe utilizzabile in colori e stili, .color_img, per comodità dell'utenza è invece possibile aggiungere all'immagine un testo visualizzabile al passaggio del puntatore, cosa che può essere utile per evidenziare il fatto che si tratta di una immagine cliccabile, usando il tag title, la parte da modificare è questa

in questo modo (il testo del title è di esempio, potete sostituirlo con un vostro testo)





Con la seconda versione dello script sì ottiene sempre il ridimensionamento delle immagini, che però non sono direttamente cliccabili, viene invece inserito, posizionato sopra all'immagine, il link diretto che consente di visualizzarla nelle sue dimensioni reali, lo script, sempre da posizionare nel box Codice HTML che sarà mostrato in FONDO a tutte le pagine, è questo

la parte che gestisce il ridimensionamento è identica a quella della prima versione, in questa riga

var DIM="200" //larghezza massima delle immagini in pixel

il valore della variabile DIM ( 200, nell'esempio) sarà la larghezza massima (in pixel) con cui verranno visualizzate le immagini nei messaggi, sostituite il valore di esempio con quello più adatto alle vostre esigenze e anche in questa versione alle immagini ridimensionate viene aggiunta la classe .color_img utilizzabile in colori e stili per eventuali personalizzazioni delle immagini.

Con questo script per visualizzare l'immagine non ridimensionata basterà cliccare sul link testuale inserito sopra di essa e allineato al bordo sinistro dell'immagine, di default viene inserito con lo stesso colore e tipo di font previsto, dalla skin del forum, per i link nei messaggi, e con una dimensione pari a quella ottenibile col BBCode Size=1, per modificare le dimensioni dovete agire su questo stile in linea, style="font-size: 8pt; line-height: 100%;", aumentando il valore di font-size, potete anche eliminare lo stile in linea sostituendolo con una apposita classe da aggiungere in colori e stili, questo vi consentirà una completa personalizzazione, via CSS, del link.

Potete anche modificare l'allineamento del link rispetto all'immagine, la parte da modificare è questa

aggiungendo allo stile l'attributo text-align, come in questo esempio

in questo modo sarà centrato rispetto all'immagine, per avere il link allineato a destra sostituite center con right, l'ultima parte personalizzabile è il testo del link

sostituite Vai all\'immagine con un testo di vostra scelta (eventuali apostrofi o apici vanno preceduti da un backslash, come nell'esempio), opzionalmente potete anche spostare il link sotto all'immagine, in questo modo

soluzione però che lo renderebbe meno visibile.

Nota Finale

Con entrambe le versioni dello script il ridimensionamento delle immagini è gestito direttamente via javascript, senza necessità di codici aggiuntivi, si stabilisce una larghezza massima, tramite la variabile DIM

e lo script attribuisce il valore scelto ad uno stile lin linea che è aggiunto al codice dell'immagine

precisamente in questa parte

questo metodo, funzionale anche se tecnicamente poco elegante, rende il ridimensionamento delle immagini indipendente dalla presenza dello script, una volta che l'immagine è inserita rimarrà ridimensionata anche in caso di rimozione dello script dal forum, vi è comunque la possibilità di uno svantaggio, perchè nel caso decidiate di modificare il valore della larghezza massima le immagini già inserite prima della modifica non saranno adattate automaticamente alla nuova dimensione (nel caso si decida di modificarne le dimensioni andranno modificate manualmente, una ad una, editando i messaggi che le contengono e modificando per ogni immagine il valore di max-width dello stile in linea).

Per ovviare a questo possibile piccolo inconveniente, si può cambiare metodo di ridimensionamento, sfruttando la classe che lo script assegna ad ogni immagine, inserendo la dimensione desiderata via CSS in Colori e stili o in Codice HTML > Codice HTML che sarà mostrato in CIMA a tutte le pagine, nel primo caso inserirete in Colori e stili questa riga di codice (al posto di XXX inserite il valore di larghezza massima desiderato)

nel secondo caso inserite in CIMA a tutte le pagine questa piccola dichiarazione di stile

dal codice dello script andrà invece rimosso lo stile in linea

non più necessario (potrete anche rimuovere la variabile DIM, a quel punto diventata superflua, ma non è indispensabile), in questo modo il ridimensionamento delle immagini non dipenderà più dallo script ma dalla classe .color_img e potrete modificare le dimensioni per tutte le immagini (anche quelle già inserite) modificando il max-width di quella classe.