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
