drupal 9

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

     Lo mejor de todo proyecto es revisar los detalles, corregir fallos e implementar nuevas opciones, que lo hagan más atractivo a nuestros usuarios y/o clientes, por eso, en este pequeño artículo, te voy a enseñar cómo activar las librerías que permitirán aplicar animaciones, dentro de nuestro subtema de Drupal,  para que puedas aplicar efectos visuales que llevarán tus trabajos a otro nivel de cara a tus usuarios.

     Cómo añadir animaciones con css en tema personalizado

          Lo primero que debes tener en cuenta, es que las librerías en Drupal 9 se podrán añadir dentro de la carpeta libraries, para que estén accesibles desde cualquier lugar del proyecto, pero también podrían ser añadidas, como haré en este ejemplo, directamente en los archivos correspondientes que forman la estructura de nuestro tema, esto facilitará la aplicación del mismo subtheme en otros proyectos, así como la corrección de posibles fallos o mejoras, relacionadas directamente con la apariencia de nuestro proyecto.

         Puedes revisar la guía paso a paso, para poder implementar animaciones dentro de un Subtheme, está en este enlace: Cómo añadir animaciones con css en tema personalizado, o si lo prefieres, puedes ver el video desde el botón que está en la parte inferior de este articulo.

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

     Aunque existe un módulo bastante completo llamado webform, Drupal ha mejorado considerablemente el Formulario de contacto que trae por defecto, ofreciendo una alternativa más fácil y práctica, si lo que necesitas es ofrecer esta posibilidad de contactar en tu sitio web.

     Para hacerlo aún más funcional, podremos imprimir este formulario de contacto, dentro de varios contenidos o incluso, dentro de contenedores del tipo Paragraphs, para ello nos ayudaremos de las preprocess_functons(), con las que podremos pasar toda clase de valores, como variables y posteriormente utilizarlas donde nos hagan falta.

     Cómo imprimir el formulario de contacto en un Paragraphs utilizando Preprocess Functions

          Como hemos dicho al principio de este artículo, las Preprocess functions(), nos permitirán pasar como parámetros toda clase de valores, mediante el uso de variables que podremos reutilizar cuando sea requerido, en este ejemplo en particular vamos a utilizarlas para imprimir nuestro formulario de contacto dentro de un elemento Paragraphs, pero tienes otros ejemplos para emplearlas aquí: Ejemplos de uso Preprocess functions 

          Para que podamos imprimir el formulario de contacto, como hemos decidido crear un Subtheme, sólo tendremos que añadir el código dentro del archivo de funciones de nuestro subtheme, tal y como te muestro en la imagen siguiente:

          Si quieres mostrar el formulario en un contenido normal de Drupal, tipo página por ejemplo: hook_preprocess_node()   

          En este ejemplo en particular, aprovechando que, dentro de un elemento Paragraphs podremos incluir cualquier tipo de campo, nodo o incluso otos Paragraphs, vamos a utilizar la Preprocess function para pasarle como parámetro en formulario a un nodo y posteriormente llamaremos a este nodo desde el Paragraphs.

          Si lo que quisieras lograr es pasar directamente el formulario dentro de la plantilla del Paragraphs, también podrías lograrlo con esta otra función:

          Cómo imprimir un formulario contacto dentro de un Paragraphs Drupal 9

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

      En todo proyecto web, es necesario que existan usuarios a los que no podemos dar permisos de administrador, para evitar que borren algún contenido o cambien alguna configuración importante dentro del proyecto, por eso, resulta muy interesante poder ofrecerles una interfaz de usuario amigable, para que dichos usuarios no tengan miedo de realizar cambios en el contenido al que tienen acceso.

     En el siguiente ejemplo, utilizaremos los módulos Color Field y Paragraphs, combinándolos con la definición de roles y permisos de Drupal, para ofrecer a los usuarios editores del proyecto, la posibilidad de realizar modificaciones, como por ejemplo, el color de fondo de un bloque, sin tener que otorgarles los permisos como administradores de Drupal, evitando así posibles errores irremediables.

Cómo instalar y configurar el módulo:

Paso 1 Descargar el módulo:

     Lo primero que tendrás que hacer es descargarlo, para ello, a partir de Drupal 8 se recomienda que utilices el gestor de paquetes Composer, ya que te facilitará tanto la instalación como futuras actualizaciones del tus proyectos. No obstante también podrías descargarlo desde la Página oficial del módulo y una vez descargado, tendrás que colocarlo en la carpeta "modules" o "modules/contrib", dependiendo de tu instalación y asegurarte de descargar todas sus dependencias o el módulo no funcionará, esta es una de las ventajas con las que cuentas al hacer la instalación usando Composer.

Paso 2 Activación del módulo :

     Para activar el módulo Slick Paragraphs, al igual que todos los demás módulos contribuidos de Drupal, tendrás la posibilidad de hacerlo, mediante el uso de la herramienta Drush, con el comando "drush en paragraphs -y", que sirve para activar cualquier módulos y todas sus dependencias, o desde la interfaz de Drupal.    

 Trabajando con Paragraphs, Imágenes y Color Field usando Plantillas:

          Antes de comenzar a realizar modificaciones en las plantillas, para obtener los resultados que esperamos conseguir, es necesario que actives el Modo Depurador o Modo Debug de Drupal, para que puedas copiar y renombrar las plantillas que afectarán tus contenidos, si todavía no sabes cómo hacerlo, echa un vistazo al artículo en el que lo explico detalladamente: Imágenes y color por interfaz con Paragraphs.

          Ahora que ya sabes cómo crear tus plantillas personalizadas, utilizando el Modo Depurador de Drupal, es el momento de configurarla para que el usuario pueda modificar a su antojo el color que quiere ver en cada elemento.

          Para ello, una vez descargado y activado el módulo Color Field, el siguiente paso será añadir un campo de ese tipo, con las configuraciones adicionales, necesarias para que se muestre en la interfaz de usuario como esperamos.

          Así que añadiremos el nuevo campo, dentro del elemento Paragarphs que hemos definido para este ejemplo, (Imagen con Texto) y luego aplicaremos los cambios necesarios en la configuración del campo.

     La siguiente configuración del campo de tipo color, permitirá al usuario, entre otras opciones, añadir o no un color específico que afectará a varios elementos, o dejar sin ningún color el campo, para que muestre el color que trae por defecto.

           Además de estas configuraciones, seleccionaremos la rueda de configuración, que aparece en la parte derecha de todos los campos, para asegurarnos que el valor de los colores sea el exagesimal.

          Una vez hemos terminado con la configuración del campo color, lo siguiente que tendremos que hacer es imprimir el valor del campo dentro de nuestra plantilla Twig, para ello, seleccionaremos el nombre del campo y luego, como ya hemos explicado anteriormente, haremos que se imprima como fondo de un contenedor cuando tenga valor, utilizando el condicional "if".

          En la siguiente imagen, podrás ver el resultado final aplicado en la plantilla, donde estamos condicionando el contenedor para que muestre como color de fondo el valor del campo que hemos definido previamente.

          Para que el módulo Field Color funcione correctamente, en este caso, que buscamos ofrecer al usuario una interfaz de administración visualmente intuitiva, hemos optado por utilizar el Spectrum, para que se muestre el selector de colores, para ello hemos añadido en las librerías de Drupal, según la documentación oficial del módulo, las dependencias necesarias para que esto ocurrra.

          Recuerda, que si no existe la carpeta libraries, tendrás que crearla antes de añadir estas librerías en la carpeta raíz de tu instalación Drupal.

     Ahora que tenemos todo configurado correctamente, podremos abrir nuestro contenido para seleccionar el color que deseamos aplicar, como fondo de nuestro contenedor y veremos un aspecto parecido al que te muestro a continuación:

Imagen

     Una vez guardados los cambios, si refrescamos caché de Drupal, podremos ver que efectivamente se ha cambiado el color en el contenedor, tal y como habíamos previsto.

Imagen