Per quanti usano le Google App ed in particolare Google Drive, per le aziende che usano le Google Apps for Work o le Google Apps for Education (ora semplicemente chiamate G Suite e G Suite for Education), per i webmaster in generale e per gli insegnanti in particolare che si occupano del sito web della scuola, può tornare comodo questo breve tutorial su come inserire una galleria di foto e un elenco di file residenti in Google Drive in una pagina web.
Dal momento che i file non risiederanno direttamente sul nostro sito, questa pratica è molto opportuna per non sovraccaricare la pagina web rendendola lenta nel caricamento e per non consumare lo spazio acquistato dall’hosting provider, generalmente limitato, evitando eventuali costi aggiuntivi di abbonamento.
La procedura è piuttosto semplice e non richiede grande conoscenza dei linguaggi di programmazione. Eccola:
- creare una cartella in Google Drive e assegnarle un nome
- inserire i file o le immagini da mostrare dentro la cartella e concludere l’upload
- renderla pubblica cliccandoci sopra con il tasto destro del mouse, condividi>avanzate>Pubblico sul Web – Chiunque abbia accesso a Internet può trovare e visualizzare
- procurarsi l’ID della cartella aprendola, si tratta di una striscia di caratteri che si trova nella URL della barra di navigazione del browser dopo la scritta folders e lo slash (vedi sotto):
https://drive.google.com/drive/folders/ID
A questo punto non vi resta che copiare ed incollare nella vostra pagina web questa striscia di codice opportunamente modificata nella parte in grassetto e salvare:
<iframe style="width: 500px; height: 500px; border: 0;" src="https://drive.google.com/embeddedfolderview?id=IDFOLDER#grid" width="300" height="150"><br /></iframe>
Oppure, se usate G Suite o G Suite for Education, quest’altra striscia dove mettere anche il nome a dominio del sito su cui sono installate le G Suite:
<iframe style="width: 100%; height: 600px; border: 0;" src="https://drive.google.com/a/NOMEDOMINIO/embeddedfolderview?id=IDFOLDER#grid" width="300" height="150"><br /></iframe>
In questo modo, con l’attributo grid, otterrete una cornice iframe a griglia.
Se invece volete una visione a lista basta cambiare l’attributo grid con list.
Si può infine modificare la dimensione della cornice intervenendo sul numero di pixel in altezza e larghezza o sostituendo px con il simbolo della percentuale che ovviamente non deve superare il 100%.
Vedi sotto un esempio di codice di una lista di file con percentuale:
<iframe src="https://drive.google.com/embeddedfolderview?id=IDFOLDER#list" style="width:100%; height:600px; border:0;"></iframe>
Ecco un esempio di una serie di gallerie di immagini a griglia inserite nel mio blog didattico qui.
Cliccando su una di esse si aprirà in una nuova finestra del browser dove potrà essere zoomata e scaricata.
