Aunque en mi opinión, una de las cosas que me enamoró de Drupal en cuanto lo conocí, es la posibilidad de manipular, personalizar y saber encontrar, prácticamente dónde y cuando ocurren la mayoría de sus funcionalidades, entiendo que el objetivo principal de cualquier herramienta de desarrollo, debería ser facilitarnos la vida, además de ofrecernos grandes posibilidades a nuestro alcance.

     Como cada proyecto requiere de diferentes requisitos para llevarse a cabo, y por lo general, uno de los más importantes, es el tiempo que tendremos que invertir hasta su puesta en producción, muchos desarrolladores web prefieren apostar por otros CMS o construir desde cero proyectos enteros, para sentir que tienen mayor control sobre sus creaciones.

     No obstante, creo que con un pequeño conocimiento sobre cómo instalar Drupal 9 usando Composer y un breve vistazo a cómo gestionar usuarios y permisos, complementado con la ayuda del Módulo Gutenberg, conocido mayormente por usuarios de Wordpress, podrías llegar a tener lo que haz estado buscando hace tiempo, una plataforma simple de manipular, pero potente, con posibilidad de adaptación a la mayoría de webs sencillas.

     Es por esta razón que a continuación, te voy a mostrar cómo puedes utilizar las opciones que integra este módulo a la interfaz de usuario, facilitándote de forma notable, la creación de nuevos contenidos en Drupal 9.

Descarga y Activación:

Para descargar y activar cualquier módulo de Drupal tienes varias opciones:

     Descarga:

          1.- La forma recomendada a partir de Drupal 8, es utilizando el gestor de paquetes Composer, ejecutando en tu consola el comando:

composer require drupal/gutenberg

          2.- Descargándolo manualmente el módulo desde la página oficial del Módulo Gutenberg y una vez descargado y colocado en carpeta "modules/contrib", si haz descargado todos tus módulos manualmente, deberías crear la carpeta "contrib", para que puedas diferenciar entre tus módulos personalizados y los que están disponibles directamente en la Página oficial de Drupal.
 

     Activación:

          1.- Utilizando la herramienta de consola Drush, la opción "-y" activará todos los sub-modulos automáticamente

drush en gutenberg -y

          2.- Desde la interfaz de usuario de Drupal, en la url "/admin/modules", y luego marcando el check junto al nombre de tu módulo y haciendo clic en el botón guardar que aparecer al final de la página.

Cómo utilizar Gutenberg

     Una vez activado el Módulo Gutenberg, veremos que se ha añadido una nueva opción, en la parte inferior izquierda de todos los contenidos, llamada Gutenberg Experience y que al activarla podremos ver dos listados con todos los nuevos bloques, tanto del propio módulo como de el núcleo de Drupal, que podremos activar o no, para que estén disponibles como parte de las opciones del tipo de contenido en que se han activado, modificando inmediatamente la interfaz de creación de dicho contenido.

     La idea principal de Gutenberg, es que convierte todos los elementos que podamos añadir, en bloques individuales, con sus propias opciones, disponibles en el momento en que seleccionamos dicho bloque o elemento, haciéndolo mucho más gráfico el método para añadir, modificar o reutilizar dicho elemento.

     Para comenzar a añadir contenidos o "Bloques" en nuestro tipo de contenido, veremos un símbolo de más dentro de un círculo y al hacer clic sobre éste, se desplegarán las diferentes opciones disponibles para agregar y una vez seleccionado el elemento que deseamos añadir y se añade, inmediatamente cambiará el panel de la derecha de la pantalla, adaptándose a las opciones disponibles para él.

     De entre sus opciones más llamativas, está la posibilidad de arrastrar directamente los elementos hasta la posición deseada desde el escritorio de tu ordenador, la integración con módulos como Media o Imagen, insertar directamente elementos embebidos como vídeos, sonidos, etc, o la posibilidad de crear "Bloques" de contenido reutilizables en cualquier otro lugar de la web.

     El objetivo de utilizar Gutenberg, es que todos tus tipos de contenido, sólo tengan el campo "Body" y dentro de este campo se podrán añadir, editar o eliminar el resto de elementos que se mostrará en tus páginas, incluyendo imágenes o incluso bloques del núcleo de Drupal.

Gutenberg Cloud

     Una de las opciones más novedosas de este módulo, es la posibilidad de añadir "bloques" de contenido, directamente desde su repositorio en la web Gutenbergcloud.org, mediante el sistema de CDN, por lo que dichos bloques, con características, estilos y funcionalidades prediseñados, no se guardan como el resto de contenidos en la base de datos de Drupal. Por el contrario, se añaden como etiquetas dentro del campo "BODY", que añade Drupal por defecto cada vez que creamos un nuevo tipo de contenido.

     Para añadir esta funcionalidad, sólo habría que activarla como cualquier otro módulo y una vez hecho esto, se añadirá como una de las opciones disponibles para agregar en el listado de bloques cuando hagamos clic en el selector.

     Por desgracia, esta funcionalidad no es compatible para todas las versiones de Drupal 9, por lo menos al momento de escribir este artículo. Pero sí podrás utilizarla en cualquier instalación de Drupal 8 o menor que la 9.1.

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 

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

     Ahora que ya hemos aprendido Cómo crear breakpoints y habilitarlos usando nuestro tema personalizado, el siguiente paso consistirá en crear y configurar, los estilos que se aplicarán en nuestras imágenes responsivas, para que Drupal pueda seleccionar y mostrar el tamaño adecuado en cada uno de los dispositivos.

     Los estilos permitirán reducir considerablemente el tiempo de descarga, tanto de las imágenes de nuestra web, como de la web misma, haciéndola más atractiva y útil para todos los usuarios, y lo más importante, sin perder el impacto que nos añaden unas buenas imágenes, a nivel gráfico, de cara al público que nos visita.

     Cuando trabajamos con Drupal, tenemos la posibilidad de crear estilos personalizados, para todas nuestras imágenes, que serán aplicados una vez las hayamos subido al servidor utilizando la interfaz de usuario, esto significa que, aunque nuestra imagen original fuera, por ejemplo, más ancha que alta, podríamos redimensionarla o recortarla, para que se ajustara a nuestras necesidades, sin la necesidad de utilizar ningún programa de retoque fotográfico.

     Además, los estilos de imágenes podrán ser reutilizados, manipulando la interfaz de usuario, en todo tipo de contenidos, vistas, bloques u otros elementos como paragraphs.

     Un ejemplo práctico en el que podríamos utilizar los estilos personalizados, sería una página web en la que los usuarios pudieran subir productos, o sus propias imágenes para un blog interactivo de cocina. Si dejáramos en manos de los usuarios el tamaño de las imágenes, podríamos arriesgarnos a romper la estética general de la web; pero si definimos las dimensiones exactas para las imágenes, siempre conservaremos la misma apariencia, ya que cada imagen subida se adaptaría automáticamente, una vez hayan sido guardados los cambios en el contenido recién creado por el usuario.

     Para definir los estilos que aplicaremos en nuestras imágenes dentro de Drupal, nos iremos a la url "/admin/config/media/image-styles", y desde allí podremos crear nuevos estilos, o reutilizar algunos de los que vienen creados por defecto, en todas las instalaciones de Drupal.

     Al definir estilos personalizados, es recomendable que utilicemos las medidas que vamos a aplicar, como parte del nombre del estilo, de esta forma será más fácil de identificarlos cuando los necesites.

     Aunque los estilos nos permiten modificar varias de las características, como la dimensión o la proporción de la imagen, entre otras, no nos convierten dichas imágenes en responsivas o adaptables, automáticamente. Es por esta razón que hemos habilitado el módulo Responsive Image, que está integrado como parte de los módulos del núcleo de Drupal, a partir de la versión 8, aunque no viene activado por defecto.

     Una vez hayamos activado dicho módulo, veremos que se añade otra opción relacionada con los archivos del tipo MEDIA, llamado Estilos adaptables de la imagen. Podremos comprobarlo desde la url "/admin/config/media", y si hacemos clic sobre el enlace, veremos una ventana parecida a la de los estilos de imagen, pero con dos nuevos tipos de estilo preconfigurados.

     Si luego hacemos clic en el botón editar del primero de los estilos, y luego desplegamos el selector llamado Grupo de salto de pantalla, veremos el listado de los temas disponibles en nuestro proyecto, y uno de ellos será nuestro tema personalizado, ya que lo hemos configurado previamente.

     Cómo crear estilos y aplicarlos a imágenes en cada Breakpoint o punto de quiebra.

             Ahora que ya conoces dónde y cómo se crean los estilos de imágenes, si queremos aplicarlos en nuestras imágenes responsivas, tendremos que hacerlo en dos fases:

     1.- Crear el estilo en los estilos de imágenes, para después añadirlos a nuestros estilos responsivos.
     Para ello, iremos a la url "/admin/config/media/image-styles", que mencionamos al principio de este artículo y crearemos varios estilos con el propósito de redimensionar nuestras imágenes proporcionalmente, equivalente a las medidas de cada uno de los Breakpoints o puntos de quiebra que hemos configurado.

2.- Crear nuestros estilos resposivos y configurarlos con sus respectivos Breakpoints o puntos de quiebra.
     Una vez hayamos creado todos los estilos de imagen, en nuestro caso, los seis estilos equivalentes a cada uno de los Breakpoints o puntos de quiebra, podremos, añadir nuestro primer Estilo adaptable a la imagen, por ejemplo Estilos Imagen Artículo y a continuación añadir en la siguiente pantalla, cada estilo asociado a cada Breakpoint.
 

     3.- Añadir el estilo que acabamos de configurar al campo imagen de nuestro contenido.
     Los estilos de las imágenes se aplicarán para la presentación del contenido, por lo tanto, seleccionaremos la pestaña "Gestionar Presentación", y a continuación, seleccionaremos "Imagen adaptable", en el selector para poder seleccionar luego el nombre del estilo que acabamos de crear.

     4.- Una vez guardados los cambios podremos comprobar, si exploramos el elemento en el navegador. Veremos que se ha añadido la etiqueta <picture> y que se mostrarán varias opciones en función del dispositivo en el que se esté mostrando nuestra web.