themes

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

     Bootstrap sigue siendo una de las mejores alternativas, al momento de maquetar webs responsivas, ya que no necesitas tener conocimientos avanzados, para lograr maquetar de manera rápida, atractiva y funcional cualquier proyecto web.

     Al combinar las características y funcionalidades con Drupal, con Bootstrap, podrás realizar casi cualquier tipo de proyecto web, sin invertir demasiado tiempo, en añadirle una apariencia que cumpla con todos los estándares necesarios actualmente, para que obtengas los mejores resultados a nivel de la experiencia de usuario, posicionamiento, etc.

     En este tutorial, te explicaré todo lo que necesitarás acerca de la instalación del tema Bootstrap 5 y de cómo puedes generar, un subtema o tema personalizado para tus proyectos de Drupal 9 o superiores, sin tener que avandonar la interfaz de usuario de Drupal.

   Requerimientos:

• Tener un proyecto de Drupal 9 o superior funcionando.
• Tener acceso a la consola.
• Tener la posibilidad de ejecutar Composer, para la descarga e instalación de temas y módulos.

   Descarga e instalación de Bootstrap 5 para Drupal.

     Paso 1 - Descarga del Theme Bootstrap 5

        Una vez tengamos nuestro proyecto de Drupal 9 en funcionamiento, lo próximo será visitar la Página Oficial de Bootstrap 5, y a continuación, copiaremos el comando de instalación, para pegarlo y ejecutarlo en nuestra consola.     

 

 

 

      Una vez terminada la descarga, podrás comprobar que se han descargado todos los archivos necesarios, visitando en tu proyecto Drupal 9, la carpeta ubicada en "/web/themes/contrib", con el nombre bootstrap5.

 

   Paso 2 - Instalación del tema base

     Para poder generar el subtheme basado en Bootstrap 5, primero tendremos que activarlo. Para ello, nos dirigiremos a la página de configuración de los Themes en Drupal, ubicada en la url "/admin/appearance", donde veremos el listado de los módulos descargados, instalados y no instalados.

 

     Como sólo queremos instalar el Theme Bootstrap 5, porque lo necesitamos para generar el Subtheme, nos desplazaremos en la misma pantalla, hasta encontrarlo en el listado de módulos desinstalados y haremos clic en la opción Activar.

 

   Paso 3 - Generar el Subtheme o Tema personalizado

     La mayor ventaja, con respecto a otras versiones anteriores de Bootstrap para Drupal, es la opción de generar el Subtheme, sin la necesidad de avandonar la interfaz de usuario, ni ejecutar código a nivel de la consola, como require cuando trabajamos con Bootstrap Barrio.

     Para generar un Subtheme, haremos clic en el enlace de configuración, de Bootstrap 5, nos desplazaremos hasta el final de la página y buscaremos la pestaña llamada Subtheme, una vez desplegada la pestaña, podremos ver las opciones relacionadas con la ubicación, el nombre del subtheme y el nombre del sistema o nombre máquina.

 

 

 

   Paso - Comprobación

     Tan pronto como hayamos hecho clic en el botón Crear, se generarán los archivos de nuestro Subtheme, en la ubicación detallada al principio de la pestaña, es decir, dentro de "themes/custom"; si abrimos los archivos del proyecto, podremos verificar, que efectivamente, tendremos una carpeta con el nombre del subtheme y todos los archivos para su funcionamiento, una vez se haya activado.

 

     Para activar el nuevo Subtheme, solo tendremos que volver a la página de configuración, ubicada en "/admin/appearance", donde esta vez, encontraremos el recién generado subtheme, con todas las opciones de su tema base, donde podremos configurarlo y, además, añadir otras opciones específicas, disponibles en la pantalla de configuración de éste.

 

     Una vez tengamos añadidas todas las personalizaciones adicionales, podremos volver a nuestra página principal y comprobaremos dichos cambios.

     También podremos agregar más cambios, a través de los archivos CSS o Sass, que se han generado durante el proceso.

     Si quieres saber cómo trabajar con los Themes y Subthemes en Drupal, tienes disponbile este curso gratuito, donde he recopilado los principales videos y documentación relacionada, para que puedas profundizar, de forma rápida y aplicar lo aprendido en tus proyectos:

     Para acceder al curso, HAZ CLIC AQUI

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

     Bootstrap sigue siendo una de las mejores alternativas, al momento de maquetar webs responsivas, ya que no necesitas tener conocimientos avanzados, para lograr maquetar de manera rápida, atractiva y funcional cualquier proyecto web.

     Al combinar las características y funcionalidades con Drupal, con Bootstrap, podrás realizar casi cualquier tipo de proyecto web, sin invertir demasiado tiempo, en añadirle una apariencia que cumpla con todos los estándares necesarios actualmente, para que obtengas los mejores resultados a nivel de la experiencia de usuario, posicionamiento, etc.

     En este tutorial, te explicaré todo lo que necesitarás acerca de la instalación del tema Bootstrap 5 y de cómo puedes generar, un subtema o tema personalizado para tus proyectos de Drupal 9 o superiores, sin tener que avandonar la interfaz de usuario de Drupal.

   Requerimientos:

• Tener un proyecto de Drupal 9 o superior funcionando.
• Tener acceso a la consola.
• Tener la posibilidad de ejecutar Composer, para la descarga e instalación de temas y módulos.

   Descarga e instalación de Bootstrap 5 para Drupal.

     Paso 1 - Descarga del Theme Bootstrap 5

        Una vez tengamos nuestro proyecto de Drupal 9 en funcionamiento, lo próximo será visitar la Página Oficial de Bootstrap 5, y a continuación, copiaremos el comando de instalación, para pegarlo y ejecutarlo en nuestra consola.     

      Una vez terminada la descarga, podrás comprobar que se han descargado todos los archivos necesarios, visitando en tu proyecto Drupal 9, la carpeta ubicada en "/web/themes/contrib", con el nombre bootstrap5.

   Paso 2 - Instalación del tema base

     Para poder generar el subtheme basado en Bootstrap 5, primero tendremos que activarlo. Para ello, nos dirigiremos a la página de configuración de los Themes en Drupal, ubicada en la url "/admin/appearance", donde veremos el listado de los módulos descargados, instalados y no instalados.

     Como sólo queremos instalar el Theme Bootstrap 5, porque lo necesitamos para generar el Subtheme, nos desplazaremos en la misma pantalla, hasta encontrarlo en el listado de módulos desinstalados y haremos clic en la opción Activar.

   Paso 3 - Generar el Subtheme o Tema personalizado

     La mayor ventaja, con respecto a otras versiones anteriores de Bootstrap para Drupal, es la opción de generar el Subtheme, sin la necesidad de avandonar la interfaz de usuario, ni ejecutar código a nivel de la consola, como require cuando trabajamos con Bootstrap Barrio.

     Para generar un Subtheme, haremos clic en el enlace de configuración, de Bootstrap 5, nos desplazaremos hasta el final de la página y buscaremos la pestaña llamada Subtheme, una vez desplegada la pestaña, podremos ver las opciones relacionadas con la ubicación, el nombre del subtheme y el nombre del sistema o nombre máquina.

   Paso - Comprobación

     Tan pronto como hayamos hecho clic en el botón Crear, se generarán los archivos de nuestro Subtheme, en la ubicación detallada al principio de la pestaña, es decir, dentro de "themes/custom"; si abrimos los archivos del proyecto, podremos verificar, que efectivamente, tendremos una carpeta con el nombre del subtheme y todos los archivos para su funcionamiento, una vez se haya activado.

     Para activar el nuevo Subtheme, solo tendremos que volver a la página de configuración, ubicada en "/admin/appearance", donde esta vez, encontraremos el recién generado subtheme, con todas las opciones de su tema base, donde podremos configurarlo y, además, añadir otras opciones específicas, disponibles en la pantalla de configuración de éste.

     Una vez tengamos añadidas todas las personalizaciones adicionales, podremos volver a nuestra página principal y comprobaremos dichos cambios.

     También podremos agregar más cambios, a través de los archivos CSS o Sass, que se han generado durante el proceso.

     Si quieres saber cómo trabajar con los Themes y Subthemes en Drupal, tienes disponbile este curso gratuito, donde he recopilado los principales videos y documentación relacionada, para que puedas profundizar, de forma rápida y aplicar lo aprendido en tus proyectos:

     Para acceder al curso, HAZ CLIC AQUI

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

     A medida que vamos creciendo como profesionales, en el desarrollo o maquetación web, nos podremos encontrar con todo tipo de retos, poniendo a prueba nuestros conocimientos, capacidad de análisis, experiencia y sobre todo nuestra paciencia, hasta llegar a encontrar la mejor solución posible.

     Uno de los requerimientos más solicitados, es la optimización de recursos, que permitan acceder fácilmente al contenido publicado en cualquier página web, ya que el tiempo que transcurre, entre la descarga de la información desde un servidor y la presentación de los datos, en la pantalla de cualquier dispositivo, marcará el éxito o fracaso total del proyecto.

     Entre los recursos más valorados están las imágenes, ya que, además de hacer nuestra web más atractiva para los usuarios, también pueden llegar a provocar verdaderos dolores de cabeza, debido al posible incremento en el consumo de memoria, dependiendo de su calidad o tamaño. Por esta razón es importante encontrar el equilibrio entre lo atractivo y funcional.

     Drupal permite cargar imágenes utilizando dos tipos de campo, el campo de imagen simple, o field_image, que podremos encontrar dentro del tipo de contenido Artículo que viene en la instalación por defecto, o el campo de tipo Media, disponible para añadir en cualquier tipo de contenido al activar los módulos Media y Media Library, incluidos en el núcleo de Drupal a partir de la versión 8.

      A diferencia del field_image, el campo de tipo Media, permite subir, además de imágenes, otros formatos de archivos como videos o audio; y con la activación del Media Library, podremos acceder a una librería de archivos con vista previa, para poder elegir reutilizarlos cuando nos haga falta.

     Una de las maneras más efectivas para trabajar con imágenes, es la implementación del Media Query, que en pocas palabras, consiste en definiciones de varios tamaños, correspondientes a diversos dispositivos, que nos permitirán aplicar ciertos cambios en nuestras imágenes, ejecutados cuando se cumplan dichas especificaciones.

     Inicialmente, la Media Query estaba pensada para su aplicación directamente dentro de los archivos relacionados con estilos o CSS de nuestra web, pero todo cambió cuando apareció la etiqueta <picture>, que según su página oficial: "El elemento HTML <picture> es un contenedor usado para especificar múltiples elementos <source> y un elemento <img> contenido en él para proveer versiones de una imagen para diferentes escenarios de dispositivos. "

     Con la implementación de los Breakpoints o puntos de quiebra, Drupal se encargará de añadir la etiqueta <picture> automáticamente en nuestras imágenes, para que se muestren de acuerdo con el tamaño de cada dispositivo y con los estilos que hemos definido previamente, dentro del apartado /admin/config/media/image-styles.

     Cómo crear breakpoints y aplicarlos a imágenes y archivos Media en Drupal 9

          Prerequisitos:

               Activar los módulos Media, Media Library y Responsive Image, incluidos en el núcleo de Drupal 9.

 

          Paso 1 Configuración de los campos para trabajar con las imágenes:

               Tal y como mencionamos al principio, existen dos tipos de campos para trabajar con imágenes en Drupal, así que, añadiremos en el tipo de contenido Artículo, que ya nos viene por defecto con el campo field_image, un nuevo campo del tipo Media y cargaremos unas cuantas imágenes para poder realizar los ejemplos.

 

 

         Paso 2 Crear el subtheme y definir los breakpoints o puntos de quiebra:

               Como ya habrás imaginado, los breakpoints están relacionados con la apariencia de nuestra web, en Drupal, los responsables de esta tarea son los Themes o Temas, por lo que tienes dos opciones, o creas un Subtheme basándote en los que ya vienen instalados en Drupal, como haremos en este ejemplo o Descargas e instalas un nuevo Subtheme basándote en otro como Bootstrap, Mayo, etc.

 

               En ambos casos, para definir los Breakpoints tendrás que crear, dentro de la carpeta raíz del subtheme que hayas seleccionado, un archivo llamado "MISUBTEMA.breakpoints.yml" ....

 

          y dentro de él simplemente tendrás que definir, los diferentes Breakpoints, siguiendo una estructura como la que te muestro a continuación:

drupaladicto.mobile:
  label: 'Mobile'
  mediaQuery: '(min-width: 0px)'
  weight: 0
  multipliers:
    - 1x
    - 2x

drupaladicto.narrow:
  label: 'Narrow'
  mediaQuery: 'all and(min-width: 560px) and (max-width: 850px)'
  weight: 1
  multipliers:
    - 1x
    - 2x

drupaladicto.wide:
  label: 'Wide'
  mediaQuery: 'all and (min-width: 851px)'
  weight: 2
  multipliers:
    - 1x
    - 2x

     Explicación: La estructura del archivo equivale al nombre de cada breakpoint, compuesto por el nombre de nuestro subthema seguido de un punto y el nombre del punto de quiebra o breakpoint equivalente.

     En la línea siguientes a la declaración del Breakpoint, escribimos el Label o nombre que se mostrará en la interfaz, cuando estemos definiendo los estilos de imágenes responsivas o adaptables.

     En la siguiente línea es donde declaramos el o los tamaños correspondientes, para ejecutar nuestras modificaciones.

     En la siguiente línea, especificamos el "peso" u orden de aparición de las diferentes opciones en el listado de Breakpoints que veremos en la interfaz.

     Por últimos, definimos los tamaños, por ejemplo, para el dispositivo en posición vertical y luego en posición horizonal, donde siginficará el doble del tamaño anterior.   

     Paso 3 Activar el subtheme y comprobar que se han añadido los breakpoints:

          Lo siguiente que tendrás que hacer, ahora que ya tienes todos los breakpoints definidos en el archivo de tu subtheme, es activarlo y comprobar que se han añadido al listado correspondiente de estilos.

          Para comprobar si se han añadido los estilos, una vez activado nuestro subtheme, nos dirigiremos a la url /admin/config/media/responsive-image-style, donde haremos clic en el botón