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.
