themes

Media Queries | Diseño responsivo

Video de Youtube
URL de Video remoto

     Si piensas dedicarte a la maquetación web, es necesario que conozcas y entiendas bien, lo que en CSS se denomina como Media Queries.

     Las media queries (en español "consultas de medios") son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo (como una impresora o una pantalla) o de características y parámetros específicos (como la resolución de la pantalla o el ancho del viewport del navegador).

Se utilizan para:

     Si quieres conocer más a fondo, acerca del uso e implementación de las Media queries, puedes consultar la Página de Mozilla Developers

   CÓMO UTILIZAR MEDIA QUERIES EN TUS DESARROLLOS CON DRUPAL

     En Drupal, como ya sabrás, siempre encontraremos varias maneras de implementar soluciones a nuestros problemas. En esta ocasion, explicaré las opciones más comunes para aplicar Media queries, en tus proyectos.

     APLICANDO MEDIA QUERIES USANDO INTERFAZ DE USUARIO DRUPAL

     Si no tienes demasiado experiencia utilizando Drupal, la mejor forma de comenzar a experimentar sería mediante la interfaz de usuario. Para trabajar con CSS y Javascript, podrás hacerlo al instalar el módulo llamado Asset Injector, que te permitirá crear hojas de estilos personalizables, sin la necesidad de salir de la interfaz de usuario.

     Para aprende a instalar y trabajar con Asset Injector Haz clic aquí

     APLICANDO MEDIA QUERIES EN UN SUBTHEME DRUPAL

     Quiénes tienen algo más de experiencia en maquetación, podrán aplicar sus estilos, a través de las hojas de estilo CSS dentro del subtheme o tema personalizado, que hayan configurado para su proyecto de Drupal.

     Si quieres aprender, acerca de la creación y configuración de tus temas personalizados para Drupal, te dejo un par de enlaces, donde encontrarás documentación y videos, explicándote todos los pasos necesarios:

   Cómo crear un tema personalizado con Bootstrap 3 En Drupal 9     

   Trabajando con Subteme Bootstrap Barrio, Plantillas, Paragraphs y Permisos

   Añadir CSS Personalizado en tu Sutheme Drupal 8/9

   EJEMPLO COMPLETO DE MEDIA QUERIES

     Ahora que ya conoces un poco más, acerca del uso e implementación de los Media queries, aquí te dejo un ejemplo completo de un archivo con las diferentes variaciones, para que puedas crear tus estilos personalizados a cada dispositvo. Sólo tendrás que ir añadiendo tu código, aplicado a la clase o Id del elemento, en las líneas que están marcadas como /* CSS */.

/* 
  ##Device = Desktops (Escritorio)
  ##Screen = 1281px pantallas de escritorio de alta resolución
*/

@media (min-width: 1281px) {
  
  /* CSS */
  
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  
  /* CSS */
  
}

/* 
  ##Device = Tablets, Ipads (portrait/Vertical)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  
  /* CSS */
  
}

/* 
  ##Device = Tablets, Ipads (landscape/horizontal)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  /* CSS */
  
}

/* 
  ##Device = Baja resolución Tablets, Mobiles (Landscape/horizontal)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  
  /* CSS */
  
}

/* 
  ##Device = La mayoría de los Smartphones Móviles (Portrait/Vertical)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  
  /* CSS */
  
}

Drupal 10 | Presentación

     Drupal 10 fue lanzado a finales de 2022, añadiendo varios módulos a su núcleo y actualizando otros, coincidiendo con la versión más reciente de Symfony, cuyo código forma la estructura central de Drupal desde la versión 8.

     Como la nueva versión se parece bastante a sus predecesoras, en este curso sólo añadiremos las que sean consideradas como verdaderamente novedades, que no hayan estado presentes hasta ahora o cuya implementación, suponga un cambio o evolución, en alguno de los procesos y/o metodologías conocidos hasta ahora.

     Por lo tanto, te recomiendo realizar los cursos Drupal 8 paso a paso y Drupal 9 paso a paso, donde conocerás la diferentes maneras de instalar un Drupal en tu entorno local, los principales módulos que deberías conocer, algunos comandos de Drush y de Composer, entre otros.

     Una vez hayas realizado estos cursos anteriores, no tendrás demasiados inconvenientes, para desarrollar nuevos proyectos o actualizarlos, a la versión de Drupal 10.

Drupal 9 | Copias de seguridad

Texto

Cuatro maneras para realizar una copia de tu base de datos Drupal

        Antes de realizar cualquier tipo de actualización en tu proyecto de Drupal, es altamente recomendable, sacar una copia de tu base de datos actual, para evitar posibles pérdidas de información durante el proceso. Tienes varias opciones para extraer esta copia de la base de datos.

  • Copia de la base de datos utilizando Drush.

       Para exportar la base de datos de tu proyecto Drupal, utilizando Drush, colócate en la carpeta raiz de tu proyecto, usando tu consola de comandos y a continuación, ejecuta el siguiente comando, sustituyendo el final, por el nombre que quieres para identificar tu copia de seguridad:

    drush sql:dump --result-file=../mi_backup.sql 

Drupal Update | www.drupaladicto.com - Consultor especializado en drupal y symfony
  • Copia de la base de datos desde la interfaz PhpMyAdmin.

    Si tienes activado el administrador de Base de datos PhpMyAdmin, puedes exportar tu base de datos, a través de su interfaz. Para ello, sólo tienes que acceder a PhpMyAdmin, y a continuación seleccionar la base de datos que necesitas exportar; luego seleccionas el botón exportar, desde el menú superior de PhpMyAdmin y haces clic en continuar.

    El resultado será un archivo con la extensión .sql, que se descargará automáticamente.

Drupal Update | www.drupaladicto.com - Consultor especializado en drupal y symfony
  • Exportar la base de datos utilizando la línea de comandos MySql.

     Para extraeer una copia de tu base de datos, a través de los comandos MySql, deberás ejecutar la siguiente línea, sustituyendo los datos del usuario root, y tu bases de datos y el archivo.sql resultante.

mysqldump -u usuario -p base_de_datos > archivo.sql

 

  • Exportar una copia de la base de datos, usando el módulo Backup and Migrate.

     Otra forma que nos ofrece Drupal, para exportar una copia de la base de datos, será a través del módulo Backup and Migrate, con el que podremos descargar, a través de la interfaz de Drupal, una copia completa de nuestro sitio web, en formato comprimido, que podremos importar en el entorno local o cualquier otro entorno que necesitemos.

     Si quieres aprender a configurar y utilizar el Módulo Backup and Migrate HAZ CLIC AQUI

Drupal Update | www.drupaladicto.com - Consultor especializado en drupal y symfony

Drupal Update | Actualizar Drupal usando Composer y Drush

Video de Youtube
URL de Video remoto
Texto

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

Guía para actualizar tus proyectos Drupal, utilizando Composer y Drush

     Si utilizas Drupal en tus proyectos, es casi seguro que te habrás encontrado con la necesidad de actualizarlo, ya sea para corregir fallos de seguridad, para implementar las mejoras en el código de algún módulo, o para obtener la versión más reciente de su núcleo.

     Por esta razón, en este curso, te enseñaré los pasos que deberías tener en cuenta, en caso de tener que realizar una actualización de tus proyectos Drupal.

   Requisitos:

  1. Tener configurado un entorno local, donde puedas poner en marcha tu proyecto Drupal.

    Si no sabes instalar un entorno local, HAZ CLIC AQUÍ
     
  2. Capacidad para ejecutar comandos de Composer y Drush en tu consola

            Si no tienes Composer instalado, HAZ CLIC AQUI


   Guía para actualizar tus proyectos Drupal, utilizando Composer y Drush


     Paso 1 - Sacar una copia de la base de datos.

        Antes de realizar cualquier tipo de actualización en tus proyectos, es recomendable que hagan una copia de seguiridad, para evitar pérdidas de información durante el proceso, o para volver a la versión anterior, en caso de que no consigas el resultado esperado con la actualización de tus proyectos.

     Para saber cómo hacerlo HAZ CLIC AQUI

     Paso 2 - Verificar los módulos que necesitarán sera actualizados y la razón.

       Es muy recomendable revisar constantemente, el estado de tus proyectos, porque constantemente en Drupal, se añaden nuevas funcionalidades y optimizaciones en el código, y muchas de estas mejoras, están relacionadas con la corrección de fallos de seguridad. Por esta razón, es de vital importancia, que mantengas actualizados tus proyectos con Drupal, siempre que sea posible.

       Para conocer las actualizaciones pendientes en tus proyectos Drupal, puedes elegir entre dos opciones básicas.

     Informe de actualizaciones pendientes, através de la interfaz de Drupal.

       Puedes acceder al informe sobre las actualizaciones pendientes de Drupal, desde la interfaz de usuario, en la url

"/admin/reports/updates"

   

Drupal Update | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Comprobar actualizaciones pendientes mediante consola.

       Otra de las maneras de comprobar los módulos que necesitas actualizar en Drupal, es a través de la consola, gracias al gestor de paquetes Composer, recomendado para cualquier instalación de proyectos Drupal, desde la versión 8.

       En el caso de conocer las actualizaciones pendientes en nuestros proyectos Drupal, nos colocaremos en la carpeta raíz, que es el lugar desde donde podremos ejecutar, en la mayoría de los casos, tanto Composer como Drush. 

        Una vez colocados allí, utilizando nuestra consola de comandos, ejectaremos la siguiente línea de código:

composer outdated

Drupal Update | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Tanto si realizamos la comprobación, por medio de la interfaz de Drupal, como si decidimos realizarlo por medio de la consola de comandos, el restultado debería ser el mismo; es decir, deberíamos obtener el listado de módulos pendientes de actualizar, con las versiones instaladas en el momento de realizar la comprobación, las posibles versiones recomendadas y las notas relacionadas con dichas nuevas versiones, en el caso específico de hacerlo mediante la interfaz de usuario.

     Pero si analizamos en profundidad ambos resultados, el informe resultante desde la consola, es mucho más extenso que el de la interfaz. Esto se debe, a que, además de los módulos de Drupal que requieren actualizarse, Composer nos muestras módulos de Symfony, ya que el núcleo de Drupal está basado en este Framework desde la versión 8.

   Cómo actualizar Drupal por medio de la consola

     Si optamos por actualizar nuestro proyecto de Drupal, por medio de su interfaz de usaurio, el proceso es bastante sencillo. Aunque desde la interfaz, sólo podremos realizar actualizaciones de los módulos, no del núcleo de Drupal.

     Para realizar una actualización de los módulos de Drupal, desde la interfaz, bastará con dirigrinos a la url: "/admin/reports/updates/update" , luego marcaremos el o los módulos que queremos actualizar, haciendo clic en el check que se muestra a la izquierda de cada módulo, y a continuación, haremos clic en el botón Descargar estas actualizaciones, que podremos encontrar la final de la misma página.

Drupal Update | www.drupaladicto.com - Consultor especializado en drupal y symfony

   Actualización mediante consola, utilizando Composer

     Para realizar la actualización de nuestro proyecto Drupal, a través de la consola, utilizaremos Composer y Drush. Composer se encargará de descargar todas las dependencias disponibles, tanto de módulos de Drupal y Núcleo, como de otros componentes relacionados con Symfony. Por esta razón, es recomendable elegir este método de actualización, ya que nos mostrará más información relacionada con todo el proceso y componentes que está actualizando durante el proceso.

     El comando para actualizar todos los módulos de Drupal y su Núcleo al mismo tiempo es el siguiente:

composer update "drupal/*" -W

     El asterísco que se muestra en la barra después de la palabra Drupal, indica que deseamos actualizar todo lo que esté disponible en este momento y la -W, es el sustitutivo para la opción "--with-all-dependencies", aunque puedes utilizarla si lo prefieres. 

     Una vez terminada la descarga de todos los módulos, ejecutaremos los comando de Drush, para borrar la cache de drupal y actualizar la base de datos.

drush cr

drush updb

     En el momento que ejecutemos los comando de Drush, podremos acceder nuevamente a la url "/admin/reports/updates", donde deberíamos ver todos los módulos y el núcleo en color VERDE, indicándonos que no tenemos ninguna actualización pendiente.

Hover Effects | Módulo Drupal

Video de Youtube
URL de Video remoto
Texto

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

    Si te apasionan las animaciones y los efectos, pero no tienes demasiada experiencia en el diseño frontend para tus web con Drupal, aquí 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.

Hover Effects Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

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: http://gudh.github.io/ihover/dist/index.html

Hover Effects Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Hover Effects Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Hover Effects Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Ahora, para hacerlo más interesante, crearemos una vista en formato bloque, donde mostraremos la imagen y el título de cada artículo. De esta manera, podremos apreciar mejor, la potencia de este módulo.

     Paso 1 - Creación de la vista tipo bloque: Lo primero que tendremos que hacer, será crear una vista, tipo bloque, en la que mostraremos la imagen y el título para los artículos, así que nos iremos a la url "/admin/structure/views/add", o navegaremos por el menú superior, en caso de tener el módulo Admin_toolbar instalado.

Hover Effects Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Paso 2 - Configuración de la vista: Una vez creada nuestra vista, nos aseguraremos de haber seleccionado Campos, y añadiremos, para este ejemplo, el campo imagen, ya que, por defecto, se ha añadido ya el campo título.

Hover Effects Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Paso 3 - Ajustes en el campo imagen: Si volvemos a la página de muestas para los efectos, notaremos que utilizan la url de las imágenes, en lugar de la imagen propiamente dicha, por esta razón, modificaremos el campo imagen, para que muestre la url con su ubicación. Para ello, haremos clic en el botón editar a la dercha del campo y a continuación, cambiaremos en el selector, por el valor url.

Hover Effects Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Paso 4 - Activación de la vista Bloque: Ahora que tenemos los cambios necesarios, nos dirigiremos a la página de configuración para los bloques, ubicada en "/admin/structure/block", y activaremos nuestro bloque, para que se muestre en la página principal.

Hover Effects Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Paso 6 - Primera comprobación de resultados: Lo próximo que tendremos que hacer, será dirigirnos a nuestra página principal, para ver el resultado que hemos obtenido. Por ahora, deberíamos ver, los títulos de los artículos, acompañados por las urls de cada imagen principal.

Hover Effects Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Paso 7 -  Reescribir la vista: Si todo lo anterior ha funcionado según lo que esperábamos, entonces es el momento de aplicar el código que asociado al efecto que más nos guste y a continuación, pegarlo en la plantilla sugerida por Drupal, sustituyendo los valores que hagan falta.

     Si no sabes cómo se reescribe una vista, Te lo explico en estos dos artículos:

     Personzalizando Vistas Parte 1: HAZ CLIC AQUÍ

     Personalinzando Vistas Parte 2: HAZ CLIC AQUI

Drupal 8 | Themes y subthemes

Video de Youtube
URL de Video remoto

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

      Llegados a este punto, nos toca ocuparnos del aspecto de nuestro proyecto, para ofrecer una presentación de acuerdo a nuestras expectativas, debemos tomar en cuenta que esta web deberá verse en diferentes dispositivos y que es muy importante prestar atención en todos los detalles para que nada "se rompa" a nivel gráfico cuando el usuario la visite, por ejemplo desde un Ipod. 

     En Drupal, la parte que controla es aspecto de nuestra web está a cargo de los "Temas" o "Themes", que son el conjunto de archivos necesarios para realizar este tipo de configuración.

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Drupal ofrece desde su Página Oficial, la posibilidad de descargar toda clase de Temas, para que podamos utilizarlos y modificarlos, según las necesidades del proyecto. Hoy en día, debido al aumento del uso de dispositivos móviles, es prácticamente obligatorio, diseñar webs que sean adaptables a cualquiera de estos dispositivos, esto es conocido como diseño "Responsivo" o "Responsive".

     Dentro de las alternativas gratuitas, disponibles para Drupal, está el Theme Mayo, que ofrece una alternativa relativamente muy sencilla, de implementar una web con diseño responsivo, sin la necesidad de manipular nada de código.

     Su configuración al completo se hace a través de la interfaz de Drupal, donde una vez descargado e instalado, sólo nos faltará personalizarlo mediante unos cuantos clics, hasta obtener el resultado que andamos buscando o al menos el más aproximado a éste.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Para trabajar con módulos o temas en Drupal, pueden emplearse varios métodos, aunque a partir de la versión 8, se recomienda el uso del gestor de paquetes Composer, porque nos facilitará todos los procesos de instalación, descarga y dependencias; en este caso, voy a enseñarte la forma tradicional, hacemos clic derecho sobre el en enlace comprimido del archivo y seleccionaremos copiar enlace.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Luego nos iremos a Drupal, en la url "/admin/appearance", donde seleccionaremos la opción Instalar nuevo tema. Si ya tienes instalado el módulo Admin Toolbar, podrás hacerlo tal y como se muestra en la imagen.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en drupal y symfony

     A continuación, pegaremos en la siguiente pantalla, la url que hemos copiado y haremos clic en el botón Instalar.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Una vez terminado el proceso de instalación del Theme, podremos activarlo llendo a la url "/admin/appearance", donde se muestran todos los Themes disponibles para su activación, además de los que están activados actualmente y el Theme que utiliza drupal para su interfaz de administración.

     Si nos desplazamos a la parte inferior de esta pantalla, encontraremos el Theme Mayo, dentro del listado de Themes Desinstalados, y podremos Instalarlo como Theme principal haciendo clic en el enlace debajo de su imagen.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Después de activar el Theme, es recomendable que Vaciemos la Cache de Drupal para que podamos ver todos los cambios ejecutados en nuestro proyecto.

     Si nos vamos a la página principal de nuestro proyecto, podremos comprobar el cambio inmediatamente, además de validar el aspecto que se mostrará en dispositivos de varios tamaños.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Otra opción con la que contamos para personalizar el aspecto de nuestras webs de Drupal, es el Theme Bootstrap, en este caso, específicamente hemos optado por, crear nuestro propio tema personalizado o Subtheme, tomando como base, el Theme Bootstrap Barrio, ya que además de heredar las características del Bootstrap 4 original, permite la aplicación de varias configuraciones mediante la interfaz, como hicimos con el Theme Barrio.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Esta vez, para trabajar con la creación y configuración de nuestro Subtheme, utilizaremos el gestor de paquetes Composer, que comentábamos al principio de este artículo.

     Para realizar esta clase de operaciones, abriremos la consola y, una vez colocados dentro de la carpeta de nuestro proyecto, podremos ejecutar el siguiente comando para que comience la descarga de los archivos que vamos a utilizar:

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Siempre que utilicemos el gestor de paquetes Composer para descargar nuestros Themes o Módulos, creará automáticamente, si no existe, una carpeta llamada Contrib, referente a módulos o Themes contribuidos de Drupal. De esta forma mantiene separados los módulos y Themes, cuyo contenido no deberíamos modificar nunca directamente, del resto de módulos y Themes creados a partir de ellos y modificados por nosotros.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     A continuación, nos dirigiremos a la Página Oficial de Bootstrap Barrio, para leer y seguir los pasos necesarios en la creación del Subtheme.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Después de copiar los datos en el archivo create_subtheme.sh y seguir el resto de los pasos descritos en su página oficial, tendremos que llamar al archivo desde nuestra consola para que genere todos los demás componentes necesarios en nuestro nuevo Subtheme.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     En el momento en que termina la ejecución del archivo llamado desde nuestra consola, si volvemos a las carpetas de Drupal, dentro de la Carpeta "themes/contrib", podremos ver nuestro Subtheme listo para ser activado, desde url "/admin/appearance", tal y como hicimos anteriormente con el Theme Mayo.

     Encontraremos en la parte inferior de la pantalla, todos los themes disponibles para ser utilizados en nuestro proyecto y, dentro del listado de Themes desinstalados, estará, si todo ha ido bien, nuestro Theme personalizado.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Ahora podrás comprobar que tu nuevo Subtheme, además de tener diseño Responsivo, te brinda la posibilidad de personalizarlo al completo, para darle un aspecto funcional, práctico y novedoso a tus proyectos en Drupal.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

Añadir librerías y animaciones en Subtheme en Drupal 9

Video de Youtube
URL de Video remoto

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.

Drupal 9 | Preprocess functions

Video de Youtube
URL de Video remoto

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:

Imagen
Curso Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

          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

Paragraphs | Trabajando con Imágenes y color por interfaz

Video de Youtube
URL de Video remoto

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.

Imagen
Curso Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     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.

Imagen
Curso Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

           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.

Imagen
Curso Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

          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".

Imagen
Curso Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

          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.

Imagen
Curso Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

          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.

Imagen
Curso Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony
Imagen
Curso Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     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
Curso Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     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
Curso Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony