Come avevo promesso, ecco la seconda parte dell’articolo relativo a Fivestar! (se hai perso la prima parte, eccola qui –> Fivestar per la votazione nei post)
Oggi vediamo come implementare fivestar in una nostra vista fatta con views! Mi riferirò a Drupal 6 non per mio gusto sfrenato del rimanere out-dated, ma semplicemente perchè l’aggiornamento dei moduli per Drupal 7 procede a rilento e tanti (tra cui Fivestar) fanno ancora acqua da tutte le parti…
Quali moduli installare?
Oltre a voting API e Fivestar che abbiamo instastallato in precendenza, dobbiamo installare:
- FileField (ci serve per poter inserire dei file all’interno di un campo)
- ImageField (con questo modulo permettiamo di inserire delle immagini nei campi creati con filefield)
- ImageCache ( permette la formattazione e la customizzazione dei file immagine che andiamo a caricare tramite filefield e imagefield)
- lightbox2 è un modulo aggiuntivo per creare dei pop up per visualizzare l’immagine a dimensione originale
- Views: modulo che useremo per fare la gallery
Installiamoli!
Come al solito, andiamo nella nostra cartella: ilnostrosito.it/sites/all/modules ed inseriamo i moduli appena scaricati.
Finito il trasferimento dei file, possiamo andare ad attivarli, andando nella pagina “moduli” (ilnostrosito.it/admin/build/modules) del nostro sito e installiamoli! Per poter installare un modulo, dovete “flaggare” il quadratino vicino al nome del modulo.
Incominciamo!
Per facilitarmi la spiegazione utilizziamo un esempio. Dobbiamo creare una galleria per il nostro portfolio, dove inseriremo i nostri siti. Come fare?
Incominciamo con imagecache!
Andiamo su imagecache al seguente link “ilnostrosito.it/admin/build/imagecache” e clicchiamo su “inserisci nuovo preset”
Il nome che daremo al preset è a vostro piacimento, io metterò “300×200”, e clicchiamo su crea nuovo preset!
Ci ritroveremo davanti una nuova schermata dove potremo definiremo diverse opzioni, tra cui le dimensioni delle immagini che inseriremo per il nostro portfolio.
Per settare la dimensione delle nostre immagini la procedura è molto semplice:
Clicchiamo su “add scale and crop” e inseriamo le dimensioni richieste: per esempio:
- width: 300px
- height : 200px
Clicchiamo su Add action!
Come potete vedere dall’anteprima qui sotto, ogni volta che useremo questo preset nei nostri content-type, le immagini presenti avranno questa dimensione. facile vero? 😀
Ma non è mica finita, creiamo il nostro content-type!
Andiamo su “ilnostrosito.it/admin/content/types/add”
Incominciamo a inserire i dati richiesti:
- Name: portfolio (ovviamente in questo campo inseriremo il titolo, la label per il nostro content-type)
- Type: portfolio (qui inseriremo il nome macchina del nostro ct, mi raccomando, niente spazi e niente maiuscole, è da questo campo che viene registrato il nostro content-type nel nostro database!)
- Description: Content type per inserimento portfolio (semplice descrizione, si può anche omettere)
Andando avanti con la creazione del nostro content-type, ci troveremo davanti 4 tendine:
- Submission form settings: in questa tendina possiamo decidere come chiamare le label del titolo e del body. Per esempio possiamo modificare la label da title a Nome del sito.
- Comment settings: qui si modificano le opzioni riguardanti i commenti, per esempio se chiuderli o tenerli aperti…
- Fivestar ratings: di questa tendina ne avevamo già parlato, vi ricordate?
- Workflow settings: in questa tendina possiamo definire tutte le opzioni riguardanti la pubblicazione dei nodi.
Una volta terminate le modifiche anche su queste tendine, possiamo cliccare su Save content type
Ma non abbiamo terminato!
Dopo aver salvato il content type, inseriamo, sempre nel nostro nuovo ct, un campo immagine, che chiameremo:
- Label: screenshot
- nome field: Field_portfolio_screenshot
E, compilati i campi, dalla prima tendina scegliamo “FILE” e dalla seconda tendina scegliamo “Image”.
Cliccando su Save ci troveremo davanti alla schermata della modifica del campo appena creato. Questi dati sono a vostro giudizio. Dopo aver modificato i campo, chicchiamo su Save field settings per terminare e salvare il nuovo campo.
Ora che abbiamo creato il nostro ct, possiamo creare i nostri nodi.
Non mi dilungo su questo aspetto, visto che da una parte è veramente facilissimo, dall’altra parte ne avevo già parlato in altri miei articoli. Dopo aver inserito i nostri nodi di prova, possiamo procedere alla creazione della gallery vera e propria con views!
Facciamo la gallery!
Prima di tutto andiamo su views, all’indirizzo: “ilnostrosito.it/admin/build/views” e creiamo una nuova vista cliccando su Add.
In questa schermata dobbiamo inserire i dati relativi alla vista che stiamo creando, come il nome la descrizione ecc ecc…
NB: Non modificare l’opzione chiamata View type: dobbiamo fare infatti una vista sui nodi!
Per prima cosa scegliamo dove fare la vista, io per semplicità sceglierò di fare una pagina, selezionando nella tendina “page” e cliccando su Add display.
Continuando con la vista, dobbiamo decidere quali campi visualizzare nella nostra vista.
A noi serve:
- Il titolo
- Lo screenshot dell sito, cioè il campo che abbiamo creato in precedenza
- e la votazione.
Ma come facciamo?
Facile, cliccando sulla crocetta situata a fianco di Fields ci comparirà una lista di tutti i campi presenti di default e creati da noi.
Selezioniamo tramite ceckbox i seguenti campi:
- Node: title
- Field_portfolio_screenshot
- Votes: Value
Una volta selezionati tutti e tre, possiamo cliccare su Add, e modificare le opzioni dei campi.
se per il campo titolo è semplice e possiamo omettere la spiegazione, è meglio soffermarci sui campi rimanenti.
Il campo Immagine
Quando siamo nelle opzioni del campo immagine, dobbiamo associare il preset creato in precedenza, il procedimento è molto semplice e immediato: scendiamo nella pagina fino ad arrivare all’opzione Format: di default mostrerà la nostra immagine solamente come link per il collegamento diretto, ma noi possiamo cliccare sulla tendina e scegliere il preset 300×220 Image, come vedete nell’anteprima ora si vede sia il titolo che l’immagine, ci siamo quasi!
Il campo Votazione
Come avete notato, la votazione non esce, infatti per questo campo la questione è più complicata, vediamo come implementare il modulo fivestars a views!
Per prima cosa, modifichiamo l’opzione Apparence come più ci aggrada, io per esempio ho scelto dalla tendina sottostante, la visualizzazione delle stelline, con la possibilità di votazione. Come secondo campo da modificare, noterete nell’immagine Relationships, assente nella vostra pagina. Cos’è? e come si abilita? presto detto.
Al contrario dei campo titolo e del campo immagine, per visualizzare la votazione per ogni nodo servono dei dati, fruibili sono se immesso un campo nell’area di relazione. Procediamo, clicchiamo su + situato difianco a Relationships, e selezioniamo Node: Votes una volta selezionato, non dobbiamo modificare nessuna opzione, possiamo salvare immediatamente.
Ma non funziona ancora, è vero?
Infatti dobbiamo associare la relazione al campo che a noi interessa, cioè quello riferito al voto.
Clicchiamoci sopra e selezioniamo dalla tendina relationships l’opzione Votes e salviamo.
E et voila! ecco la nostra gallery con la votazione annessa!
E’ stato un po più complicato del solito ma ne è valsa la pena, non credete?
Come sempre per qualsiasi problema o segnalazione, commentate pure!
