Front.id

Alguna vez pasa que necesitamos modificar el HTML que genera un elemento de formulario. No me refiero a un form sino mas bien al HTML que conforma un elemento de tipo input, password, email, select, etc.

Este es un ejemplo típico del output de drupal para un campo input normal de tipo texto:

Y su codigo:

Pues bien, imaginen ahora que necesitamos que el label vaya después de la description, o que el input queremos que esté contenido en un div. Todo lo anterior requiere que tengamos control sobre el template de este tipo de campo. ¿Como lo hacemos? Vamos a ello.

El hook_theme_suggestions_HOOK_alter()

Drupal de serie nos permite usar un template que ya está en el core y que contiene el HTML que se va a generar para los elementos de formulario en general. Pero nosotros queremos ir un poco mas allá y disponer de la posibilidad de modificar solo el HTML de tipos específicos de elementos de formulario. 

Para eso usamos hook_theme_suggestions_HOOK_alter() que nos permite añadir template suggestion  al template form_element (que es el que define a form-element.html.twig):

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 */
function MITHEME_O_MODULO_theme_suggestions_form_element_alter(array &$suggestions, array $variables, $hook) {
  $suggestions[] = 'form_element__type__' . $variables['element']['#type'];
}

¿Y que hemos conseguido con el código anterior? Pues antes del alter solo existía "form-element.html.twig" y ahora hemos conseguido tener templates granulares para cada tipo de elemento:

// Template original que viene en el core:
form-element.html.twig

// Nuevos templates disponibles para que los uses en tu theme:
form-element--type--textfield.html.twig
form-element--type--email.html.twig
form-element--type--password.html.twig
form-element--type--select.html.twig
form-element--type--ETCETERA.html.twig

Hagamos algo con los templates

Bueno ya tenemos entendidos y bien gestionados los templates. Ahora sigamos con nuestro ejemplo. Copia "form-element.html.twig" desde el core o desde el theme desde el que estés heredando tu subtheme y ponlo dentro de la carpeta de "templates" de tu theme.

Tip: Ubicaciones de form-element.html.twig:

// Si tu theme NO hereda de algún theme del core
web/core/modules/system/templates/form-element.html.twig

// Si tu theme hereda de algún theme del core:
web/core/themes/classy/templates/form/form-element.html.twig
web/core/themes/stable/templates/form/form-element.html.twig

Y ya lo tienes!. Solo te queda limpiar el cache y modificar la posición de los label, el campo (el input), la description y hacer todo lo que necesites en dicho campo.

Chau!