3 marzo 2010  5

Come creare miniature da immagini usando solo codice HTML e CSS

css-code

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.

esempio trasformazione thumbnail

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.

Esprimi il tuo giudizio

Commenti (5) -

LoremIpsumDolor
LoremIpsumDolor
04 mar 2010 alle 00:38  01
nel caso qualcuno voglia testarlo in dreamweaver.
Grazie per l'ottimo tutorial ; )
Gildo
Gildo
04 mar 2010 alle 15:02  02
Grazie per la dritta, sono sempre interessato a conoscere nuove tecniche per i CSS.
Giorgio Borelli
Giorgio Borelli
06 mar 2010 alle 21:07  03
Propendo per la soluzione server side con l'implementazione di un httphandler, è più impegnativo, ma come dici tu stesso ha i suoi vantaggi, e poi una volta realizzato è riusabile nelle altre tue applicazioni web.

Se mi permetti (visto che è a tema), potrei mettere un link ad un mio articolo dove spiego proprio come realizzarne uno.

Ad ogni modo, complimenti, un bell'articolo.
Cristiano
Cristiano
07 mar 2010 alle 13:39  04
@ Giorgio Borelli:
Si, è sicuramente la soluzione più elegante e, naturalmente, riutilizzabile.
E' poco indicata nel caso in cui le immagini siano poche e di piccole dimensioni. Tieni presente che, essendo una soluzione server side, va sviluppata in congiunzione ad un adeguato meccanismo di caching dei thumbnail (l'immagine, una volta creata, va registrata per poter essere riutilizzata per caricamenti successivi).
Pur avendo già realizzato il webservice, al momento preferisco il ridimensionamento e ritaglio tramite CSS.

Se hai già scritto una guida in merito, puoi tranquillamente lasciare il link: ogni contributo è più che gradito Wink
Giorgio Borelli
Giorgio Borelli
07 mar 2010 alle 14:38  05
@ Cristiano:

Grazie,
l'articolo al link seguente:
www.informaticando.net/.../...agini-in-ASPNET.aspx
spiega come implementare un httphandler in ASP.NET per la gestione delle immagini con un ridimensionamento automatico delle stesse tramite un parametro "size" passato in querystring.

L'articolo parla soltanto della stesura della classe e della sua configurazione nel web.config, non tratta il concetto di caching di cui parla Cristiano, il quale costituirebbe un approfondimento molto interessante.

Aggiungi Commento

biucitecode
  • Commento
  • Anteprima
Loading


| |   |  

Codice QR

Codice QR - cristianofino.net

Ultimi Commenti