L'esercitazione definitiva per il modulo paragrafi di Drupal

Negli ultimi mesi abbiamo lavorato con sempre più siti Drupal 8. Quei progetti avevano tutti una cosa in comune... usavano il modulo Drupal Paragraphs.

Paragraphs è un modulo molto popolare per la gestione dei contenuti in Drupal 8.

I paragrafi funzionano in modo simile ai campi dei contenuti, ma offrono anche un'ampia gamma di opzioni per la progettazione, il layout e il raggruppamento dei contenuti.

Se vuoi imparare i paragrafi, questa è la guida definitiva! Leggi, guarda e segui tutte le 10 parti di questo tutorial. Alla fine, utilizzerai i paragrafi anche per tutti i tuoi siti!

Parte 1. Perché usare il modulo Paragrafi Drupal?

I tipi di paragrafo possono essere qualsiasi cosa, da un semplice blocco di testo o immagine a una presentazione complessa e configurabile.

Invece di inserire tutto il loro contenuto in un campo del corpo WYSIWYG, gli utenti finali possono scegliere al volo tra i tipi di paragrafo predefiniti. Puoi creare più funzionalità avanzate e gli utenti finali possono scegliere quale desiderano utilizzare.

Questo rende molto più facile per gli utenti aggiungere contenuti avanzati. Ad esempio, gli utenti potrebbero capire come aggiungere una citazione pull nel corpo di un contenuto, ma potrebbe non essere centrata o formattata in modo corretto. Potrebbero anche voler fare qualcosa di più complesso, come includere una casella di richiamo all'interno di un articolo, ma non hanno idea di come aggiungere gli stili richiesti.

Il modulo Drupal Paragraphs può rendere processi come questi molto più gestibili per utenti non tecnici, dando anche agli sviluppatori la possibilità di controllare la formattazione e l'aspetto di tali elementi appositamente formattati a livello di tema.

In pratica, i paragrafi ci consentono di inserire elementi molto simili ai campi di contenuto, ma invece di aggiungerli attorno al corpo di un dato contenuto, vengono effettivamente inseriti in tutto il corpo.

Per questa guida, immaginiamo di creare un sito Web chiamato "Life Advice for Free", che offre contenuti informativi sotto forma di articoli. Se lo desideri, puoi seguire qualsiasi altro sito Web di sviluppo, apportando piccole modifiche se necessario.

Parte 2. Installazione del modulo paragrafi Drupal

Si consiglia di utilizzare un sito di test Drupal 8 vuoto per questo progetto.

• Clicca qui per scaricare il modulo Paragaphs.
• I paragrafi richiedono anche il modulo Revisioni di riferimento entità.
• Dopo aver scaricato questi due moduli e averli inseriti nella directory /modules, installarli per il tuo sito.

Parte #3. Creare i tuoi primi paragrafi

I paragrafi funzionano consentendoci di creare quelli che vengono chiamati "Tipi di paragrafi" che nel nostro caso sostituiranno collettivamente il campo Corpo di qualsiasi tipo di contenuto con cui desideriamo utilizzare questi tipi di paragrafi.

Per iniziare a sfruttare i paragrafi, devi prima creare almeno un tipo di paragrafo, quindi devi aggiungere quel tipo di paragrafo a un tipo di contenuto. Questo processo può sembrare confuso all'inizio, ma è facile familiarizzare con uno o due tipi di paragrafi impostati.

Nella nostra dimostrazione, sostituiremo il campo Corpo del tipo di contenuto articolo predefinito con una manciata di tipi di paragrafi.

Importante: se lo stai testando su un sito che ha già contenuto di tipo Articolo, non eliminare il campo Corpo del tipo di contenuto articolo come stiamo per fare in questa dimostrazione. Se lo fai, perderai il corpo di tutti gli articoli sul tuo sito web. Se stai lavorando su un sito in cui è già stato utilizzato il tipo di contenuto Articolo, dovresti creare un nuovo tipo di contenuto su cui testare il modulo Paragrafi.

Sul nostro sito "Life Advice for Free", inizieremo a configurare i paragrafi modificando il tipo di contenuto dell'articolo.

• Vai a Struttura > Tipi di contenuto.
• Fare clic sul pulsante "Gestisci campi" nella riga Articolo.
• Ora sarai nella pagina "Gestisci campi" per il tipo di contenuto dell'articolo. In questa pagina, fai clic sulla freccia a discesa accanto al pulsante "Modifica" nella riga Corpo e fai clic su Elimina.
• Conferma l'eliminazione nella pagina successiva.

Ora creeremo il nostro primo tipo di Paragrafi.

• Passa a Struttura > Tipi di paragrafi.
• Fai clic su "Aggiungi tipo di paragrafi".
• Nella pagina successiva, dobbiamo fornire un'etichetta per questo tipo di paragrafi. Per la nostra dimostrazione, lo chiameremo "Body text", poiché lo useremo come corpo del nostro contenuto.
• Fai clic su "Salva e gestisci campi".
• In questa pagina "Gestisci campi", fai clic su "Aggiungi campo".
• Nel seguente elenco a discesa "Aggiungi un nuovo campo", scorri verso il basso e, in "Testo", seleziona "Testo (formattato, lungo, con riepilogo)". È simile al campo Corpo predefinito utilizzato spesso dal tipo di contenuto Articolo: un'area di testo in formato lungo con un editor WYSIWYG.
• Nella seguente pagina "Aggiungi campo", etichetteremo anche questo particolare campo "Testo corpo".
• Fai clic su "Salva e continua".
• Successivamente veniamo indirizzati alla scheda "Impostazioni campo" di questo campo. Per ognuno di questi campi, possiamo specificare un numero consentito di valori. Può essere utile consentire più di 1 valore per alcuni campi, in particolare quelli che accettano singole informazioni discrete, come date, file di immagine o campi di testo in formato breve per informazioni come nomi, ma per aree di testo in formato lungo , spesso non è necessario fornire valori aggiuntivi poiché i paragrafi possono essere semplicemente inseriti uno dopo l'altro in un'unica area di testo. In questo esempio, lasciamo le impostazioni predefinite su "Limitato" e 1.
• Fai clic su "Salva impostazioni campo".
• Nella seguente pagina "Impostazioni del corpo del testo per il corpo del testo", possiamo mantenere tutte le impostazioni predefinite. Si noti che gli utenti avranno ancora tutte le opzioni di formattazione che normalmente avrebbero con l'editor WYSIWYG dell'area di testo. Non gli stiamo togliendo nulla. Quello che faremo invece è fornire loro un metodo aggiuntivo e migliorato per aggiungere determinati tipi di elementi al loro contenuto.
• Fai clic su "Salva impostazioni".
• Ora vedrai i tuoi nuovi campi all'interno del tuo nuovo tipo di paragrafo:

• Nella pagina successiva, fai clic sulla scheda "Gestisci display".
• Attualmente questo tipo di paragrafi ha un solo campo: il campo del testo del corpo. Non vogliamo che un'etichetta appaia insieme al testo di questo campo, quindi seleziona "Nascosto" nella colonna Etichetta per questo campo. Il formato dovrebbe rimanere come predefinito.
• Fai clic su "Salva".

Ora dobbiamo aggiungere questo tipo di Paragrafi al tipo di contenuto Articolo in modo che quel tipo di contenuto possa usarlo. Ecco come lo facciamo:

• Passa a Struttura > Tipi di contenuto.
• Fai clic su "Gestisci campi" per il tipo di contenuto dell'articolo.
• Fai clic su "Aggiungi campo".
• Per utilizzare il nostro nuovo tipo di paragrafo con questo campo, apri l'elenco a discesa "Seleziona un tipo di campo" e seleziona "Paragrafo" in "Revisioni di riferimento".
• Dopo aver selezionato "Paragrafo", fornisci l'etichetta "Corpo" perché questo è ciò che stiamo usando come corpo del nostro contenuto.
• Fai clic su "Salva e continua".
• Nella pagina successiva, "Tipo di elemento a cui fare riferimento" dovrebbe essere impostato su "Paragrafo".
• "Il numero consentito di valori dovrebbe essere "Illimitato". Selezionando "Illimitato", possiamo inserire questo campo speciale fornito dai nostri tipi di Paragrafi configurati tutte le volte che vogliamo. Questo sarà utile quando inizieremo a inserire altre cose oltre al testo nel corpo del contenuto.
• Fai clic su "Salva impostazioni campo".
• Nella seguente pagina "Impostazioni del testo del corpo per l'articolo", dobbiamo rendere disponibile il nostro tipo di paragrafo precedentemente creato in questo campo. Per fare ciò, seleziona la casella accanto a "Corpo del testo" in "Tipo", nella parte inferiore della pagina. Questo è il modo in cui rendiamo disponibile quel particolare tipo di paragrafo in questo campo. Man mano che aggiungiamo più tipi di paragrafi al nostro sito, possiamo tornare e renderli disponibili anche in questo campo.

• Fai clic su "Salva impostazioni" e il sito dovrebbe riportarti alla pagina "Gestisci campi" per il tipo di contenuto.

Ora abbiamo finito di sostituire il campo Corpo precedente (predefinito) con il nostro nuovo campo Corpo, che utilizza i paragrafi, e in particolare il tipo di paragrafo "Testo corpo" che abbiamo creato. Ora configureremo alcune altre impostazioni in modo che appaia come vogliamo.

• Per iniziare, faremo clic sulla scheda "Gestisci visualizzazione modulo" in modo da poter posizionare il nuovo campo Corpo in una posizione ben visibile nella pagina di creazione del contenuto per gli articoli.
• In questa pagina, scorri verso il basso per trovare il nostro nuovo campo Corpo e trascinalo nella parte superiore dell'elenco, appena sotto Titolo.
• Fai clic su "Salva".

Ora dobbiamo assicurarci che il nuovo tipo di paragrafo sia disponibile nella posizione corretta per i visitatori del sito.

• Fare clic su "Gestisci visualizzazione".
• Di nuovo troverai Body in fondo. Trascina questo in alto, appena sotto Immagine. Tratteremo quel campo dell'immagine come una sorta di grande immagine introduttiva o iniziale per i nostri articoli e non come parte del contenuto stesso.
• Fai clic su "Salva".

A questo punto, abbiamo completato la configurazione per il nostro tipo di contenuto Articolo utilizzando questo nuovo campo Paragrafi. Ora è il momento di creare dei contenuti per testarli.

• Vai alla pagina Contenuto del tuo sito e fai clic su "Aggiungi contenuto".
• Fare clic su "Articolo".
• Puoi inserire qualsiasi titolo per il tuo articolo. Per questo esempio, chiamiamo il nostro articolo "Come fare 100 amici".
• Ora, fino al campo Corpo, potresti aver notato che sembra leggermente diverso, sebbene utilizzi ancora lo stesso campo in formato lungo con un editor WYSIWYG proprio come prima. La differenza ora è che abbiamo un campo Corpo che comprende attualmente un campo di testo Corpo. Appena sotto il campo del corpo del testo, dovresti vedere un pulsante "Aggiungi corpo del testo", che ci consente di aggiungere più campi. A questo punto, ciò non sarebbe necessario perché il campo di testo lungo attualmente in uso è perfettamente adatto per l'immissione di testo lungo con più paragrafi, quindi non avremmo bisogno di aggiungere un campo aggiuntivo quando potremmo semplicemente aggiungere più testo nello stesso campo . Più avanti, però, vedremo che diventa molto utile poter aggiungere ulteriori campi Paragrafi quando hai implementato più tipi di Paragrafi sul tuo sito. Per ora, inserisci solo uno o due paragrafi di testo nel campo di testo del corpo.

Salva il tuo articolo e visualizza la pagina come la vedrebbe qualsiasi visitatore.

A questo punto, il nuovo Corpo che utilizza i paragrafi non è diverso da un articolo che utilizza il campo Corpo predefinito. Con i paragrafi in atto, tuttavia, saremo presto in grado di consentire ai nostri creatori di contenuti di aggiungere elementi aggiuntivi al contenuto senza dover sapere come modellarlo correttamente.

Parte #4. Aggiunta del tuo CSS ai paragrafi

Gran parte di ciò che rende Paragraphs così utile è che possiamo scrivere CSS per elementi di contenuto specifici in modo che i creatori di contenuti non debbano provare manualmente lo stile di molti di questi elementi stessi usando l'editor WYSIWYG o CSS inline. Ciò significa che personalizzeremo il tema del nostro sito per far apparire questi elementi esattamente come vogliamo.

In molti casi del mondo reale, probabilmente lavorerai con un tema o un sottotema personalizzato, nel qual caso puoi modificarlo liberamente. Per questo tutorial, creeremo un sottotema rapido e semplice del tema Bartik predefinito in modo da poter seguire le migliori pratiche e aggiungere i nostri CSS senza modificarli Bartik stesso. (Evitiamo di modificare Bartik, o qualsiasi altro tema principale o contribuito, direttamente perché se lo facciamo e poi applichiamo un aggiornamento rilasciato a quel tema, le nostre modifiche andranno perse.) Se non hai familiarità con la creazione di sottotemi, va bene. Non stiamo scavando ampiamente nel processo, ma stiamo creando una copia diretta del tema, a cui applicheremo poi alcune lievi modifiche. Questo è un processo facile.

• Per creare un sottotema, devi prima accedere al server su cui è ospitato il tuo sito e navigare alla directory principale del tuo sito.
• Una volta lì, apri la directory "temi". È qui che vengono inseriti tutti i temi e i sottotemi personalizzati e con contributo. In questa directory "temi", crea una nuova cartella chiamata "custombartik" e naviga in questa nuova directory.

Ora dobbiamo aggiungere un paio di file a questa nuova directory. Il primo sarà il file di informazioni del tema. Apri qualsiasi software di modifica del codice che utilizzi per lo sviluppo web. Questi file info richiedono diverse informazioni: il nome del progetto (il nome del nostro tema), il tipo di progetto ("tema" in questo caso), il nome macchina del tema di base se questo è un sottotema (come il nostro is), una breve descrizione e la versione principale di Drupal (7.x, 8.x, ecc.) per la quale è stato creato il tema. Inseriamo queste informazioni nel seguente modulo (digita tutto esattamente come lo vedi):

 name: Custom Bartik type: theme base theme: bartik description: A custom theme based on the core Bartik theme core: 8.x

Assicurati che il nome del tema di base "bartik" rimanga senza maiuscolo: è il nome leggibile dalla macchina con distinzione tra maiuscole e minuscole di cui abbiamo bisogno. Con queste informazioni inserite, salva il file come "custombartik.info.yml". È importante salvarlo esattamente con lo stesso nome della cartella che hai creato seguito da ".info.yml".

Ora dobbiamo creare il file delle librerie del nostro tema, dove diremo a Drupal dove trovare il CSS del tema e quale versione del tema è. Ulteriori informazioni possono essere fornite, ma questo è tutto ciò di cui abbiamo bisogno per i nostri scopi.

• Apri un nuovo file. In questo file, presta molta attenzione ai rientri qui. Ogni rientro dovrebbe essere una scheda a due spazi.
• Immettere le seguenti informazioni esattamente come appaiono:

 global-css:  version: 0.1  css:    theme:      css/style.css: {}

• Salva questo file come "custombartik.libraries.yml". Questo file essenzialmente dice al sito Web che questa è la versione 0.1 del tema (avremmo potuto fornire a questo qualsiasi numero di versione) e che ci sarà un foglio di stile situato all'interno della nostra directory del tema ("custombartik") in css/style.css.

Ora dobbiamo tornare al nostro file di informazioni per dire a Drupal di usare le informazioni nel contenitore "global-css" per trovare il nostro foglio di stile.

• Apri il tuo file custombartik.info.yml, aggiungi una riga vuota sotto la riga "core: 8.x", quindi aggiungi la seguente riga di informazioni, sempre mantenendo il rientro esattamente come appare di seguito:

 libraries:  - custombartik/global-css

L'intero file ora dovrebbe assomigliare a questo:

 name: Custom Bartik type: theme base theme: bartik description: A custom theme based on the core Bartik theme. core: 8.x libraries:  - custombartik/global-css

A questo punto, siamo pronti per aggiungere questi due file al nostro tema.

• Carica o copia i file custombartik.info.yml e custombartik.libraries.yml nella cartella custombartik.
• Ora aggiungi una cartella chiamata "css" all'interno della tua cartella custombartik.
• Vai avanti e crea un file vuoto chiamato "style.css" e caricalo in questa directory. Questo sarà il nostro foglio di stile.
• Prima di creare il nostro foglio di stile, tuttavia, vai alla pagina "Aspetto" del tuo sito web.
• Scorri fino alla fine della pagina e, nella sezione "Tema disinstallato", dovresti vedere il tuo tema Bartik personalizzato. Se non lo vedi, assicurati che la tua cartella custombartik e tutti i suoi file siano presenti nella cartella dei temi del file system del tuo sito.
• Fai clic su "Installa e imposta come predefinito" sotto il tuo tema personalizzato in modo che il tuo sito inizi a utilizzare il tuo tema.
• Una volta fatto, vai alla tua home page e dovrebbe apparire quasi esattamente come il tema Bartik predefinito di Drupal, con l'eccezione che probabilmente vedrai un'icona dell'immagine rotta al posto del logo Drupal. Il tema assomiglia proprio a Bartik perché quello che abbiamo creato è un sottotema di Bartik senza personalizzazione ancora in atto. Se il tuo sito non assomiglia a Bartik, e soprattutto se sembra un semplice HTML senza stile CSS, torna ai tuoi due file .yml e assicurati che appaiano esattamente come stampati sopra.

Infine, per correggere l'immagine del logo rotta, copieremo il logo direttamente da Bartik nel nostro sottotema. Questo va bene perché in realtà non stiamo cambiando nulla in Bartik.

• Passa alla directory principale del tuo sito e vai su core/themes/bartik. Qui vedrai un file chiamato "logo.svg".
• Copia questo file nel tuo sottotema (la directory "custombartik").
• Sul tuo sito web, vai su Configurazione > Prestazioni e fai clic su "Svuota tutte le cache". Ora il logo dovrebbe apparire sul tuo sito.

Parte #5. Stile dei campi di Paragaphs

Ora che abbiamo un sottotema che possiamo modificare in sicurezza, possiamo iniziare a impostare regole di stile per gli elementi del nostro contenuto controllati da Paragraphs. Prima di farlo, dobbiamo creare un nuovo tipo di Paragrafi che richieda regole di stile speciali. Seguiremo il nostro esempio di avere un campo che inserisce un'immagine centrata nel mezzo di un articolo.

• Passa a Struttura > Tipi di paragrafi.
• Fai clic su "Aggiungi tipo di paragrafi".
• Imposteremo l'etichetta per questo come "Immagine centrata".
• Fai clic su "Salva e gestisci campi".
• Nella pagina successiva, fai clic su "Aggiungi campo" e seleziona "Immagine" in "Aggiungi un nuovo campo".
• Assegneremo anche a questo campo "Immagine centrata".
• Fai clic su "Salva e continua".
• Nella pagina successiva, possiamo mantenere tutti i valori predefiniti, quindi fai clic su "Salva impostazioni campo".
• Quindi, nella pagina "Impostazioni immagine centrata per immagine centrata", aggiungeremo alcune semplici restrizioni. Impostare la risoluzione massima dell'immagine su 650x450 e la risoluzione minima su 50x50. Imposta la dimensione massima di caricamento su 1 MB e fai clic su "Salva impostazioni". Queste impostazioni specifiche non sono necessarie per il corretto funzionamento del tipo Paragrafi; li stiamo includendo semplicemente per imitare uno scenario del mondo reale.

• Ora fai clic sulla scheda "Gestisci visualizzazione", imposta l'etichetta dell'immagine centrata su "Nascosta" e fai clic su "Salva".

A questo punto, dobbiamo aggiungere questo tipo di Paragrafi al campo Paragrafi che abbiamo nel nostro tipo di contenuto Articolo.

• Vai a Struttura > Tipi di contenuto.
• Fai clic su "Gestisci campi" accanto ad "Articolo".

Potresti essere tentato di fare clic su "Aggiungi campo" qui per il nostro nuovo tipo di paragrafo "Immagine centrata", ma ricorda, questo sarà mescolato con il nostro campo Corpo personalizzato. Quindi, invece, aggiungeremo l'immagine centrata al campo Corpo che abbiamo creato.

• Fai clic su "Modifica" accanto a "Corpo" e scorri fino alla fine della pagina.
• Qui vedrai "Immagine centrata" disponibile sotto il nostro tipo di paragrafo "Testo corpo".
• Seleziona la casella accanto a "Immagine centrata" per renderla disponibile in questo campo e salva le impostazioni.

Ora aggiungeremo un'immagine usando questo campo.

• Vai alla pagina dei tuoi contenuti e modifica il tuo articolo "Come fare 100 amici".
• Immaginiamo di voler aggiungere un'immagine centrata da qualche parte nel mezzo del nostro articolo. Sotto il campo di testo del corpo, vedrai di nuovo il pulsante "Aggiungi testo del corpo" per aggiungere un altro campo di testo del corpo all'interno di questo campo del corpo. Tuttavia, se fai clic sulla freccia del menu a discesa accanto a questo pulsante, vedrai che ora è disponibile anche "Immagine centrata". Fare clic su questo pulsante e scegliere un file immagine da caricare qui. Quindi fornire del testo alternativo, poiché è necessario.

Ora abbiamo aggiunto l'immagine al nostro contenuto, ma attualmente è posizionata sotto tutto il testo. È qui che utilizzeremo un campo di testo Corpo aggiuntivo.

• Fai clic su "Aggiungi corpo del testo". Ora abbiamo, dall'alto verso il basso, un campo del corpo del testo, un'immagine centrata e un altro campo del corpo del testo. Nota che, anche se a questo punto non dovresti aver bisogno di farlo, puoi spostarli liberamente tramite le frecce di trascinamento in alto a sinistra dei singoli campi dei paragrafi. Per fare in modo che l'immagine centrata appaia inserita nel testo dell'articolo, vai semplicemente al primo campo di testo del corpo, seleziona il testo che desideri appaia dopo l'immagine e taglia quel testo dal campo. Quindi scorri verso il basso e incolla il testo tagliato nel secondo campo di testo del corpo (dopo l'immagine).
• Fai clic su "Salva".

Quando visualizzi il tuo articolo ora, non sembrerà ancora del tutto corretto. Dal momento che non abbiamo ancora aggiunto alcuna regola di stile al nostro tema, è probabile che l'immagine venga spostata a sinistra (come è per impostazione predefinita), piuttosto che centrata. Tuttavia, dovrebbe apparire dopo il testo del primo campo di testo del corpo e prima del testo del secondo campo di testo del corpo. Ora abbiamo un articolo su cui possiamo testare alcune regole di stile personalizzate.

Parte #6. Controllo dei paragrafi con CSS

Andremo ora al nostro sottotema personalizzato per iniziare a definire lo stile dell'output dei campi Paragrafi che abbiamo creato. Per ora, punteremo specificamente al campo "Immagine centrata", piuttosto che al campo Paragrafi che comprende il tipo di contenuto. Lo stiamo facendo perché vorremo che questo campo sia centrato in qualsiasi momento, indipendentemente da dove si trovi. Pertanto, impostando le regole direttamente per "Immagine centrata", evitiamo di impostare regole multiple non necessarie per più contesti.

Tuttavia, abbiamo bisogno di scegliere come target la classe "node", perché ci sarà, per impostazione predefinita, uno stile per questo campo mirato sotto la classe "node". Quindi, dobbiamo ignorare queste regole.

• Apri il foglio di stile del tuo sottotema "custombartik" su custombartik/css/style.css.
• Il file dovrebbe essere ancora vuoto, ma ora inizieremo ad aggiungere regole ad esso. Manterremo le cose semplici per ora. Aggiungi le seguenti righe di codice al tuo foglio di stile:

 .node .field--name-field-centered-image {  float: none;  text-align: center; } .node .field--name-field-centered-image img {  max-width: 100%;  max-height: 450px; }

Con il primo insieme di regole, stiamo semplicemente centrando l'immagine orizzontalmente all'interno della sua classe di campo e assicurandoci che nessun testo o altro sia fluttuante accanto ad essa. Il secondo insieme di regole non è strettamente necessario, ma è un codice comune per assicurarsi che le immagini non diventino più grandi di quanto dovrebbero essere in relazione all'area del contenuto.

• Una volta aggiunto questo al tuo file style.css, salva le modifiche (da qui in avanti, qualsiasi riferimento al salvataggio delle modifiche nel tuo sottotema presuppone anche il caricamento o la copia dei file sul tuo server se non stai modificando direttamente sul server su dove si trova il tuo sito di test).
• Quindi sul tuo sito, vai su Configurazione> Prestazioni e fai clic su "Svuota tutte le cache" per caricare le modifiche al tema sul tuo sito.
• Torna all'articolo su cui hai aggiunto l'immagine da centrare (o aggiorna la pagina se l'hai già aperta).

L'immagine posizionata tramite il tipo di paragrafo "Immagine centrata" ora dovrebbe essere centrata senza testo fluttuante su entrambi i lati. Potrebbero esserci ulteriori stili che vorremmo aggiungere, ma ai fini di questo tutorial, abbiamo fatto ciò che vogliamo fare in questo momento: assicurati che l'output di questo campo sia rigorosamente controllato dai CSS in modo che gli utenti aggiungano il contenuto non deve modificare alcuno stile utilizzando l'editor WYSIWYG o altri metodi di stile in linea.

Parte #7. Paragrafi con più campi

Possiamo anche creare tipi di paragrafi costituiti a loro volta da più campi.

Ad esempio, invece di un tipo "Immagine centrata", possiamo creare un tipo "Immagine centrata con didascalia", che consisterebbe in un campo di caricamento dell'immagine e un campo di testo di accompagnamento per ogni singolo elemento di quel tipo. Anche questo ci aiuta a rimuovere l'onere del layout da coloro che aggiungono contenuti al sito in modo da poter controllare la visualizzazione dei contenuti a livello di tema.

Creiamo questo tipo "Immagine centrata con didascalia" per esercitarci nel processo di creazione di un tipo di paragrafi multicampo. Come ci si potrebbe aspettare, questo processo sarà simile a quello della creazione di un tipo a campo singolo.

• Passa a Struttura > Tipi di paragrafi e fai clic su "Aggiungi tipo di paragrafi".
• Etichetta questo tipo "Immagine centrata con didascalia" e fai clic su "Salva e gestisci campi".
• Fai clic su "Aggiungi campo".

Poiché il nostro campo "Immagine centrata" creato in precedenza è esattamente quello che vogliamo per la parte dell'immagine del nostro nuovo tipo di Paragrafi, invece di creare un nuovo campo, possiamo riutilizzare quello precedente. Quindi, non selezionare nulla in "Aggiungi un nuovo campo" nella pagina "Aggiungi campo".

• In "Riutilizza un campo esistente", seleziona "Image: field_centered_image".
• Mantieni l'etichetta "Immagine centrata" e fai clic su "Salva e continua".
• Abbiamo bisogno di configurare le nostre impostazioni per i limiti di dimensione dell'immagine nella pagina successiva. Inseriamo ancora una volta una risoluzione massima dell'immagine di 650x450 pixel e un minimo di 50x50 pixel. Imposta la dimensione massima di caricamento su 1 MB.
• Fai clic su "Salva impostazioni".

Ora aggiungeremo un altro campo. Tieni presente che siamo ancora all'interno delle impostazioni per il nostro nuovo tipo di Paragrafi, quindi una volta aggiunto questo secondo campo, "Immagine centrata con didascalia" sarà un tipo con due campi.

• Fai clic su "Aggiungi campo" e aggiungi un nuovo campo di tipo "Testo (normale)".
• Etichetta questo campo "Didascalia".
• Fai clic su "Salva e continua".
• Alcuni sottotitoli più lunghi potrebbero dover superare il limite predefinito di 255 caratteri, quindi modifica la lunghezza massima per questo campo su 500. Mantieni il numero consentito di valori su "Limitato" e 1 e salva le impostazioni.
• Le seguenti impostazioni predefinite delle didascalie vanno tutte bene, quindi salva anche le impostazioni su quella pagina.

Ora il nostro nuovo tipo di Paragrafi ha tutti i campi di cui ha bisogno, quindi controlliamo la visualizzazione.

• Fare clic sulla scheda "Gestisci visualizzazione" in modo da poter rimuovere le etichette dei campi, che in questo caso non sono necessarie.
• Seleziona "Nascosto" nella colonna "Etichetta" per entrambi i campi e fai clic su "Salva".
• Se i due campi fossero fuori ordine, li riorganizzeremmo in modo che il campo della didascalia venga dopo il campo dell'immagine, ma poiché abbiamo aggiunto il campo della didascalia per ultimo, dovrebbe essere già posizionato dopo il campo dell'immagine, proprio come vogliamo che sia .

Ora aggiungeremo il nuovo tipo al nostro tipo di contenuto dell'articolo.

• Passa a Struttura > Tipi di contenuto e fai clic su "Gestisci campi" per l'articolo. Come nel caso in cui abbiamo aggiunto il nostro primo tipo di paragrafo "Immagine centrata" al tipo di contenuto, aggiungeremo questo nuovo tipo di paragrafo all'interno del nostro campo Corpo personalizzato anziché aggiungere un nuovo campo del tutto.
• Nella pagina "Gestisci campi" per Articolo, fai clic su "Modifica" per Corpo.
• Scorri fino alla fine della pagina e seleziona la casella accanto a "Immagine centrata con didascalia" per rendere disponibile quel tipo all'interno di questo campo Corpo.
• Fai clic su "Salva impostazioni".
• Ora questo nuovo tipo di Paragrafi sarà disponibile per coloro che stanno aggiungendo Articoli al sito.

Andiamo avanti e creiamo un nuovo articolo utilizzando questo campo, quindi aggiungeremo il nostro stile per controllarne la visualizzazione.

• Vai alla pagina Contenuto, fai clic su "Aggiungi contenuto" e fai clic su "Articolo".
• Chiamiamo questo articolo "Imparare a suonare uno strumento può migliorare la tua vita".
• Fai clic su "Aggiungi corpo del testo" per iniziare ad aggiungere del testo all'articolo. Inserisci uno o due paragrafi di testo in questo campo.
• Quindi, sotto il campo Corpo del testo, fai clic sulla freccia a discesa accanto ad "Aggiungi corpo del testo" e seleziona l'opzione "Aggiungi immagine centrata con didascalia" appena disponibile. Si noti che ora ci vengono presentati due campi per l'immissione dei dati, come dovremmo aspettarci: i campi "Immagine centrata" e "Didascalia" che appartengono a questo tipo di Paragrafi.
• Carica qualsiasi immagine nel campo dell'immagine e fornisci del testo alternativo.
• Quindi digita "La Les Paul è una delle chitarre più leggendarie del rock and roll".

Ora aggiungeremo parte del resto del testo dell'articolo dopo l'immagine e la didascalia.

• Sotto il tipo di paragrafo dell'immagine e della didascalia, fai di nuovo clic su "Aggiungi corpo del testo".
• Aggiungi un altro paragrafo o due di testo.
• Infine, fai clic su "Salva e pubblica".

Attualmente, la visualizzazione della nostra "Immagine e didascalia centrate" dovrebbe essere corretta per metà. Poiché abbiamo riutilizzato il precedente campo "Immagine centrata", l'immagine stessa dovrebbe essere già centrata proprio come lo era per il campo precedente che consisteva esclusivamente in un'immagine da centrare. Il testo della didascalia, ovviamente, non ha ancora regole CSS, quindi apparirà allineato a sinistra e assomiglierà al testo del resto dell'articolo. Quindi, dobbiamo aggiungere alcune regole al nostro tema per dare uno stile al testo della didascalia.

Questa volta, quando scriviamo il nostro CSS, punteremo all'intero tipo di paragrafo "Immagine centrata con didascalia" e quindi approfondiamo il campo della didascalia all'interno di quella classe, anziché indirizzare il testo della didascalia indipendentemente dal suo contenitore, come abbiamo fatto in precedenza con il immagine centrata. Adotteremo questo approccio perché potremmo voler riutilizzare questo campo di testo della didascalia altrove, ed è probabile che in alcuni casi lo vorremo con uno stile diverso (come essere allineato a sinistra o a destra anziché centrato) da come è in questo particolare tipo di paragrafi.

Centreremo il testo della didascalia perché l'immagine corrispondente è centrata e, per fornire una differenziazione visiva tra questo testo e il testo dell'articolo, lo renderemo in grassetto (anche il corsivo fornirebbe quell'effetto).

• Aggiungi le seguenti righe di codice al tuo foglio di stile e salva le modifiche:

{codecitation}.paragraph--type--centered-image-with-caption .field--name-field-caption { font-weight: bold; allineamento testo: centro; }{codecitazione}

• Quindi, per vedere le nostre modifiche sul sito, vai su Configurazione > Prestazioni e svuota tutte le cache.
• Torna indietro e aggiorna l'articolo creato di recente e dovresti vedere le nuove regole di stile in vigore. Il testo della didascalia dovrebbe ora essere in grassetto e centrato sotto l'immagine.

Ovviamente possiamo applicare uno stile a questo tipo di paragrafi nel suo insieme. Un motivo per farlo sarebbe separare l'elemento immagine/didascalia dal testo circostante e rendere visivamente chiaro che dovrebbe essere visto come una singola unità.

• Aggiungi il seguente codice al tuo foglio di stile e salva le modifiche:

{codecitation}.paragraph--type--centered-image-with-caption { bordo: 2px grigio solido; margine: 4px 0; imbottitura: 4px; }

Ora svuota di nuovo la cache del tuo sito e aggiorna la pagina dell'articolo. L'immagine e la didascalia dovrebbero avere quasi lo stesso aspetto; tuttavia, ora l'intera unità immagine/didascalia è circondata da un bordo grigio e presenta piccoli margini intorno alla parte superiore e inferiore. Potremmo fare di più per migliorare l'estetica qui (e il bordo probabilmente non è necessario), ma questo dimostra la nostra capacità di fornire uno stile per i singoli componenti dei tipi di paragrafi e per i tipi di paragrafi nel loro insieme.

Ora, se un utente non tecnico sta aggiungendo contenuti al sito e vuole includere un'immagine grande e centrata con una didascalia, tutto ciò che deve fare è selezionare questo campo Paragrafi durante la modifica dell'articolo, caricare un'immagine e inserire il testo in il campo della didascalia. La formattazione verrà applicata automaticamente.

Parte #8. Utilizzo di interi nodi nei paragrafi

A questo punto, abbiamo visto alcuni esempi degli usi di base dei paragrafi. Ora affronteremo un esempio leggermente più avanzato: usare i paragrafi per posizionare un intero nodo all'interno del corpo di un contenuto. Un caso d'uso per questo potrebbe essere quello di inserire un'informazione supplementare correlata ma autonoma all'interno di uno dei tuoi articoli (simile a qualcosa come una sezione "Lo sapevi?" che potresti vedere a corredo di un articolo di una rivista).

Per il nostro esempio, immaginiamo di voler avere la possibilità di aggiungere ciò che chiameremo "caselle informative" ai nostri articoli, e lo faremo inserendo un breve contenuto intitolato "Una breve storia dell'arpa ” all'interno del nostro articolo precedentemente creato su come imparare a suonare uno strumento.

Innanzitutto, dobbiamo creare un tipo di contenuto per queste "caselle informative".

• Passa a Struttura > Tipi di contenuto e fai clic su "Aggiungi tipo di contenuto".
• Assegneremo a questo tipo di contenuto il nome "Casella delle informazioni".
• Per la descrizione, scrivi "Brevi informazioni utilizzate per integrare gli articoli".
• Click the “Display settings” tab, and uncheck “Display author and date information” because we don't want author and date information showing up within our Info box content.
• All of the rest of the default settings on this page should be fine. Click “Save and manage fields.”
• On the “Manage fields” page, we already have a basic long-form “Body” field, and this is all we want for this content type, since all pieces of content of this type should be short and simple. No changes are therefore necessary here. Click “Add field.”

Now that our content type has been created, we need to create the Paragraphs type that will reference it.

• Navigate to Structure > Paragraphs types, and click “Add paragraphs type.”
• Give this type the label “Info box.”
• On the “Manage fields” page, click “Add field".
• Beneath “Add a new field,” select “Content,” found under the “Reference” header.
• For the label, write “Info box,” and save.
• All defaults are fine on the next page, so click “Save field settings” there.
• On the next settings page, scroll down until you see the “Reference type” settings.
• Since we want to use this Paragraphs type to reference and display Info box nodes, check the box next to “Info box” beneath the “Content types” header. You can leave “Sort by” set to “None” because the field will autofill based on what we type and is not a list of all content of this type. Click “Save settings.”
• Back on the “Manage fields” page, click the “Manage display” tab.
• As we've been doing so far, we'll remove the label, so select “Hidden” under the label column for the Info box field.
• Then, because we want to display the entire Info box node whenever we choose to include an Info box in one of our articles, we need to select “Rendered entity” in the column labeled “Format.”
• Click “Save.”

It's time to make this Paragraphs type available to our Article content type.

• Navigate to Structure > Content types, and click the “Manage fields” button for the Article content type.
• As we've been doing, click “Edit” for the Body field.
• Scroll down and check the box next to “Info box” under the “Paragraph types” header.
• Save your settings.

With the structure side of this implementation complete, we'll now create some content to test it out. We'll start by adding our site's first “Info box.”

• Navigate to the “Content” page, and click “Add content.”
• Choose Info box.
• For the title, enter “A Short History of the Harp.”
• Enter two or three paragraphs of text into the Body field, and click “Save and publish.”

At this point we will divert briefly from Paragraphs. Currently the home page of our site lists all of our articles and info boxes, but we don't want the latter to appear on the homepage; we want them only placed within other articles. So, let's quickly edit the view for our homepage to exclude these pieces of content.

• You can either click the “Edit view” icon (which is displayed as a pencil icon) on the top right corner of the view area of the homepage.
• Navigate to Structure > Views, and edit the “Frontpage” view.
• On the view's settings page, next to the “Filter criteria” header, click “Add.”
• Select “Content type,” and then click “Apply (all displays).”
• For the filter criterion, select “Is not one of” under “Operator,” and under “Content types,” check “Info box.” Then click “Apply (all displays).” This, as you probably know, will exclude all content of type “Info box” from the Frontpage view.
• Back at the view's settings page, click “Save.”
• Now when you view the homepage of your site, you will no longer see the “A Short History of the Harp” info box.

Now we'll add our Info box to the “Learning to Play an Instrument” article.

• Scroll down to the bottom of the Body Paragraphs field (the larger field encompassing all individual Paragraphs fields).
• Click the dropdown arrow next to “Add Body text,” and select “Add Info box.” You can type in any piece of the title of your “A Short History of the Harp” Info box node into the autofill field, and that Info box should then be displayed as an option.
• Select it to include that Info box in the body of this article.

With the Info box now included in our Body, we need to place it where we want it.

• Drag and place it after the first Body text field and before the Centered image field.

With this new organization, we should probably have some text between the Info box and the Centered image. To simulate doing this in a real-world scenario, we'll cut some of our current text and paste it into a new Body text field, as opposed to arbitrarily adding text to the article.

• So that we have a field to paste our new text in, go ahead and click the “Add Body text” button beneath all of the Paragraphs fields.
• Then scroll to the first Body text field and select and cut one or two paragraphs of text from the field (making sure to leave at least some text in the field).
• Paste the cut text into the newly created (currently empty) Body text field.
• Once this is done, drag the new Body text field, and place it after the Info box field and before the Centered image field.
• Click “Save and keep published”.

Upon viewing the article, you'll see that the referenced Info box node is displayed in its entirety within the larger article. (If all you see is the title of the Info box node, that means you forgot to select “Rendered entity” in the Format column Paragraph type's “Manage Display” page.) As it currently is, the lack of styling on the referenced Info box is likely to be confusing to most viewers. We won't go through the task of applying additional CSS to these Info box references because we already now how to do that, but it is important to note that, in practice, these references should be styled to appear significantly different from the containing article. It should be made extremely clear—through the use of some combination of background color, borders, text size, and font family—that the information contained in the Info box is not part of containing article and is simply supplementary information.

Part #9. Using Field Layout with Paragraphs

Just as the Field Layout module can be used to control the layout of nodes, it can also be used to control the layout of individual Paragraphs types. In some cases, this can be a viable alternative to controlling the layout via CSS, depending on the situation and on the developer's (your) preference.

Important: As of this writing, Field Layout is an experimental module. As such, any implementation of Field Layout should be considered a risk. If you do decide to use the module during its experimental phase, it should be tested extremely thoroughly on a development site before being used on a production site. Otherwise, play it safe by considering this information useful for future situations after the module has graduated into non-experimental core.

Because Field Layout is a core module, it does not need to be downloaded.

• Begin by navigating to your site's Extend page.
• Select the Field Layout and Layout Discovery (a dependency) modules, and click “Install.”
• Then, if prompted, click “Continue.”

Let's use Field Layout to control the layout of a new Paragraphs type in which we create a two-column unit of “Pros and cons” information.

• Navigate to Structure > Paragraphs types, and add a new Paragraphs type.
• Give it the label “Pros and cons,” and add a field.
• For this field, select “Text (formatted, long),” and give this first field the label “Pros”.
• Save and continue, and keep all of the default settings through the next two pages.
• You are back at the “Manage fields” page. Add another field with a Text (formatted, long) input type, and label this one “Cons”.
• Save, and continue through the subsequent settings pages, once again keeping all default settings.
• Once you're back at the “Manage fields” page, click the “Manage display” tab. This time we will keep the label (positioned above, as is default) for each field so that when visitors are reading them, they know that we are listing pros and cons accordingly.

If we look below the listed fields, we will see a new group of settings called “Layout settings.” This is made available by the Field Layout module. Click to expand these settings.

• We have a handful of options here, and for our Pros and cons lists, we'll select “Two column.”
• Then click “Save,” and you'll be taken back to the “Manage display” page.
• Now we have additional layout areas to place our fields in for this Paragraphs type. In total, we have “Top” for the area spanning the width of the content space above our columns, “First” for the left column, “Second” for the right column, “Bottom” for the area spanning the width of our content space below the columns, and “Disabled” for fields we do not want to display.
• Drag-and-drop your Pros and Cons fields so that Pros is in the “First” column and Cons is in the “Second” column, and save.

Now, as usual, we need to add the new Paragraphs type to our Article content type.

• Navigate to Structure > Content types, and click “Manage fields” for Article.
• Edit the Body field, scroll to the bottom of that field's settings.
• Check the box next to “Pros and cons” to add that Paragraphs type to this custom Body field. Then save.

Now we're ready to begin using this “Pros and cons” Paragraphs type. Let's use it in a new article.

• Create a new article called “Swimming Is a Great Way to Stay in Shape.”
• Add two or so paragraphs of Body text to this article.
• Click the dropdown arrow next to the “Add Body text” button, and select “Add Pros and cons.” Notice that this Paragraphs type has two long-form text areas to fill in, one labeled “Pros” and the other labeled “Cons.”
• Enter text for five or so pros, each separated by a simple line break (in other words, separated by pressing the Enter key). If you'd like, you can alternatively make these 5 bullet points. Do the same in the Cons field.
• If you'd like to fill out this article a bit more, you can then add another field of Body text below the Pros and cons field.
• Click “Save and publish.”

Viewing the article, you'll see your comparison of pros and cons listed, with the pros listed in a left-hand column and the cons listed next to them in a right-hand column. You should also see your “Pros” and “Cons” labels above each list.

In most cases you would likely want to apply some CSS to these elements via your stylesheet. Again, we won't take the time do so here because you have seen how that works. Some styling suggestions might be to add a vertical border between the lists of pros and cons (and potentially borders surrounding the entire Paragraphs type) and to make the “Pros” and “Cons” labels more prominent. Additionally, you may consider going back and editing the Pros and cons Paragraphs type to add a title field which can be displayed in the “Top” area above both columns. In this case, such a field might read, “Some Pros and Cons of Swimming for Exercise.”

Part #10. Permissions for the Paragraphs Module

At this point, we've set up all of our Drupal Paragraphs types and integrated them the way we want, aside from some styling we would need to apply to the Info box and Pros and cons types. However, we have not yet configured any permissions pertaining to Paragraphs. This is an important step. Currently, if an anonymous visitor were to view our site, they would not be able to see any of the content entered via Paragraphs types (which is all of the content we have entered in this tutorial) because by default, only administrators have permission to view such content. You can see this for yourself by logging out of the site in its current state and trying to view the content. You will see the titles of articles but none of the body content.

Additionally, we want to have a “Content creator” (or similar) role on the site so that not everyone adding content has full access to all administrative configuration on the site. These users need permission not only to view Paragraphs content but to create, edit, and delete it.

We'll start by giving everyone permission to view Paragraphs content.

• Vai alla pagina Persone del tuo sito e fai clic sulla scheda "Autorizzazioni".
• Scorri verso il basso fino a visualizzare la sezione "Autorizzazioni del tipo di paragrafi". Sotto questa intestazione, trova "Body text: Visualizza contenuto" e seleziona le caselle per Utente anonimo e Utente autenticato.
• Fai lo stesso per l'autorizzazione "Visualizza contenuto" di tutti gli altri tipi di paragrafi che abbiamo creato: Immagine centrata, Immagine centrata con didascalia, Casella informazioni e Pro e contro.
• Fai clic su "Salva autorizzazioni".

A questo punto, tutti gli utenti possono visualizzare il contenuto di tutti i paragrafi. Sentiti libero di uscire e visualizzare il sito come visitatore anonimo per confermare.

Ora per creare un nuovo ruolo per coloro che aggiungeranno e modificheranno i contenuti sul nostro sito.

• Passa a Persone, fai clic sulla scheda "Ruoli" e fai clic su "Aggiungi ruolo".
• Chiama questo ruolo "Creatore di contenuti".
• Nella pagina Ruoli, fai clic sulla freccia a discesa accanto al ruolo Creatore di contenuti e seleziona "Modifica autorizzazioni".
• Ci sono alcune autorizzazioni che dovremo concedere agli utenti di questo ruolo. Alcuni di questi non sono correlati ai paragrafi, ma li includiamo comunque per imitare uno scenario del mondo reale. Inoltre, sarà difficile testare il nuovo ruolo in modo affidabile se non dispone di tutte le autorizzazioni che avrebbe in pratica. Tieni inoltre presente che stiamo concedendo queste autorizzazioni partendo dal presupposto che i nostri creatori di contenuti lavorino tutti internamente. Cioè, non abbiamo un gran numero di utenti tecnicamente autenticati ma ancora pseudo-anonimi che creano contenuti sul nostro sito, quindi riteniamo di poter tranquillamente concedere a questi utenti il ​​permesso di fare cose come usare il formato di testo Full HTML, che in altri casi causerebbero alcuni problemi di sicurezza.

Di seguito è riportato l'elenco delle autorizzazioni che dovrebbe essere assegnato al ruolo di Creatore di contenuti:

Commento

• Modifica i propri commenti
• Pubblica commenti
• Salta l'approvazione del commento
• Visualizza commenti

Contatto

• Visualizza il modulo di contatto a livello di sito
• Utilizza i moduli di contatto personali degli utenti

Filtro

• Usa il formato di testo HTML di base
• Usa il formato di testo Full HTML
• Usa il formato di testo HTML con restrizioni

Nodo

• Accedi alla pagina Panoramica dei contenuti
• Amministra i contenuti
• Visualizza i propri contenuti non pubblicati
• Annulla tutte le revisioni
• Visualizza tutte le revisioni
• Visualizza i propri contenuti non pubblicati
• Articolo: Modifica qualsiasi contenuto
• Articolo: Modifica i propri contenuti
• Articolo: ripristinare le revisioni
• Articolo: Visualizza le revisioni
• Casella delle informazioni: crea nuovi contenuti
• Casella delle informazioni: modifica qualsiasi contenuto
• Casella delle informazioni: modifica i propri contenuti
• Casella delle informazioni: Ripristina le revisioni
• Casella delle informazioni: Visualizza le revisioni

Paragrafi Tipo Autorizzazioni

Concedi tutte le autorizzazioni in questa sezione ad eccezione di "Ignora il controllo dell'accesso al contenuto dei paragrafi".

Ricerca

• Usa la ricerca avanzata
• Usa la ricerca

Sistema

• Utilizzare le pagine di amministrazione e la guida
• Utilizza il sito in modalità manutenzione
• Visualizza il tema di amministrazione

Tassonomia

• Modifica i termini in Tag

Barra degli strumenti

• Usa la barra degli strumenti di amministrazione

Utente

• Visualizza le informazioni sull'utente

Assicurati di fare clic su "Salva autorizzazioni" quando hai finito.

Alcune note su alcune delle autorizzazioni che abbiamo concesso e non concesso qui: Non abbiamo concesso l'autorizzazione per amministrare i tipi di paragrafo perché non vogliamo che creino nuovi tipi di paragrafo o modifichino il modo in cui funzionano i tipi di paragrafo esistenti. Inseriranno semplicemente le informazioni utilizzando i tipi di paragrafi che noi sviluppatori abbiamo creato per loro. Inoltre, sebbene in alcuni casi sia opportuno evitare di concedere ai ruoli non amministrativi la possibilità di eliminare il contenuto (nella maggior parte dei casi è sufficiente che possano annullare la pubblicazione del contenuto e l'eliminazione del contenuto lo rende irrecuperabile), è necessario concedere loro l'autorizzazione per eliminare il contenuto dei tipi di paragrafi in "Autorizzazioni per i tipi di paragrafi". Ciò è necessario perché se non sono in grado di eliminare questo tipo di contenuto e se fanno accidentalmente clic per aggiungere qualsiasi contenuto tramite il tipo di paragrafi di cui non hanno effettivamente bisogno in un determinato articolo, non ci sarà modo per loro di rimuovere quell'unità di contenuto dell'articolo. Sarebbe simile a non consentire l'uso del tasto Backspace.

Per testare le nostre nuove autorizzazioni, creeremo un nuovo utente con il ruolo di Creatore di contenuti e seguiremo il processo di aggiunta di un nuovo articolo come tale utente.

• Passa a Persone e fai clic su "Aggiungi utente".
• Crea un utente di nome Mary (puoi saltare l'indirizzo email), con una password che puoi facilmente ricordare.
• Assicurati che lo stato dell'utente sia contrassegnato come "Attivo" e, soprattutto, assicurati di controllare il ruolo "Creatore di contenuti" per questo utente.
• Quindi fai clic su "Crea nuovo account".
• Esci e accedi nuovamente come Mary. Se le autorizzazioni sono state assegnate correttamente, dovresti avere accesso alla barra degli strumenti di amministrazione.
• Fai clic su "Gestisci" nella barra degli strumenti se non vedi i collegamenti amministrativi ("Contenuto", "Struttura", ecc.).
• Quindi vai su Contenuto e aggiungi un nuovo contenuto di tipo Articolo. Y
• Puoi intitolare questo articolo "I broccoli sono ottimi per te".
• Aggiungi un campo di testo Corpo e inserisci del testo.
• Dovresti quindi esaminare e provare ad aggiungere contenuto di ogni tipo di paragrafo che abbiamo creato: immagine centrata, immagine centrata con didascalia, riquadro informazioni e pro e contro.
• Dopo averlo fatto, salva l'articolo e visualizzalo. Questo processo completo dovrebbe essere lo stesso di quando lo abbiamo fatto come amministratore del sito e dovresti quindi essere in grado di visualizzare tutti i contenuti senza problemi.

Se non hai la possibilità di aggiungere uno o più di questi, o se riscontri altri problemi mentre provi a farlo, probabilmente hai perso una o più delle autorizzazioni necessarie quando le concedi al ruolo di Creatore di contenuti. Torna alle autorizzazioni per Creatore di contenuti e assicurati di aver concesso loro tutte le autorizzazioni elencate sopra, in particolare quelle nell'intestazione "Autorizzazioni del tipo di paragrafi".

Conclusione del tutorial sui paragrafi

Dopo aver confermato che puoi creare e visualizzare contenuto utilizzando il contenuto di Paragraphs come creatore di contenuto, hai completato questo tutorial. A questo punto, dovresti avere una comprensione del perché e come utilizzare il modulo Paragrafi.

Per ricapitolare, l'utilità di questo modulo risiede nella sua capacità per noi di definire componenti di contenuti speciali all'interno dell'articolo, come scatole di informazioni supplementari e immagini centrate con didascalie, senza costringere i creatori di contenuti a provare a modellare le cose da sole.

Con Paragraphs, viene semplicemente chiesto loro di fornire il contenuto per queste parti dei nostri articoli e noi sviluppatori possiamo scrivere regole a livello di sito (usando CSS) su come visualizzare quel contenuto. Ciò semplifica il processo di creazione dei contenuti per gli utenti non tecnici e rende l'aspetto di tali contenuti più coerente per utenti tecnici e non tecnici.