Caricare immagini in una pagina HTML

Forse a qualcuno può tornare utile questa utility che prende lo spunto da alcune idee de ildragoncello che ho potuto apprezzare in questo topic ed in quest'altro di un forum davvero molto interessante.

Ho già avuto modo di presentarvi un altro lavoro sulla falsariga di quanto sugggerito da ildragoncello. L'esempio di oggi lo potete vedere in questa pagina.

Probabilmente a molti capita di dover caricare in una pagina HTML un cospicuo numero di immagini in maniera tabellare come nell'esempio che ho mostrato sopra. A me è capitato recentemente.

Era un lavoro ingrato e lungo. Allora mi sono fermato un attimo ed ho pensato al buon VBA.

Il lavoro di preparazione

Ecco quel che c'è da fare.

Per comodità questo esempio prevede che le due pagine HTML siano nella stessa cartella delle immagini da caricare nella pagina finale.

Preparare una pagina come questa . Nel codice HTML della pagina, nel punto dove si vuole inserire la tabella con le immagini occorre mettere un segnaposto:
Il resto della pagina è stata scritta e formattata come deve essere la pagina finale.
Per comodità viene salvata col nome "file_origine.htm" nella cartella delle immagini da caricare
Nella stessa cartella si crea una pagina assolutamente vuota chiamandola "file_immagini_finale.htm"
Ora occorre aprire una cartella Excel
Scrivere nel foglio le coordinate:

	A	B
1	C:\Documenti\images\avatars	Questo è il percorso scelto
2	file_origine.htm	Questo è il file di origineprecedentemente preparato
3	file_immagini_finale.htm	Questo il file da creare
4	6	Queste sono le colonne della tabella da scrivere
6	<!---Inserisci tabella --->	Questo è il segnaposto usato per inserire la tabella

Il lavoro di preparazione è così completato

Il lavoro nel VBA

Il lavoro da fare nel VBA non è complesso.

Una volta inizializzate le variabili di servizio:

Cartella = Range("A1") & "\" ' la cartella dove si trovano i due pagine HTML e le immagini
FileOrigine = Cartella & Range("A2") ' il nome della pagina HTML di origine (file_origine.htm)
FileDestinazione = Cartella & Range("A3") ' il nome della pagina finale (file_immagini_finale.htm)
NumCol = Range("A4") ' il numero di colonne desiderato per la tabella (6)
StringaTabella = Range("A5") ' il segnaposto messo nella pagina ()
C = 1 ' il contatore delle colonne

Avremo questa situazione:

Cartella sarà: C:\Documenti\images\avatars\
FileOrigine sarà: C:\Documenti\images\avatars\file_origine.htm
FileDestinazione: C:\Documenti\images\avatars\file_immagini_finale.htm
StringaTabella:

Ora si aprono due canali, uno in lettura ed uno in scrittura, che puntano rispettivamente alla pagina "file_origine.htm" da leggere ed alla pagina "file_immagini_finale.htm" da scrivere.

Lu1 = FreeFile
Open FileOrigine For Input As Lu1
Lu2 = FreeFile
Open FileDestinazione For Output As Lu2

Aperti questi due canali non ci resta altro da fare che leggere tramite il canale indicato da Lu1 la pagina di origine "file_origine.htm" e scrivere tramite il canale indicato da Lu2 nella pagina di destinazione "file_immagini_finale.htm"

Do While Not EOF(Lu1)
Line Input #Lu1, DataLine
If DataLine = StringaTabella Then
' se la riga letta è uguale a StringaTabella si procede con la creazione della tabella
' ......................
Else
' altrimenti si scrive il dato appena letto nel file di destinazione
Print #Lu2, DataLine
End If
Loop

Ora descriviamo quel che avviene quando si incontra il segnaposto al posto del quale occorre inserire la tabella contenente le immagini, quindi tra la If e la Else.

Ci sono tre difficoltà da superare:

la creazione della stringa per la formattazione della tabella
la creazione della stringa per la creazione della prima cella della tabella che deve essere una cella unita adibita a contenere il tipolo della tabella
la creazione della stringa di collegamento alle immagini

Per la creazione della prima stringa:

Sicuramente vogliamo che la tabella sia formattata secondo uno classe creata in un CSS, per cui dobbiamo richiamare la classe nella riga di comando della crfeazione della tabella.

Diciamo che la classe da richiamare sia denominata "tabellaimmagini" per cui la riga di comando debba essere:

apici compresi. In VBA dobbiamo fare in modo che questi apici siano compresi nella stringa da creare. Uno dei metodi è questo:

"<table class=""tabellaimmagini"">"

Per la creazione della seconda stringa:

Per raggruppare delle colonne si usa:

Con questa sintassi, in HTML, è possibile raggruppare le celle all'interno delle colonne in cui il numero 6 indica in una tabella che dovrebbe avere 6 colonne la cella formattata in questa maniera debba coprire le 6 colonne sottostanti.

Anche in questo caso gli apici debbono essere compresi nella stringa da preparare per cui la stringa da preparare in VBA deve essere e, per l'inclusione di una variabile occorre incrementare il numero di doppi apici da includere nella sintassi:

"<th colspan=""" & NumCol & """>"

Per la creazione della terza stringa:

Per inserire una immagine in una pagina HTML normalmente è questa la sintassi da usare:

In VBA il nome dell'immagine (10.jpg) è rappresentato da una variabile. Allora la stringa da costruire è la seguente:

"<img src=""" & File & """ alt=""immagine"" width=""60"" height=""60"" />"

In questo caso vengono concatenati sia variabili (File) che costanti (immagine, width, ecc) oltre che i doppi apici da includere nella stringa finale. Per questo è possibile vedere che le sequenze di doppi apici a volte ne comprende tre a volte due.

Superate queste difficoltà possiamo entrare nel merito della programmazione per ottenere l'inserimento ordinato delle immagini nel foglio HTML

Per fare questo dobbiamo leggere il contenuto del disco e questo lo facciamo con l'aiuto della funzione Dir in questo modo:

File = Dir(Cartella)
Do While File <> ""
' .............
' questo è il costrutto fondamentale per leggere tutto il contenuto di una cartella
File = Dir
Loop

In mezzo a questo costrutto dobbiamo inserire istruzioni per inserire le immagini nella pagina HTML e, soprattutto per scegliere, tra tutti i files che si possono incontrare in questa cartella, di scegliere solo i files .jpg e .gif (che sono quelle che ci interessano), ma di questo ne parliamo in fondo alla pagina perchè c'è da creare una funzione.

Subito doppo la If si comincia a scrivere le istruzioni per creare la Tabella

Print #Lu2, "<table class=""tabellaimmagini"">" ' abbiamo visto qui sopra la costruzione di questa stringa
Print #Lu2, "<rr>"
Print #Lu2, "<th colspan=""" & NumCol & """>"; ' e di quest'altra stringa
Print #Lu2, "images/avatars/noavatar.gif</th>"
Print #Lu2, "</tr>"
Print #Lu2, "<tr>"

Notare il ; (punto e virgola) posto alla fine della Print della terza riga. Questa fa sì che la prossima Print scriva sulla stessa riga.

Non mi dilungo a spiegare i significati dei vari TAG qui usati per la costruzione della tabella.

Da questo momento si inizia a leggere il contenuto della cartella del disco che abbiamo scelto di caricare nella tabella

File = Dir(Cartella)
Do While File <> ""
Estensione = GetExtension(File)
If LCase(Estensione) = LCase("jpg") Or LCase(Estensione) = LCase("gif") Then
Print #Lu2, "<td>";
' per la costruzione di questa stringa abbiamo visto sopra la tecnica usata
Print #Lu2, "<img src=""" & File & """ alt=""immagine"" width=""60"" height=""60"" />";
Print #Lu2, "<br />" & File & "</td>"
C = C + 1
If C > NumCol Then
Print #Lu2, "</tr><tr>"
C = 1
End If
End If
File = Dir
Loop

Per questo segmento di codice i commenti sono superflui. Una nota merita la terza riga di questo segmento di codice in quanto richiama una funzione che mostrerò più sotto.

Si conclude con la chiura della tabella e con l'aggiunta di eventuali celle mancanti:

If C < NumCol Then
For C1 = C To NumCol
Print #Lu2, "<td> </td>"
Next
End If
Print #Lu2, "</tr></table>"

Alla fine dei lavori viene mostrata la pagina HTML aprendola con

Ret = Shell("rundll32.exe url.dll,FileProtocolHandler " & FileDestinazione)

che provvede l'apertura di un file con l'applicazione associata all'estensione

Questo il codice VBA completo

a questo punto non resta che mostrare il codice completo:

Sub ScriviTabellaConImmagini()
Dim Cartella, FileOrigine, FileDestinazione, NumCol, StringaTabella
Dim C, C1, Lu1, Lu2, DataLine, Estensione, Ret
Dim File As String
' qui le inizializzazioni delle variabili di servizio
Cartella = Range("A1") & "\"
FileOrigine = Cartella & Range("A2")
FileDestinazione = Cartella & Range("A3")
NumCol = Range("A4")
StringaTabella = Range("A5")
C = 1
' si inizia ora con l'apertura dei canali di comunicazione tra le due pagine HTML
Close
Lu1 = FreeFile
Open FileOrigine For Input As Lu1
Lu2 = FreeFile
Open FileDestinazione For Output As Lu2
' ora inizia il ciclo che leggerà, riga per riga il contenuto della pagina di origine
Do While Not EOF(Lu1)
Line Input #Lu1, DataLine
If DataLine = StringaTabella Then
' blocco che viene eseguito quando si incontra il segnaposto peer la tabella
Print #Lu2, "<table class=""tabellaimmagini"">"
Print #Lu2, "<rr>"
Print #Lu2, "<th colspan=""" & NumCol & """>";
Print #Lu2, "images/avatars/noavatar.gif</th>"
Print #Lu2, "</tr>"
Print #Lu2, "<tr>"
File = Dir(Cartella) ' si inizia con la lettura del primo file
Do While File <> ""
Estensione = GetExtension(File) ' viene richiamata la funzione che restituisce l'estensione del file
If LCase(Estensione) = LCase("jpg") Or LCase(Estensione) = LCase("gif") Then
Print #Lu2, "<td>";
Print #Lu2, "<img src=""" & File & """ alt=""immagine"" width=""60"" height=""60"" />";
Print #Lu2, "<br />" & File & "</td>"
C = C + 1
' se si raggiunge il numero di colonne imposto si chiude la riga,
' si apre quella successiva e si ricomincia dalla prima colonna
If C > NumCol Then
Print #Lu2, "</tr><tr>"
C = 1
End If
End If
File = Dir ' si continua con la lettura degli altri files
Loop
' siamo pronti a chiudere la tabella HTML, ma se la riga che stavamo scrivendo non è
' completa si aggiungono delle celle vuote con dentro un solo carattere spazio ( )
If C < NumCol Then
For C1 = C To NumCol
Print #Lu2, "<td> </td>"
Next
End If
Print #Lu2, "</tr></table>"
Else
Print #Lu2, DataLine
End If
Loop
Close (Lu1)
Close (Lu2)
FreeFile (Lu1)
FreeFile (Lu2)
' questa istruzione
Ret = Shell("rundll32.exe url.dll,FileProtocolHandler " & FileDestinazione, vbMaximizedFocus)
End Sub

Private Function GetExtension(sFileName As String) As String
Dim i As Integer
i = InStrRev(sFileName, ".", , vbTextCompare)
If i Then
GetExtension = Right$(sFileName, Len(sFileName) - i)
Else
GetExtension = ""
End If
End Function

Una nota finale:

Questo codice può essere migliorabile, nel senso che si può potenziare il codice VBA, aggiungendo in automatico anche dei link ad altre pagine, o altro ancora. Ma per fare questo ancora occorre studiare qualche tecnica aggiuntiva.

Per ora ci fermiamo qui.

Vi allego un file .zip che contiene il file Excel ed una pagina HTML. Questa pagina va posta nella cartella che contiene le immagini da caricare e questa cartella va scritta nella cella A1 del file .xls nel formato: C.\mie_immagini

Buon lavoro