Progetta e codifica tipi di blocchi personalizzati con il modulo Bean in Drupal 7

Voglio creare un tipo di blocco personalizzato in modo da poter utilizzare un semplice modulo per creare schede di contenuto che possono anche essere collegamenti con una didascalia ben disegnata.

Questa funzionalità fa parte del core di Drupal 8! Ho scritto su quelli prima.

Tipo di blocco personalizzato per banner Hero in Drupal 8

Crea un tipo di blocco personalizzato riutilizzabile per semplificare la creazione di banner di eroi per i costruttori di siti e gli editor di contenuti.

medium.com

BUTT , per Drupal 7 utilizziamo un modulo contributivo chiamato Bean. Siamo grandi fan di Bean. Bean fornisce un’interfaccia utente per definire i campi per un tipo di blocco personalizzato, aggiungerli / modificarli come farebbe un tipo di contenuto e gestirne la visualizzazione con Gestisci display e modellarli nel nostro tema.

Possiamo anche fare tutto questo in file tematici, in modo da poter creare un modulo personalizzato per inserire facilmente i nostri bean in un progetto.

https://www.drupal.org/project/bean

Guarda, è un fagiolo.
  • Pianifica il fagiolo
  • Crea il tipo di fagiolo
  • Crea un modulo per il bean
  • Modella il tipo di bean (puoi anche utilizzare Display Suite per visualizzare il tuo bean)
  1. Ottieni Bean dalla pagina del progetto drupal.org
  2. Segui le istruzioni di Drupal.org per l’installazione di un modulo.
  3. Attiva i moduli Bean: Bean and Bean Admin UI

Vogliamo una scheda contenuti. È pensato per essere un pulsante glorificato.

Esempio di un bean della scheda di contenuto con un’immagine, un’etichetta, un colore e un’icona.
  • Immagine
  • Etichetta
  • Colore dell’etichetta
  • Icona
  • url

L’interfaccia utente del bean è molto simile all’interfaccia del tipo di contenuto, in cui è possibile creare e configurare campi e quindi Gestisci display. Ooh, puoi persino usare Display Suite! Adoro Display Suite.

Crea tipo di fagiolo

Structure > Block Types o admin/structure/block-types

Siamo in grado di gestire i campi per quel nuovo tipo di fagiolo: sembra esattamente come aggiungere campi a un tipo di contenuto.

Gestire i campi per un tipo di blocco sembra piuttosto familiare …

Ora aggiungi i campi. Ecco la nostra.

Ecco i miei. Ci sono alcuni extra, ma non preoccuparti.

Prefisso sempre i nomi dei miei field machine con il nome del tipo Bean.

  • field_card_url
  • field_card_image
  • field_card_label_icon
  • field_card_style ← Il colore dell’etichetta
  • Puoi vedere che l’ etichetta fa già parte del modulo Bean, quindi lo userò solo.

Icona

Il mio tema include FontAwesome, quindi le chiavi effettive del mio campo field_card_label_icon saranno i nomi delle icone FontAwesome che sono fa-icon-name . Aggiungo alcuni che sembrano buoni per le opzioni nell’elenco.

Stile

Le opzioni di stile saranno le classi. Quindi il mio CSS può regolare il

Imposta il modulo

Riorganizza i campi nell’ordine in cui desideri che vengano visualizzati nel modulo.

Creerò un modello personalizzato per il mio Card Bean. Questo può diventare molto complicato se non hai familiarità con Drupal php o crea i tuoi modelli. Fornirò i miei frammenti di codice e li analizzerò, ma non sarò in grado di entrare nel sistema di template di Drupal 7.

Crea un suggerimento per il modello del tema

Dobbiamo sapere come nominare il nostro file modello. Dobbiamo chiedere al nostro tema di creare il nome del file. Nel file template.php del tema aggiungi questa funzione.

  funzione mytheme_preprocess_entity (& $ vars) { 
if ($ vars ['entity_type'] == 'bean') {
if ($ vars ['bean'] -> type == 'mybean') {
$ vars ['theme_hook_suggestions'] [] = 'bean--'. $ Vars [ 'bean' -> tipo;
}
}
}
  • mytheme – il nome del tuo tema
  • mybean – il nome della macchina del tuo bean
  • Potresti essere in grado di dire dall’ultima riga che il mio modello si chiamerà bean--mybean.tpl.php

Crea il modello

Crea il tuo file modello e inseriscilo nella cartella dei templates del tuo tema.

Decido sempre il mio HTML prima di iniziare ad aggiungere il php. Ecco la struttura che voglio:

   
Esaminiamo di nuovo l’idea della mia carta.

Abbattere l’HTML. I nomi dei campi sono in maiuscolo: è qui che userò php per inserire i valori nel passaggio successivo.

  • Avvolgo la mia intera carta in un div . Qui è dove applicherò la classe di stile dal mio campo.
  • Voglio anche essere in grado di racchiudere il contenuto in un collegamento, quindi a è l’elemento successivo.
  • Tirerò dentro l’immagine e il testo alternativo
  • Quindi creerò l’etichetta che può includere un’icona.

Inserisci i valori del campo

Come tirare esattamente diversi campi in Drupal è una bestia, ma ho capito quelli di cui avevo bisogno per questa carta. Questo è un formato di esempio:

   field_card_foo ['und'] [0] ['value'];  ?> 

Vogliamo ottenere il campo dal bean , eseguire il drill-down nell’array che definisce il valore del campo, catturare ciò di cui abbiamo bisogno e stamparlo .

Snippet di passaggio successivo:

  <div class = "bean-card  field_card_style ['und'] [0] ['value'];?> "> <a href="  field_card_url [' und '] [0] [' url '];?> "class =" bean-card_link "> 

<img src = " field_card_image ['und'] [0] ['uri']);?> " alt = " field_card_image ['und' ] [0] ['alt'];?> ">



<span class = "fa field_card_label_icon ['und'] [0] ['value'];?> ">
< ? php print $ title; ?>



Per me è difficile da leggere. Questo è il motivo per cui inizio sempre con HTML e aggiungo il php a passi. E nota quanti di questi tipi di campi si comportano in modo leggermente diverso. Eh.

Cose importanti che dobbiamo aggiungere !!!

Affinché il bean funzioni correttamente, è necessario aggiungere alcuni snippet al wrapper di bean. include eventuali attributi HTML che Drupal 7 o Bean potrebbero voler aggiungere.

potrebbe fare altre cose, ma la cosa più importante è includere l’attrezzatura di modifica contestuale.

Quindi solo la prima riga deve essere:

  <div class = "bean-card  field_card_style ['und'] [0] ['value'];?>  ">  

// Quindi il resto della carta così com'è

Va bene

Codice finale (a meno che non si desideri aggiungere istruzioni condizionali, quindi continuare.)

  <div class = "bean-card  field_card_style ['und'] [0] ['value'];?>  ">  <a href="  field_card_url ['und'] [0] ['url'];?> "class =" bean-card_link "> 

<img src = " field_card_image ['und'] [0] ['uri']);?> " alt = " field_card_image ['und' ] [0] ['alt'];?> ">



<span class = "fa field_card_label_icon ['und'] [0] ['value'];?> ">
< ? php print $ title; ?>



Salva il file, svuota la cache, crea un Card Bean e in teoria dovresti vedere questo HTML con i tuoi valori quando visualizzi il tuo bean. 😀

Il modello sopra dovrebbe funzionare se ogni campo è compilato . Se un campo non è compilato, potresti ricevere errori. Se si desidera che i campi siano facoltativi, è necessario aggiungere istruzioni condizionali al modello.

Se myfield è compilato, quindi stampare questa parte. Altrimenti , non stamparlo. O forse stampare qualcos’altro. ”

Ecco un esempio di un’istruzione condizionale:

  <? php if (isset ($ bean-> field_card_image ['und'] [0] ['uri'])):?> 
// Il codice che voglio mostrare, che sarà la mia immagine.
<? php endif ; ?>

Vedi come il get-field-stuff nell’istruzione if è lo stesso di quando vogliamo stampare il campo?

Ok, quindi ecco il codice completo in cui tutto è facoltativo con i condizionali in grassetto.

  <div class = "bean-card  field_card_style ['und'] [0] ['value'])): print $ bean-> field_card_style ['und'] [0] ['value']; endif;?> "> 

field_card_url ['und'] [0] ['url'])):?>
<a href=" field_card_url ['und'] [0] ['url'];?> ">


field_card_image ['und'] [0] ['uri'])):?>

<img src = " field_card_image ['und'] [0] ['uri']);?>" alt = " field_card_image ['und' ] [0] ['alt'];?> "/>

<? php endif; ?> title! == ''):?>
<div class = "bean-card_label field_card_text_size ['und'] [0] ['value']?>">


field_card_label_icon ['und'] [0] ['value'])):?>
<span class = "fa field_card_label_icon ['und'] [0] ['value'];?>">
<? php endif; ?>




field_card_url ['und'] [0] ['url'])):?>




Cose da notare:

Spero che questo ti aiuti. Adoriamo Bean.

Potresti sicuramente fermarti qui. Ma esportare un bean in un modulo lo rende riutilizzabile. Spero di aggiungere una parte II su come farlo ad un certo punto. Quindi, iscriviti o qualcosa del genere.

More Interesting

Dimentica il tempo di caricamento!

Ho creato la mia prima app React a 17 anni.

Metti alla prova il tuo DOM con attributi di dati

Crea il tuo sistema di progettazione, parte 3: Colori

6 animazioni angolari da zero

Mantieni i tuoi chatbot. La velocità è l'app killer del web e statica è dove si trova.

Troncamento dei numeri in JavaScript

Vue vs Angular vs React nel 2019— Risposta

Bootue - Come mai più JS?

Il ciclo degli eventi in JavaScript

Come abbiamo abbandonato Redux per MobX

Crea la tua prima applicazione React in 15 minuti

La migliore trappola di design di sempre !!

Frontend Dev Challenge: Settimana 2

CSS Vars o SASS Vars? Utilizza entrambi!