Code per Node e Code per Views Display

Ritratto di Vanni

In questa pagina descriverò 2 moduli che permettono l'inserimento di codice CSS e JavaScript in qualsiasi "content type" o "view" si voglia, senza dover andare a mettere mano al codice sorgente.

Ho già descritto un paio di moduli simili: CSS Injector (che però permette l'inserimento di solo CSS) e Add to Head (che però inserisce il codice in base all'Url della pagina). Qui però parlerò di Code per Node, semplice ed immediato, utile quando vogliamo inserire del codice per un determinato "tipo di contenuto" e Code per Views Display, estremamente utile quando vogliamo inserire del codice in una determinata view (vista), sia che sia un blocco o che sia una pagina. 

Descrizione del modulo: Code per Node

Questo modulo consiglia l'implementazione di "CodeMirror", un pratico text editor, ma per il mio esempio non l'ho utilizzato.

  • installare e abilitare il modulo
  • configurare i permessi per le varie tipologie di ruolo (dare il permesso solo a persone fidate)
  • andare nella pagina di configurazione
  • pagina di configurazione del modulo CPN
  • qui possiamo scegliere se aggregare o meno il codice (vedi anche come migliorare le performance del sito)
  • se caricare i file come esterni e che "peso" assegnargli
  • una volta configurato il modulo in base alle nostre esigenze, andare in admin/structure/types, scegliere il content type che ci interessa cliccando su "edit" (modifica) e a fondo pagina scegliere il tab "Code per Node setting"
  • inserimento del nuovo codice CSS e JavaScript in base al tipo di contenuto 
  • qui possiamo inserire il codice che verrà utilizzato ogni volta che si creerà una pagina con quel "content type"
  • ecco la pagina come era originariamente
  • pagina senza nuovo codice
  • ecco la pagina come appare dopo aver inserito il codice CSS
  • stessa pagina ma con il nuovo codice CSS
  • se andiamo a leggere il codice sorgente, troviamo che è stato importato un file .css
  • testo sorgente della pagina web con inserito il codice per importare il CSS

Descrizione del modulo: Code per Views Display

  • installare e abilitare il modulo
  • nella pagina di configurazione si può scegliere se caricare il codice: in linea o come file
  • pagina di configurazione del modulo CPV
  • ora andare a modificare la vista che ci serve in admin/structure/views, si può inserire codice sia in un blocco che in una pagina
  • espandere il menù "advanced" alla destra della pagina e sotto la sezione "Other" abilitare il CSS o il JavaScript o entrambi, a seconda delle esigenze
  • abilitazione dell'inserimento di nuovo codice in una view
  • nel momento in cui si clicca, si apre una finestra in cui inserire il codice necessario
  • inserimento di codice CSS in blocco di una vista
  • nel mio esempio ho assegnato alla classe ".view-content" un nuovo colore di sfondo, questa è la classe del blocco creato con views, tramite cui visualizzo i titoli delle ultime pagine pubblicate, direttamente nella homepage di questo sito
  • e questo è il risultato finale
  • blocco view visualizzato con nuovo colore di sfondo
  • andando a leggere il codice sorgente della pagina, troviamo questa nuova riga: <style>.view-content{background-color:lightblue;}</style>

 

Aggiungi un commento

Filtered HTML

  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Elementi HTML permessi: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Linee e paragrafi vanno a capo automaticamente.

Comment

  • Elementi HTML permessi: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Linee e paragrafi vanno a capo automaticamente.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente

Plain text

  • Nessun tag HTML consentito.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Linee e paragrafi vanno a capo automaticamente.
Per tutelare la vostra privacy suggerisco l'uso di un nickname o lasciare anonimo...
CAPTCHA
Questa domanda e' per testare se sei un visitatore persona e non un software che genera spam
1 + 0 =
Risolvi la semplice domanda di matematica e inserisci il risultato. Es. se e' 1 + 3 inserisci 4.