La mia recente attività di restyling del layout di questo blog, aveva evidenziato la necessità di organizzare l’elenco degli ultimi articoli pubblicati in home page, secondo una struttura più compatta.
Per non appesantire eccessivamente la lista, che comprende anche una breve sintesi del contenuto di ogni articolo, era necessario allegare anche una piccola immagine, opportunamente dimensionata in relazione ai nuovi ingombri disponibili.
Le immagini, fortunatamente, sono (quasi) sempre disponibili nel materiale già pubblicato, dato che il vecchio progetto grafico prevedeva comunque l’adozione di un’immagine accanto alla sintesi di ciascun titolo.
Assodata quindi la “disponibilità” delle risorse richieste, l’unica esigenza era quella di creare in maniera opportuna delle “miniature” (thumbnail) delle immagini necessarie, tutte di dimensioni identiche e possibilmente adeguatamente proporzionate.
L’obiettivo può essere raggiunto seguendo due strade. Una, server side, che prevede la scrittura di un http handler (o addirittura un web service) che, assegnata un’immagine, ne produca automaticamente una miniatura adeguatamente proporzionata e possa gestire, di concerto, un meccanismo di caching per evitare di generare più volte lo stesso oggetto a partire dalla medesima risorsa.
La seconda, client side, è di più semplice implementazione perché basata sull’uso combinato di HTML e CSS.
In realtà, questa soluzione, si limita semplicemente a far effettuare il ridimensionamento ed opportuno riposizionamento delle immagini, direttamente al browser. Ciò significa che le immagini vengono comunque caricate nel loro formato originario, con tutte le conseguenze del caso per ciò che concerne i tempi complessivi di apertura della pagina.
Per le mie esigenze, però, questa seconda soluzione è comunque accettabile, dato che le immagini originali sono già di piccole dimensioni e ne deve essere caricato un numero esiguo. E inutile dire che, per casistiche più complesse, la prima soluzione resta quella preferibile.
La struttura del codice
Nel caso specifico, il mio progetto grafico stabiliva questi requisiti:
- miniature di forma quadrata
- un bordo colorato
- un margine tra il bordo e la miniatura stessa
- ridimensionamento proporzionale all’altezza
- nel caso in cui la larghezza, anche dopo il ridimensionamento, risulti superiore all’altezza (la miniatura non è quindi di forma quadrata), la parte restante dell’immagine a destra deve essere nascosta per mantenere la geometria desiderata
- nel caso in cui la larghezza, anche dopo il ridimensionamento, risulti inferiore all’altezza (la miniatura non è quindi di forma quadrata), l’immagine deve essere centrata orizzontalmente per mantenere la geometria desiderata
- la dimensione complessiva di ciascun thumbnail, comprensiva di bordo e marginature interne, deve essere di 64 x 64 pixel.
La sezione di codice HTML è molto semplice: ogni elemento di tipo img (immagine) deve essere incapsulato in due div (contenitori):
<div class="spot-image">
<div class="box-image">
<img src="image.jpg" />
</div>
</div>
Di concerto, il foglio di stile CSS associato, deve contenere le seguenti classi:
.spot-image {
float: left;
width: 64px;
height: 64px;
text-align: center;
border: solid 3px #CCCCCC;
overflow: hidden;
}
.box-image {
margin: 2px;
width: 60px;
height: 60px;
overflow: hidden;
}
.box-image img {
margin: 0px;
padding: 0px;
height: 60px;
}
Naturalmente il colore del bordo, come la sua dimensione, può essere impostato a piacere variando la proprietà border della classe .spot-image. Allo stesso modo è possibile impostare un colore di fondo che si evidenzierà nello spazio tra il bordo e l’immagine, aggiungendo ed impostando la proprietà background alla medesima classe.
E’ necessario assegnare in entrambe le classi .spot-image e .box-image la proprietà overfllow ad hidden. Solo in tal modo si otterrà l’effetto desiderato di “elisione” dell’immagine a destra, nel caso in cui l’immagine ridimensionata sia di forma rettangolare con la base superiore all’altezza.
La proprietà height della classe .box-image img definisce in pixel il fattore di ridimensionamento. Variando opportunamente le dimensioni in punti impostate nelle tre classi, è possibile ottenere delle miniature della grandezza e forma desiderata (volendo anche di tipo rettangolare).
Come già detto la soluzione proposta è valida solo se le immagini originali sono già di piccole dimensioni ed in numero esiguo, altrimenti non risulta efficiente.
La tecnica proposta è naturalmente cross-browser e retro-compatibile anche con Internet Explorer 6.
