Drupal CCK + Views. Tipi di contenuto. Visualizzazione delle pagine tramite Views. Creazione di una galleria dei dipendenti.
Nella lezione precedente vi ho parlato di che cos’è un nodo (node) in Drupal. I nodi sono i nostri contenuti come le voci di blog, le pagine (Page) e le storie (Story). In questa lezione creeremo un nuovo tipo di contenuto (Content type) chiamato “Dipendente”. Questo tipo di contenuto verrà utilizzato per creare un elenco di dipendenti con la foto e una descrizione per ciascuno di essi.
Quindi, di quali moduli abbiamo bisogno:
Drupal CCK
1. CCK (Content Construction Kit) – questo modulo consente di creare nuovi tipi di contenuto e di aggiungere a essi vari campi per l’inserimento dei dati.
Il modulo CCK di Drupal è così ampio che è stato suddiviso in diversi sottomoduli; a noi serviranno i seguenti:
- Content – per creare nuovi tipi di contenuto.
- Content Permissions – per definire i permessi di visualizzazione e modifica dei tipi di contenuto.
- Number – consente di aggiungere al tipo di contenuto un campo numerico, utile ad esempio per un numero identificativo.
- Option Widgets – consente di aggiungere campi con selezione tramite checkbox, menu a tendina o pulsanti radio.
- Text – permette di aggiungere campi di testo per l’inserimento dei dati.
Gli altri sottomoduli di CCK svolgono le seguenti funzioni:
- Content copy – consente di creare copie dei tipi di contenuto esistenti, copiandone i campi di input.
- FieldGroup – raggruppa i campi di input (non necessario nel nostro caso, poiché i campi sono pochi).
- NodeReference – consente di aggiungere un campo che punta a un altro nodo. Ad esempio, se abbiamo creato un contenuto “dipendente” e quel dipendente ha una pagina personale (Page), possiamo creare un collegamento diretto a quella pagina.
- UserReference – consente di aggiungere un campo che punta a un utente registrato. Se i dipendenti fossero utenti del sito, potremmo creare un link tra il contenuto “dipendente” e il rispettivo account utente.
Salviamo la configurazione dei moduli. Dopo di ciò dovrebbe apparire nel menu di amministrazione un link a Tipi di contenuto nella sezione “Contenuto”.
Aggiungeremo il tipo di contenuto più tardi; per ora procediamo con l’installazione dei moduli successivi.
FileField e ImageField in Drupal
2. FileField e ImageField. Il modulo FileField aggiunge un campo di caricamento file da allegare a un nodo. ImageField funziona allo stesso modo, ma accetta solo file grafici (jpg, gif, png). Installiamo entrambi i moduli, che ci serviranno per caricare le foto dei dipendenti.
Salviamo la configurazione e procediamo con l’installazione dei moduli successivi.
ImageCache per Drupal
3. ImageCache e ImageAPI. ImageAPI fornisce un’API per la gestione delle immagini, alternativa a quella di sistema (image.inc
). ImageCache ci permetterà di creare preset (pre-elaborazioni) per le foto dei dipendenti, in modo che tutte le immagini vengano visualizzate con le stesse dimensioni, indipendentemente da quelle originali.
È anche possibile usare il modulo Lightbox2 per visualizzare le immagini a dimensione originale in sovrimpressione. È molto utile se i preset sono piccoli o se ci sono molti dipendenti. Dopo l’installazione, Lightbox2 aggiunge automaticamente un’opzione di preset con effetto lightbox.
4. Il modulo Views. Views è un generatore di query per il database, che consente di visualizzare elenchi di dati senza conoscere SQL. Installiamo anche questo modulo.
Salviamo la configurazione. I moduli necessari per creare l’elenco dei dipendenti con foto sono pronti; possiamo procedere alla realizzazione.
Creazione dell’elenco dei dipendenti in Drupal
Per iniziare, creiamo un tipo di contenuto “Dipendente”. Nel menu di amministrazione andiamo su: Contenuto → Tipi di contenuto → Aggiungi tipo di contenuto.
Prestate attenzione: il campo “Nome” verrà visualizzato nel menu di amministrazione e deve essere comprensibile (può essere scritto in russo o italiano), mentre il campo “Tipo” viene utilizzato da Drupal e deve essere scritto in lettere latine, senza spazi o simboli (si può usare l’underscore).
Ora tra i tipi di contenuto comparirà anche “Dipendente”. Aggiungiamo al nuovo tipo i campi per l’inserimento dei dati: clicchiamo su “Gestisci campi”.
Nel campo “Nuovo campo” compiliamo:
Titolo – può essere scritto in russo o italiano
Nome del campo (field name) – in lettere latine, senza spazi
Tipo di dati – scegliamo “file”, e tra i widget disponibili selezioniamo “image”.
Clicchiamo su “Salva” e poi salviamo anche le impostazioni del campo senza modifiche.
Ora il tipo di contenuto “Dipendente” ha un campo per caricare la foto del dipendente. Aggiungiamo anche due campi di testo: “Nome completo” e “Informazioni sul dipendente”. Per “Nome completo” scegliamo tipo dati “testo” e widget “text field”; aumentiamo la lunghezza del campo a 80 o 100 caratteri.
Per il campo “Informazioni sul dipendente” scegliamo ancora tipo “testo”, ma come widget selezioniamo “textarea (multiple rows)”. Nella sezione “Elaborazione del testo” scegliamo “Testo filtrato (l’utente sceglie il formato di input)”.
Parlerò dei formati di input in un articolo successivo.
Ora abbiamo i seguenti campi di input:
Il tipo di contenuto è pronto per creare il primo dipendente. Andiamo su: Contenuto → Crea contenuto → Dipendente.
Compiliamo i dati del dipendente come faremmo per un post del blog o una pagina, ma ora abbiamo i nuovi campi aggiunti: Foto del dipendente, Nome completo e Informazioni sul dipendente.
Probabilmente vi chiederete cosa inserire nei campi “Titolo” e “Contenuto”. In realtà “Nome completo” duplica il campo “Titolo” e “Informazioni sul dipendente” duplica “Contenuto”. Potete usare “Titolo” per scrivere nome e cognome e “Contenuto” per le informazioni aggiuntive. Ho aggiunto questi campi per mostrare come funziona CCK, ma il tipo “Dipendente” potrebbe essere ampliato con campi come posizione, orari di lavoro, ufficio, numero interno, ecc.
Salviamo il contenuto. Come detto, ogni dipendente è un nodo, quindi, ad esempio, l’indirizzo del dipendente “Vasya” è node/9. Il vostro URL sarà generato automaticamente (grazie al modulo Pathauto). Se cliccate su “Modifica”, noterete che l’indirizzo diventa node/[numero_nodo]/edit.
Ora sappiamo come aggiungere dipendenti al sito. Passiamo alla visualizzazione dei dipendenti in un formato più comodo. Iniziamo creando un preset: se avete già installato ImageCache e ImageAPI, potete procedere. Per creare un preset: Struttura → ImageCache → Add new preset.
Inseriamo un nome per il preset (consiglio di includere la larghezza e l’altezza in pixel, ad esempio “100x100”). Sono disponibili le seguenti azioni:
- Add Crop – ritaglia l’immagine in un rettangolo.
- Add Desaturate – converte l’immagine in scala di grigi.
- Add Resize – ridimensiona ignorando le proporzioni.
- Add Rotate – ruota l’immagine.
- Add Scale – ridimensiona mantenendo le proporzioni.
- Add Scale and Crop – ridimensiona mantenendo le proporzioni e poi ritaglia alle dimensioni specificate.
- Add Sharpen – migliora la nitidezza.
Scegliamo Add Scale and Crop e impostiamo le dimensioni a 100x100 pixel. Clicchiamo su “Salva” per creare il preset.
Ora passiamo al modulo Views, che creerà una query per visualizzare tutti i dipendenti con le immagini ridimensionate a 100x100 pixel. Installiamo Views e il suo sottomodulo Views UI, che fornisce l’interfaccia grafica.
Drupal Views
Dal menu di amministrazione apriamo: Struttura → Views. Di default ci sono alcune viste disattivate: Archivio, Commenti recenti, Homepage, Glossario, Termini di tassonomia, Ultime pubblicazioni.
Clicchiamo su “Aggiungi” e creiamo una vista per la galleria dei dipendenti. È consigliato nominare le viste con il prefisso “view_”.
Nel campo “View type” scegliamo il tipo di oggetto da visualizzare: poiché “Dipendente” è un nodo, selezioniamo “node”.
Dopo aver cliccato su “Next”, accediamo all’interfaccia di Views.
Le sezioni più importanti sono quattro: Arguments, Sort criteria, Filters e Fields.
- Arguments – filtra i risultati in base a un argomento (ad esempio l’ID del nodo nell’URL).
- Fields – seleziona i campi da visualizzare.
- Sort criteria – imposta l’ordine dei risultati.
- Filters – limita i risultati secondo determinati criteri.
Aggiungiamo ora i campi necessari:
Selezioniamo i campi: Contenuto: Nome completo, Contenuto: Informazioni sul dipendente, Contenuto: Foto del dipendente.
Nel campo “Informazioni sul dipendente” lasciamo tutto invariato. Nel campo “Nome completo” togliamo il titolo.
Nel campo “Foto del dipendente” togliamo il titolo e scegliamo il preset creato in precedenza.
I formati disponibili sono:
- 100x100 – immagine semplice;
- 100x100 – immagine con link al nodo del dipendente;
- 100x100 – immagine con link all’immagine originale.
Se avete installato il modulo Lightbox2, potete scegliere il preset con effetto lightbox.
Dopo aver applicato le modifiche, nella finestra di anteprima vedrete il risultato.
Ora impostiamo i filtri: aggiungiamo un filtro per mostrare solo i contenuti del tipo “Dipendente” e solo quelli pubblicati.
Selezioniamo solo i contenuti pubblicati e del tipo “Dipendente”.
Modifichiamo l’ordine dei campi per una migliore visualizzazione.
Clicchiamo sul pulsante accanto al titolo “Campi”: apparirà un elenco che possiamo riordinare trascinando i campi. Salviamo le modifiche.
Aggiungiamo altri dipendenti per testare la visualizzazione. Ora creiamo una “Pagina” per mostrare la vista: clicchiamo su “Add display” → “Pagina”.
Specifichiamo il percorso della pagina dove verrà mostrata la vista:
Salviamo le modifiche e la vista. Ora sarà disponibile all’indirizzo nome_sito/sotrudniki
.
Nella prossima lezione continueremo a lavorare con il modulo Views, aggiungendo l’output in un blocco e migliorando l’aspetto dell’elenco dei dipendenti.