creare una image gallery con uno script

Recentemente mi è stato richiesto di mettere su Internet le foto della vacanza in Giappone. Non volendo utilizzare siti come flikr o picasa, ho voluto creare una mia image gallery in uno spazio personale. Trattandosi di quasi 300 foto, ho dovuto automatizzare tutto tramite script. Qui, abbiamo visto come effettuare il resize delle immagini per ottenere le miniature, adesso vedremo come mettere queste miniauture in una pagina html, per creare la galleria di immagini. le immagini si chiamano g-imgxxxx.jpg, le miniature si chiamano tg-imgxxxx.jpg, dove xxxx rappresenta un numero.

Creiamo il codice html contenente una tabella che mostra le miniature ed il link all'immagine grande. Ci occuperemo solo della tabella, tralasciando tutti gli altri codici html, ad incominciare dall'header che dovrà essere aggiunto successivamente. per fare questo useremo uno shell script chiamato crea-table-immagini.sh Incominciamo con una infrastruttura del tipo:

All'interno inseriremo il codice che, un file alla volta, mette le immagini all'interno della tabella. incominciamo con:

Se volessimo mettere una immagine per riga, sarebbe molto semplice, basterebbe fare:

Però questo non è quello che vogliamo, ci interessa mettere più immagini per riga, in questo caso 6, quindi dobbiamo procedere diversamente. Incominciamo col mettere l'apertura della riga prima del ciclo while, e la chiususa subito dopo. Poi mettiamo un contatore tipo:

subito prima del ciclo. Subito dopo l'inizio del ciclo while mettiamo il test per controllare se CONTA ha superato il numero 6, in tal caso chiudiamo la riga, apriamo la successiva, e resettiamo il contatore

Infine, dopo la scrittura dell'immagine, prima della fine del ciclo, incrementiamo il contatore:

Il risultato finale sarà qunidi:

A questo punto rendiamolo eseguibile con

 

eseguiamolo e avremo il nostro codice con la nostra galleria di immagini. Non ci resta che aggiungere l'intestazione html, lo style sheet appropriato e la chiusura della pagima.

Tags: , , ,

About the Author

Post a Reply

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Top