Oggi vi presento un tutorial molto interessante: come geo-localizzare le nostre foto con Drupal all’interno di google maps.
Dalla premessa sembra complicato, ma vi posso assicurare che non è per niente difficile! Ovviamente questo tutorial è pensato per coloro che hanno un minimo di confidenza con i moduli: cck e views, per chi fosse sprovvisto di queste conoscenze, anche minime, consiglio di leggere delle guide su come creare dei campi custom e incominciare a crearsi delle viste molto semplici.
Che cosa ci serve? I moduli per iniziare
- Gmap: http://drupal.org/project/gmap
- GmapLocation: http://drupal.org/project/gmaplocation
- Location: http://drupal.org/project/location
- Views: http://drupal.org/project/views
- CCk: http://drupal.org/project/cck
- Imagefield: http://drupal.org/project/imagefield
Una volta scaricati e inseriti nella nostra solita cartella (ilvostrosito.it/sites/all/modules) attiviamoli!
Se drupal vi chiedesse altri modul,i installateli, servono per il corretto funzionamento del modulo e del sito 😉
Incominciamo!
Incominciamo a creare con cck il nostro content type che useremo come “contenitore” delle immagini che geo-localizzeremo.
Per creare un nuovo content-type per il nostro “progetto” bosogna andare su:
ilvostrosito.it/admin/content/types/add
Una volta compilati i tre campi richiesti, salvate. Vi ritornerà sulla schermata con la lista dei content-type.
Noterete sicuramente vicino al nostro content type appena creato (che da ora chiameremo per semplicità e chiarezza Foto) “manage field”.
Cliccato su manage field vi troverete davanti una schermata simile:
Per creare un nuovo campo, in questo caso un campo immagine, dobbiamo completare i campi vuoti, per esempio:
Label: Campo foto
Field: field_campo_img (ricordatevi questa sintassi, infatti drupal accetta il nome del campo solo in questo modo)
Selezioniamo quindi dalla tendina ” – select a field type – ” il valore file dopodichè, spostandoci a destra nella tendina seguente scegliamo image. Le opzioni successive sono a vostra discrezione.
Abbiamo terminato il nostro content-type, ovviamente se vorrete inserire altri campi dovrete seguire lo stesso procedimento!
Dopo aver riempito il nostro nuovo content-type Foto, siamo pronti per configurare il modulo seguente, Gmap.
Configuriamo Gmap!
Per usufruire della mappa di google, dobbiamo richiedere una “chiave” al seguente link: http://code.google.com/apis/maps/signup.html
La generazione di una nuova chiave è molto semplice, in fondo alla pagina troverete un campo, My web site URL, e una volta inserito il vostro sito, cliccate su generate API key.
Con la chiave prelevata, riempiamo il primo campo presente nella configurazione del modulo Gmap.
Dopo averlo inserito, configurate a vostro piacimento le opzioni successive e salvate.
Il risultato dovrebbe essere il seguente, ora dovreste avere sotto la chiave una mini mappa customizzata con le opzioni scelte.
e anche per questo modulo abbiamo terminato! Ora possiamo incominciare a creare la nostra vista!
Creiamo La vista per geolocalizzare!
Per creare una nuova vista dobbiamo andare nella seguente pagina:
/admin/build/views/add
Dopo aver compilato tutti i campi richiesti e selezionato node possiamo andare avanti e cliccare su next.
Ci troviamo davanti l’interfaccia per creare la nostra vista, di seguito vi mostro come deve essere formata:
Partendo dal fatto che dalla tendina a sinistra si può scegliere ciò che volete (non intacca minimamente la vista che andremo a creare) in questo caso io ho optato per comodità Page. Detto questo incominciamo a descrivere la vista.
Una volta scelto dalla tendina page e cliccato su Add display possiamo incominciare a inserire il titolo della vista in: Title:, e cosa più importante, inseriamo immediatamente un path (un indirizzo) all’interno dell’area Page settigs.
Nota bene: se non si mette un indirizzo, non sarà mai possibile salvare e visualizzare la vista correttamente, quindi conviene farlo subito.
Dopo aver inserito il path, ritornamo nell’area Basic settigs e clicchiamo su Unformatted che troviamo di fianco a Style. Se avete installato correttamente i moduli, dovreste trovare tra la lista degli stili Gmap.
Vi si aprirà un’area, dopo aver effettuato delle ultieriori modifiche alle opzioni riguardanti la mappa, clicchiamo su update. Siamo pronti a inserire i nostri campi!
Andiamo nell’area Fields e clicchiamo sulla crocetta, scegliendo il campo chiamato Node: title in inglese o Nodo: titolo in italiano, uscirà una schermata per sistemare le opzioni del campo, modificateli a vostra scelta e cliccate su update.
Ripetiamo Lo stesso procedimento per il campo creato precedentemente con cck, scegliendo tra la lista proposta il campo “field_campo_img”.
Anche in questo caso si presenta una schermata dove è possibile modificare le opzioni del campo, modificateli a vostro piacimento e cliccate su Update!
Una volta terminata la fase di inserimento dei campi siamo quasi giunti a termine. Salviamo la vista con “Salva” e andiamo a controllare la nostra vista al path scelto in precedenza. Abbiamo finito! Se avete inserito correttamente i dati citati sopra dovrebbe uscirvi quna cartina del genere:
Attenzione: cliccando sul puntatore presente nella mappa, vi visualizzerà tramite pop up la foto scelta precedentemente, che se in grandi dimensioni sformerà la cartina.
Per ovviare il problema bisognerà installare il modulo imagecache.
Anche per questa guida è tutto.
Come sempre, per qualsiasi domanda, lasciate pure un messaggio!
