Drupal 8 configuraciones avanzadas en un tema

Cada tema tiene por defecto una página administrativa de configuración, el cual presenta un formulario con opciones básicas como “configuraciones para el logo” o “configuraciones para favicon”.

 

Drupal 8 nos permite modificar todo el formulario en el archivo theme-settings.php . Se debe usar el hook

THEME_NAME_form_system_theme_settings_alter(&$form, $form_state)

 

Para trabajar esta parte con una completa flexibilidad es necesario tener conocimientos previos acerca de Forms API.

 

Ejecución

Dentro del archivo theme-settings.php se realizaría lo siguiente:

 

Es necesario usar estas clases:

 

use Drupal\file\Entity\File;

use Drupal\Core\Form\FormBase;

use Drupal\Core\Form\FormStateInterface;

 

Recién ahí usaremos el hook previamente mencionado:

 

function theme_name_form_system_theme_settings_alter(&$form, &$form_state) {

}

 

Dentro del hook y con tus conocimientos previos de FORM API puedes añadir o modificar campos en el formulario.

 

Usaremos como ejemplo lo siguiente:

//Aquí creamos un fieldset que contendrá campos

$form['theme_name_options'] = array(

   '#type' => 'fieldset',

   '#title' => t('Opciones para el tema theme_name')

 );



//Creamos un campo tipo select

 $form['theme_name_options']['selection_nav'] = array (

   '#type' => 'select',

   '#title' => t('Select a location'),

   '#default_value' => theme_get_setting('selection_nav'),

   '#options' => array(

     0 => t('Default'),

     1 => t('Left'),

     2 => t('Top')

   ),

 );

 

Encontré un detalle en particular sobre el manejo de archivos, por ejemplo la subida de imágenes. Así como en Drupal 7, aquí también hay cosas que considerar que las detallamos a continuación.

 

 

 /*

  * Ejemplo de campo archivo.

  * Agregamos un campo de tipo archivo

  * lo usaremos para subir una imágen

  */

 $form['theme_name_options']['sponsor_logo'] = array(

   '#type' => 'managed_file',

   '#title' => t('Logo del auspiciador'),

   '#default_value' => theme_get_setting('sponsor_logo'),

   '#upload_location' => 'public://sponsor-logo/',

   '#upload_validators' => array(

     'file_validate_extensions' => array('gif png jpg jpeg svg'),

   ),

 );

 

 

Continuemos...

 

Dentro del hook que altera el formulario que estamos tratando, tendremos el siguiente código con el fin de agregar un envío(submit) adicional en el formulario.Agregaremos la ruta del archivo en el que estamos para que al momento de procesar el envío por defecto cargue el nuevo y con este último estará lo necesario para cargar archivos.

 

//Armamos la ruta del archivo en el que nos encontramos

 $theme_file = drupal_get_path('theme', 'theme_name') . '/theme-settings.php';



 //Obtenemos la información del formulario para reconstruirlo

 $build_info = $form_state->getBuildInfo();



 if (!in_array($theme_file, $build_info['files'])) {

   $build_info['files'][] = $theme_file;

 }



 $form_state->setBuildInfo($build_info);



 $form['#submit'][] = 'theme_name_form_submit';

 

Se puede notar que al final, el submit adicional está llamando a una función. Esta la explicaremos a continuación:

 

function theme_name_form_submit($form, FormStateInterface $form_state) {



//Recuperamos el valor que enviamos en el ‘sponsor_logo’
 $values = $form_state->getValue('sponsor_logo', []);



//Validamos que no se encuentre vacío

 if (!empty($values[0])) {

   $fid = $values[0];

   //Cargamos el archivo y dentro de el, toda su información

   $file = File::load($fid);



   //Aquí agregamos el archivo en el objeto

   $file_usage = \Drupal::service('file.usage');

   $file_usage->add($file, 'theme_name', 'theme', 1);

  

   //Aquí obtenemos la ruta del archivo

   $path = $file->getFileUri();

  

   //Establecemos el valor dentro del array ‘sponsor_logo’

   $form_state->setValue(array('sponsor_logo', 'url'), $path);



   return true;

 }

}

El siguiente paso es pre-procesar la data que se está enviando a través del formulario para nuestra mejor conveniencia.

 

<?php                                                                                                                                             


function theme_name_preprocess_page(array &$variables) {

//Aquí se está recuperando el valor y definiéndolo como una variable disponible.

 $variables[sponsor_logo] = theme_get_setting(sponsor_logo);

}

 

Finalmente en nuestro archivo page.html.twig nos quedará por imprimir el valor, del siguiente modo:

 

 

<img src="{{ file_url(sponsor_logo.url) }}" alt="Logo nuevo" title="Logo nuevo"/>

 

 

*No está demás limpiar caché.