Puntos de ruptura en Drupal: cómo elegir los tuyos y usarlos para la dirección de arte

En la guía de imágenes adaptables en Drupal configuramos estilos de imagen, un estilo adaptable con sizes y un modo de visualización de Multimedia, y no tuvimos que definir ni un solo punto de ruptura. Esa configuración sirve para casi todas las imágenes de casi todos los sitios.

Este artículo es para el paso siguiente: saber dónde cambia tu diseño, escribir esos anchos de forma que Drupal los entienda y usarlos para el único trabajo en el que los puntos de ruptura importan de verdad en el módulo Responsive Image: mostrar un recorte distinto de la imagen en cada pantalla. Es lo que se llama dirección de arte.

Como en la primera guía, damos los menús como aparecen en la administración en español, con el nombre en inglés entre paréntesis.

Qué es un punto de ruptura (y qué no es)

Un punto de ruptura (breakpoint) es el ancho de pantalla en el que el diseño deja de funcionar tal como está y tiene que cambiar: una columna pasa a ser dos, el menú se convierte en un botón, una línea de texto se alarga tanto que ya no se lee con comodidad.

Un punto de ruptura no es un aparato. Las listas del tipo «iPhone 375, iPad 768, ordenador 1024» se quedan viejas con cada modelo nuevo, y los aparatos que caen entre medias siempre acaban viéndose mal. Los anchos que importan son aquellos en los que se rompe tu contenido, y no son los mismos para una cuadrícula de recetas que para un artículo largo.

La mayoría de los temas actuales, Olivero incluido, están escritos pensando primero en el móvil (mobile first): el CSS empieza con el diseño para pantallas pequeñas y va añadiendo cambios con consultas min-width a medida que la pantalla crece. Cada uno de esos valores min-width es un punto de ruptura. Si el CSS de tu tema dice @media (min-width: 700px), 700 píxeles es uno de tus puntos de ruptura, esté escrito en otro sitio o no.

Los puntos de ruptura en Drupal: el archivo

Tu CSS ya usa puntos de ruptura, pero Drupal no lee el CSS. Cuando un módulo necesita conocerlos (en la práctica, Responsive Image), el tema o el módulo los declara en un archivo YAML que lleva su nombre de sistema: mitema.breakpoints.yml, en la carpeta raíz del tema.

Este es un fragmento real del archivo de Olivero en Drupal 11:

olivero.sm:
  label: Small
  mediaQuery: 'all and (min-width: 500px)'
  weight: 0
  multipliers:
    - 1x
olivero.md:
  label: Medium
  mediaQuery: 'all and (min-width: 700px)'
  weight: 1
  multipliers:
    - 1x
olivero.lg:
  label: Large
  mediaQuery: 'all and (min-width: 1000px)'
  weight: 2
  multipliers:
    - 1x

Cada entrada tiene un nombre de sistema (olivero.sm) y cinco claves:

label: el nombre que aparece en los formularios de la administración.
mediaQuery: la condición CSS, tal como la escribirías después de @media.
weight: el orden. Tiene que crecer con el ancho: la pantalla más pequeña lleva el peso más bajo. El módulo Responsive Image lo usa para ordenar los puntos de ruptura, así que un peso equivocado hace que al navegador se le ofrezca la imagen equivocada.
multipliers: las densidades de píxeles que quieres servir con ese ancho. 1x para pantallas normales y 2x para las de alta densidad; también existe 1.5x. Cada multiplicador tendrá después su propio estilo de imagen.
group (opcional): el grupo al que pertenece el punto de ruptura. Si no se indica, va a un grupo con el nombre del tema.

Los grupos de puntos de ruptura

Un grupo es un conjunto de puntos de ruptura pensado para una finalidad. Cuando creas un estilo de imagen adaptable, lo primero que Drupal te pregunta es qué grupo usar, y el formulario muestra luego una fila por cada punto de ruptura de ese grupo.

Lo normal es encontrarse con tres tipos de grupo:

Responsive image. Viene con el módulo y tiene un único punto de ruptura, Viewport Sizing, con la consulta vacía. Es el grupo de la configuración con sizes, en la que no se asigna nada a los puntos de ruptura. Los estilos Narrow y Wide del núcleo lo usan.
El grupo de tu tema base. Si tu tema es un subtema de Olivero, verás el de Olivero. Su archivo completo tiene ocho entradas: Small (500), Medium (700), Large (1000), X-Large (1300), y otras para la navegación (500 y 1200) y la cuadrícula (700 y 1440). Mezcla puntos de ruptura del diseño y de la navegación en un mismo grupo, y por eso no todas las filas sirven para las imágenes.
El grupo de tu propio tema, en cuanto escribas el archivo. Ahí eliges exactamente los anchos que necesitan tus imágenes.

Una nota para dentro de poco: Drupal 12 saca Olivero del núcleo y lo convierte en un proyecto contribuido (drupal/olivero, versión 2.0), con los mismos puntos de ruptura y ajustes. Si tu sitio usa Olivero o un subtema suyo, añade ese proyecto antes de actualizar.

Cómo elegir tus puntos de ruptura

Empieza por el contenido, no por una lista de aparatos:

Abre una página típica en el navegador y estrecha la ventana todo lo que se pueda.
Ensánchala poco a poco. Cada vez que algo empiece a verse mal (líneas demasiado largas, tarjetas demasiado anchas, demasiado espacio vacío), apunta el ancho. Es un punto de ruptura candidato.
Compara tus notas con los valores min-width que ya tiene el CSS del tema. Donde estén cerca, usa el del CSS: la imagen y el diseño deben cambiar en el mismo punto.
Quédate con tres o cuatro. Cada punto de ruptura que uses para la dirección de arte supone más estilos de imagen que crear y mantener.

Un detalle sobre las unidades. Muchos temas escriben sus consultas en rem (los 43.75rem de Olivero son 700 píxeles con el tamaño de letra por defecto de 16). El archivo YAML acepta cualquiera de las dos; usa la misma unidad que tu CSS para que no puedan desajustarse.

Cómo escribirlos en tu tema

Para un subtema con una imagen de portada que tiene que cambiar de recorte en móviles, tabletas y ordenadores, el archivo puede ser así de corto:

mitema.mobile:
  label: Mobile
  mediaQuery: 'all'
  weight: 0
  multipliers:
    - 1x
    - 2x
mitema.tablet:
  label: Tablet
  mediaQuery: 'all and (min-width: 700px)'
  weight: 1
  multipliers:
    - 1x
    - 2x
mitema.desktop:
  label: Desktop
  mediaQuery: 'all and (min-width: 1000px)'
  weight: 2
  multipliers:
    - 1x
    - 2x

Tres cosas en las que fijarse:

El primer punto de ruptura no tiene ancho ('all'): cubre todo lo que queda por debajo del siguiente. Es el punto de partida de «primero el móvil».
Los pesos suben con el ancho: 0, 1, 2.
Todos los puntos de ruptura ofrecen 1x y 2x, porque los móviles y muchos portátiles tienen pantallas de alta densidad.

Guarda el archivo como mitema.breakpoints.yml (con el nombre de sistema de tu tema), vacía las cachés (drush cr) y abre el formulario para añadir un estilo de imagen adaptable. El grupo de tu tema debería aparecer ya en la lista Grupo de puntos de ruptura (Breakpoint group). Si no está, revisa el nombre del archivo: tiene que coincidir exactamente con el nombre de sistema del tema.

Dirección de arte: un recorte para cada pantalla

Con sizes, el navegador elige entre copias del mismo recorte. La dirección de arte es para cuando lo que tiene que cambiar es el recorte. El caso típico es una portada ancha: en un ordenador, una foto 16:9 de una mesa llena de platos luce generosa, pero en un móvil esa misma foto se queda en una tira estrecha en la que no se ve la comida. Un recorte más alto para el móvil lo arregla.

Compensa el trabajo extra para un puñado de imágenes: la portada de inicio, las cabeceras de sección, quizá un artículo destacado. Para tarjetas y resúmenes, no.

Paso 1: un estilo de imagen por recorte y densidad

Siguiendo los puntos de ruptura de antes, una portada podría usar:

Punto de ruptura	Recorte	1x	2x
Móvil	4:5	640 × 800	1280 × 1600
Tableta	3:2	1000 × 667	2000 × 1333
Ordenador	16:9	1600 × 900	3200 × 1800

Créalos en Configuración → Multimedia → Estilos de imagen (Configuration → Media → Image styles) con Escalar y recortar (Scale and crop) y Convertir (Convert) a WebP, como en la primera guía. Ponles nombre según su uso: Hero mobile, Hero mobile 2x, y así.

Escalar y recortar corta desde el centro. Si el motivo de tus fotos suele estar descentrado, el módulo contribuido Focal Point permite a los editores marcar el punto importante de cada imagen, y los recortes lo mantienen a la vista.

Paso 2: el estilo de imagen adaptable

En Configuración → Multimedia → Estilos de imagen adaptables → Añadir estilo de imagen adaptable(Configuration → Media → Responsive image styles → Add responsive image style):

Etiqueta (Label): Hero.
Grupo de puntos de ruptura (Breakpoint group): el grupo de tu tema.
El formulario muestra ahora un bloque por cada punto de ruptura y multiplicador: Mobile 1x, Mobile 2x, Tablet 1x, etc. En cada uno, elige Seleccionar un solo estilo de imagen (Select a single image style) y escoge el estilo que le corresponde. Para un punto de ruptura que no quieras usar, elige No usar este punto de ruptura (Do not use this breakpoint).
Estilo de imagen de respaldo (Fallback image style): Hero mobile, la imagen que reciben los navegadores antiguos.

Después, igual que con las tarjetas, crea un modo de visualización de Multimedia (Hero) que use este estilo adaptable, y úsalo allí donde aparezca la portada.

Lo que genera Drupal

En lugar de una sola etiqueta <img>, Drupal escribe ahora un elemento <picture>:

<picture>
  <source srcset="hero-desktop.webp 1x, hero-desktop-2x.webp 2x"
          media="all and (min-width: 1000px)" type="image/webp">
  <source srcset="hero-tablet.webp 1x, hero-tablet-2x.webp 2x"
          media="all and (min-width: 700px)" type="image/webp">
  <source srcset="hero-mobile.webp 1x, hero-mobile-2x.webp 2x"
          media="all" type="image/webp">
  <img src="hero-mobile.webp" alt="Una mesa llena de platos" width="640" height="800">
</picture>

(Con los nombres de archivo acortados.) El navegador lee los elementos <source> de arriba abajo y usa el primero cuyo media se cumple. Por eso importa el orden, y por eso Drupal los ordena por peso con el punto de ruptura más ancho primero. La etiqueta <img> del final lleva el texto alt y la imagen de respaldo.

Cómo combinar los dos métodos

Los dos métodos no se excluyen. En cada punto de ruptura puedes elegir Seleccionar varios estilos de imagen y usar el atributo sizes (Select multiple image styles and use the sizes attribute) en lugar de un solo estilo. Por ejemplo, el recorte de ordenador podría ofrecer versiones de 1280, 1600 y 2400 píxeles con sizes="100vw", mientras el de móvil se queda con un solo estilo. Drupal escribe entonces un srcset con anchos y un atributo sizes dentro del <source> de ese punto de ruptura.

Es útil cuando un punto de ruptura abarca pantallas muy distintas, normalmente el de ordenador.

Cómo comprobarlo

Barra de dispositivos de las herramientas de desarrollo: cambia entre un ancho de móvil, de tableta y de ordenador y mira cómo cambia el recorte. Pon la densidad de píxeles en 2 para comprobar los archivos 2x.
currentSrc: selecciona la etiqueta <img> que hay dentro de <picture> y lee currentSrc en el panel de propiedades; muestra el archivo que se está usando de verdad.
Panel de red, filtrado por imágenes: recarga en cada ancho y comprueba que solo se descarga un archivo de portada, y que es el correcto.
Cambia el ancho despacio en cada punto de ruptura: el recorte tiene que cambiar justo donde cambia el diseño.

Problemas frecuentes

Puntos de ruptura copiados de una lista de aparatos. El diseño se rompe entre los anchos «compatibles». Elige los anchos donde se rompe tu contenido.
El grupo no aparece en el formulario. Vacía las cachés y comprueba que el nombre del archivo coincide con el nombre de sistema del tema.
Pesos en el orden equivocado. El navegador recibe los <source> en un orden raro y elige el recorte que no es. Los pesos tienen que subir con el ancho.
Rangos con min y max. Los puntos de ruptura de Stark usan rangos como min-width: 480px and max-width: 959px. Cuestan más de mantener y es fácil dejar un hueco entre ellos. Mejor escalones de min-width.
Dirección de arte para todo. Decenas de estilos de imagen sin ninguna ganancia visible. Resérvala para las imágenes cuyo recorte de verdad tiene que cambiar.
Olvidarse del 2x. Nítida en el ordenador, borrosa en el móvil. Añade el multiplicador 2x y sus estilos.

Lista de comprobación

Puntos de ruptura elegidos donde se rompe el contenido, coincidiendo con el CSS del tema.
mitema.breakpoints.yml con tres o cuatro entradas, pesos que suben con el ancho, 1x y 2x.
Cachés vaciadas; el grupo del tema aparece en el formulario del estilo adaptable.
Un estilo de imagen por recorte y densidad, en WebP.
Estilo de imagen adaptable con el grupo del tema, un estilo por punto de ruptura y multiplicador, y uno de respaldo.
Un modo de visualización de Multimedia que lo use, colocado donde aparece la portada.
Comprobado en las herramientas de desarrollo en cada punto de ruptura y densidad.

Dónde aprender más

Casi todo lo que hay está en inglés:

Imágenes adaptables en Drupal: qué hacer después de activar el módulo, nuestra primera guía.
Working with breakpoints in Drupal, en drupal.org.
Responsive images, la página oficial del módulo.
Responsive image best practices for Drupal, de Four Kitchens, con la dirección de arte usando el grupo del tema.
Olivero, el proyecto contribuido para Drupal 12.

Jueves, 27 Marzo 2025 - 09:46

ChangedDomingo, 25 Octubre 2026 - 00:26