Contenuti in blocchi e pagine con Views

Pubblicato da Nicola Rainiero il 04-11-2012 (aggiornato il 10-06-2015)

Mentre fantasticavo su come distribuire i contenuti in questo sito e come differenziarli per impaginazione e stile tra la prima pagina e le altre, mi complicavo inutilmente la testa pensando a come riuscirci in Drupal. Views ha risposto a tutti i miei problemi con estrema semplicità. Farò vedere come con poche operazioni sia possibile creare nuove viste di contenuti in blocchi e/o pagine.

Nel mio caso specifico volevo ottenere il seguente risultato per due diversi e distinti tipi di contenuto (articolo e articolo del blog):

  1. blocco in prima pagina con gli ultimi 6 articoli pubblicati (titolo e teaser di lunghezza 120)
  2. pagina interna con gli ultimi 10 articoli pubblicati (immagine con CSS personalizzato, titolo, teaser di lunghezza 400 e collegamento al contenuto)

Ma chiaramente ognuno è libero di aggiungere o togliere i campi come meglio crede, le possibilità offerte sono molteplici.

Configurazione di Views

Volendo esistono già due Views da attivare e pronte all'uso, ma se si necessita di partire da zero basterà andare su Add new view e poi selezionare Create a page e Create a block. In questo modo:

Pannello raggiungibile da http://mio_sito/admin/structure/views/add
 Impostazioni per una nuova vista pagina e blocco

Bene il più è fatto, bisognerà ora sistemare la propria configurazione adattandola alle proprie esigenze e poi inserire il blocco dove si ritiene più opportuno, basta andare a questo indirizzo: http://mio_sito/admin/structure/block e specificare la destinazione e le pagine dove farlo apparire o quelle da escludere.

Per lo stile CSS

Quando si desidera apportare delle modifiche specifiche ad alcuni campi, la soluzione più facile che ho trovato è stata quella di applicare delle classi CSS. Nel mio caso volevo posizionare il campo immagine che accompagna tutti gli articoli a sinistra nella pagina Articoli e a destra nella pagina del Blog. Per esempio per la vista pagina degli articoli ho proceduto così:

Si clicca sul campo che si vuole modificareSi selezione la voce STYLE SETTINGSSi inserisce il nome della classe CSS e si salva il tutto


 

Il nome scelto per la classe CSS dovrà poi essere definito nel foglio di stile del proprio tema predefinito (in Drupal si trova in genere ad un indirizzo simile a questo: http://mio_sito/sites/all/themes/mio_tema/css/style.css), ho aggiunto quindi questo codice:

.immagine_sx { 
  float: left; 
  padding: 15px 15px 20px 0px; 
}

Viceversa per la vista blog:

.immagine_dx { 
  float: right; 
  padding: 15px 0px 20px 15px; 
}

Volendo ogni campo può essere accompagnato da un classe css per una migliore impaginazione o stile, come sempre ognuno ha diverse esigenze e gusti, nel mio caso ho preferito restare sul minimale per non appesantire troppo la pagina.

Senza entrare nel dettaglio delle singole modifiche effettuate posto due immagini significative che riassumono tutte le operazioni fatte per la vista Articoli nel campo Page e Block e allego il file esportato con tutte le mie impostazioni qui: export_articoli_view.txt (lo si può caricare cliccando sul bottone importa e poi incollandoci il contenuto dentro il box Paste view code here, ma attenzione alle eventuali incompatibilità!)

Le mie personalizzazioni alla vista Articoli


Impostazioni per il Display: PageImpostazioni per il Display: Block



Potrebbero interessarti anche:

Nicola Rainiero

Ingegnere civile specializzato in geotecnica con l'ambizione di facilitare la propria attività lavorativa usando e creando software libero per un sapere condiviso e collettivo. Mi occupo anche di energie rinnovabili ed in particolare di geotermia a bassa entalpia. Sono da sempre appassionato di web design e modellazione 3D.