logo

Extra Block Types (EBT) - Nuova esperienza con Layout Builder❗

Extra Block Types (EBT) - tipi di blocchi stilizzati e personalizzabili: Slideshows, Tabs, Cards, Accordion e molti altri. Impostazioni integrate per sfondo, DOM Box, plugin javascript. Vivi oggi il futuro della costruzione dei layout.

Demo moduli EBT Scarica moduli EBT

❗Extra Paragraph Types (EPT) - Nuova esperienza con Paragraphs

Extra Paragraph Types (EPT) - insieme di moduli basati su paragrafi in modo analogo.

Demo moduli EPT Scarica moduli EPT

Scorri

Drupal CCK + Views. Tipi di contenuto. Visualizzazione delle pagine tramite Views. Creazione di una galleria dei dipendenti.

15/10/2025, by Ivan

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.

Drupal CCK Views

Il modulo CCK di Drupal è così ampio che è stato suddiviso in diversi sottomoduli; a noi serviranno i seguenti:

  1. Content – per creare nuovi tipi di contenuto.
  2. Content Permissions – per definire i permessi di visualizzazione e modifica dei tipi di contenuto.
  3. Number – consente di aggiungere al tipo di contenuto un campo numerico, utile ad esempio per un numero identificativo.
  4. Option Widgets – consente di aggiungere campi con selezione tramite checkbox, menu a tendina o pulsanti radio.
  5. 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”.

drupal admin menu

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.

Drupal FileField

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.

Drupal ImageCache

È 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.

Drupal Views

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.

Drupal CCK

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).

Drupal views

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”.

Drupal aggiungere campi

Clicchiamo su “Salva” e poi salviamo anche le impostazioni del campo senza modifiche.

Drupal CCK

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.

Drupal fields

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)”.

Formati di input

Parlerò dei formati di input in un articolo successivo.

Ora abbiamo i seguenti campi di input:

Drupal cck

Il tipo di contenuto è pronto per creare il primo dipendente. Andiamo su: Contenuto → Crea contenuto → Dipendente.

Drupal galleria dipendenti

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.

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.

drupal cck

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.

drupal cck

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_”.

Drupal Views

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.

Drupal CCK

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:

Views campi

Selezioniamo i campi: Contenuto: Nome completo, Contenuto: Informazioni sul dipendente, Contenuto: Foto del dipendente.

Drupal aggiungere campi

Nel campo “Informazioni sul dipendente” lasciamo tutto invariato. Nel campo “Nome completo” togliamo il titolo.

Views titolo

Nel campo “Foto del dipendente” togliamo il titolo e scegliamo il preset creato in precedenza.

Drupal formato

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.

lightbox2

Dopo aver applicato le modifiche, nella finestra di anteprima vedrete il risultato.

drupal dipendente

Ora impostiamo i filtri: aggiungiamo un filtro per mostrare solo i contenuti del tipo “Dipendente” e solo quelli pubblicati.

Drupal filtri

Drupal CCK

Selezioniamo solo i contenuti pubblicati e del tipo “Dipendente”.

Modifichiamo l’ordine dei campi per una migliore visualizzazione.

Drupal cck imagecache

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”.

Views aggiungere display

Specifichiamo il percorso della pagina dove verrà mostrata la vista:

Drupal cck views

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.