Si estás utilizando en tu proyecto Drupal, el módulo Blazy, es posible que al actualizar estos días, ejecutando drush cr, te encuentres con un error como el siguiente:
Failed to unlink file 'assets://css/css_bJuR0RV2z_DaejZa9C4pOx_HkDoRBGXRXK6
U9yZ6e9I.css'.
Añade la funcionalidad de reutilizar tus imágenes para todos tus contenidos.
Sabías que, aunque ya existe un campo field_image, en nuestros contenidos por defecto de Drupal 9, también existe la posibilidad de añadir otro campo mucho más potente, gracias a los módulos incluidos en el Núcleo de Drupal, llamados Media y Media Library y que al activarlos, además de permitir agregar y reutilizar imágenes, también nos ofrece la oportunidad de utilizar formatos de Video externo o local, archivos de audio y muchas otras posiblidades?
Es por esto que en esta ocasión, te comentaré cómo instalar y configurar un campo de imágenes, para tus contenidos, utilizando estos dos módulos, que ya te vienen por defecto en Drupal 9, pero que tendrás que activarlos si quieres comenzar a utilizarlos.
A diferencia de otros módulos, en esta ocasión, sólo tendremos que acceder a la url "/admin/modules", y una vez allí, buscaremos en el filtro el nombre de ambos y podremos activarlos de inmediato.
Una vez activados, podremos añadir nuevos campos de tipo Media, en todos nuestros contenidos. Pero antes, hechemos un vistazo al listado de archivos de tipo Media. Para ello, accederemos a la url "/admin/content/media", donde veremos el listado de todos los archivos cargados a través del módulo, en formato Tabla o Cuadrícula.
Desde este listado, podremos ejecutar cambios en Bloque o por grupos, seleccionando ya sea por medio de filtros o marcando el check junto a cada uno de los nombres, como podemos hacer cuando estamos dentro del listado de contenidos de Drupal. Además, contamos con un buscador y un filtro que funcionan de la misma manera que en contenidos.
El campo media, se añade igual que cualquier otro campo, seleccionaremos añadir campo y a continuación la nueva opción Media, que veremos en el desplegable.
Los siguientes pasos en la configuración, variarán en función de lo que esperamos añadir, por ejemplo un campo para una sola imagen, un video, un archivo de audio o varias imágenes.
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.
Activar los módulos Media, Media Library y Responsive Image, incluidos en el núcleo de Drupal 9.
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.
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.
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 estás acostumbrado a trabajar con Boostrap, es posible, que algunas ocasiones, tengas que ajustar el tamaño de las imágenes, para que se adapten al contenedor dentro de una tarjeta .card, de bootstrap.
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.
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.
Este código te permite acceder a la url de la imagen e imprimirla desde una plantilla tipo views-field
Este código te permitirá imprimir el logo y el nombre del sitio utilizando en cualquier página de Drupal 8 y 9, recuerda que si necesitas utilizarlo en otro contenido que no sea una página, entonces la preprocess_function() deberá corresponderse con ese tipo de contenido.
Este código permite imprimir una imagen de fondo utilizando vistas y plantillas mediante la declaración de una variable.
