Si eres un apasionado de las animaciones y los efectos, pero no tienes demasiada experiencia en el diseño frontend para tus web con Drupal, aqui tienes un módulo que te facilitará este proceso. Se trata del módulo contribuido Hover Effects, que una vez instalado, te permitirá aplicar una gran cantidad de efectos en tus contenidos, modificando ligeramente tus plantillas twig, obteniendo un aspecto más atractivo en tus diseños.
El módulo no tiene página de configuración, así que lo único que necesitarás, una vez lo hayas instalado y activado, es visitar la página de muestra, que está en su página oficial, para que puedas ver y compiar en tus plantillas y elegir la combinación de efectos que más te convenga.
Requisitos
Tener instalado un Subtema basado en Bootstrap.
Para aprender a instalar un subtema basado en Bootstrap 3 HAZ CLIC AQUÍ
Para aprender a instalar un subtema basado en Bootstrap Barrio 4/5 HAZ CLIC AQUÍ
Para aprender a instalar un subtema basado en Bootstrap 5 HAZ CLIC AQUÍ
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 Hover Effects, 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 hover_effects -y", que sirve para activar cualquier módulos y todas sus dependencias, o desde la interfaz de Drupal.
Paso 3 - Visitar y elegir el efecto y estructura que quieres:
Tan pronto como tengas activado el módulo hover effects, sólo tendrás que visitar la página de demostración, el enlace lo tienes en su página oficial:
Una vez sepas cuál es el efecto que deseas añadir a tus contenidos, tendrás que activar el modo debug, para conocer los nombres de las plantillas sugeridas por drupal, y de esta forma modificar sólamente el o los contenidos que te interesen.
Hay varias formas de activar el modo debug, puedes hacerlo según la Página oficial de Drupal, pero yo suelo recomendar esta manera: HAZ CLIC AQUI .
Cómo aplicar los efectos del módulo Hover Effects
En este caso, ya hemos activado el modo debug, para conocer los nombres sugeridos por drupal, y así afectar al contenido que nos interesa, en este ejemplo, serán los artículos, así que he creado dos artículos, que es uno de los tipos de contenido que nos viene con Drupal por defecto, y lo único que he añadido es una imagen a cada uno y un poco de texto.
No he modificado nada más de los artículos, ni del drupal, así que si hacemos clic en el logo o vamos a nuestra página principal de Drupal, deberíamos ver los dos artículos en modo de vista resumido o teaser, con un aspecto parecido a la siguiente imagen.
Colocados en la página principal, haremos clic en la tecla F-12 o Clic derecho sobre la pantalla y buscaremos la opción Inspeccionar, para ver el siguiente resultado:
Drupal nos está sugiriendo utilizar la plantilla de la vista que muestra los contenidos por defecto en la página principal, en este caso, el listado de los artículos que hemos creado.
A continuación, buscaremos la plantilla modelo, la copiaremos en nuestro tema personalizado y le cambiaremos el nombre, para poder aplicar los cambios necesarios.
Con la plantilla copiada dentro de nuestro subtema, y con el cambio de nombre aplicado, siguiendo las sugerencias de drupal, podremos comenzar con el resto de la implementación del módulo y sus efectos.
Primera comprobación
Para saber si estamos modificando la vista con nuestra plantilla, copiaremos el código que está en el primer ejemplo de la página de efectos y sustituiremos todo el contenido de nuestra plantilla, por él.
Una vez sustituido el código, borraremos la caché de Drupal y volveremos a la página principal para comprobar el resultado obtenido...
Desgraciadamente, nos daremos cuenta de que el módulo funciona correctamente, pero que lo que se imprime dentro de los elementos, no tiene nada que ver con lo que tenermos en nuestra vista.
Para solucionarlo, crearemos nuestra propia vista, del tipo campos en este caso, de esta manera, podremos añadir todos los campos relacionado, dento de cada una de las etiquetas que vienen en el modelo.
Creando nueva vista de "Artículos destacados"
Ahora crearemos una nueva vista del tipo bloque, que mostrará los campos título e imagen, con la modificación de que el valor para el campo imagen, será la url en lugar de la imagen renderizada.
El siguiente paso será activar el bloque de esta vista, en la url "/admin/structure/block", para que se muestre en la página principal.
Si ahora volvemos a la página principal de nuestro Drupal, deberíamos ver algo como la siguiente imagen:
Este es el momento en el que repetiremos los pasos de la vista anterior, para conocer el nombre de la plantilla sugerida, copiarla, cambiarla el nombre y al final, sólo neceistaremos añadir los valores de cada campo donde corresponde:
