Vista previa de tema responsivo
Proporciona un componente que previsualiza páginas en varias dimensiones de dispositivos, permitiendo a los constructores de sitios y editores de contenido ver cómo aparecerá su contenido en diferentes dispositivos.
responsive_preview
Install
composer require 'drupal/responsive_preview:^2.3'
Overview
El módulo Responsive Preview proporciona una forma rápida y conveniente de previsualizar cualquier página de su sitio Drupal dentro de las dimensiones de dispositivos móviles populares y tamaños de pantalla. Esto es esencial para flujos de trabajo de diseño web responsivo, permitiendo a los editores de contenido y constructores de sitios verificar cómo se renderiza el contenido en diferentes dispositivos sin salir del navegador.
El módulo se integra perfectamente con la barra de herramientas de Drupal, agregando un botón de vista previa de dispositivos que revela una lista desplegable de dispositivos configurados. Al seleccionar un dispositivo se abre una superposición de iframe que muestra la página actual en las dimensiones del viewport del dispositivo, con el escalado de densidad de píxeles adecuado. La vista previa incluye controles para rotar entre orientaciones vertical y horizontal y muestra información del dispositivo como dimensiones y DPI.
Para formularios de edición de nodos, el módulo proporciona una integración especial que permite previsualizar cambios de contenido no guardados activando la funcionalidad de vista previa del nodo antes de mostrarla en el marco de vista previa responsiva. Esto asegura que los editores puedan ver exactamente cómo aparecerán sus cambios en dispositivos móviles antes de guardar.
Features
- Previsualizar cualquier página en varias dimensiones de viewport de dispositivos usando una superposición de iframe
- Integración con la barra de herramientas con selector de dispositivos desplegable accesible desde cualquier página no administrativa
- Soporte para rotación de dispositivos entre orientaciones vertical y horizontal
- Biblioteca de dispositivos configurable con smartphones y tablets populares preconfigurados
- Interfaz de administración de dispositivos para agregar, editar, eliminar y reordenar dispositivos
- Integración con formularios de edición de nodos para previsualizar cambios de contenido no guardados
- Bloque de vista previa responsiva para colocar en cualquier lugar del sitio
- Escalado automático para páginas no responsivas para simular el renderizado real del dispositivo
- Soporte para el módulo Navigation del core de Drupal mediante submódulo opcional (Drupal 10.3+)
- Atajo de teclado (tecla Esc) para cerrar la vista previa
- Modo de vista previa limpio que oculta la barra de herramientas, navegación y enlaces contextuales en el iframe
Use Cases
Vista previa móvil para editor de contenido
Un editor de contenido está creando un nuevo artículo con imágenes y formato complejo. Antes de publicar, hace clic en el botón de vista previa responsiva en la barra de herramientas, selecciona 'iPhone XS' del desplegable y ve exactamente cómo aparecerá el contenido en dispositivos móviles. Nota que una imagen es demasiado ancha y la ajusta antes de guardar, asegurando una buena experiencia móvil.
Pruebas responsivas para desarrollador de temas
Un desarrollador de temas está construyendo un tema Drupal responsivo y necesita probar puntos de quiebre en múltiples dispositivos. Usa la vista previa responsiva para cambiar rápidamente entre viewports de teléfono, tablet y escritorio sin necesitar dispositivos físicos o DevTools del navegador, acelerando su flujo de trabajo de desarrollo.
Demostración al cliente
Un constructor de sitios está presentando un nuevo sitio web a un cliente. Usando la vista previa responsiva, demuestra cómo se ve el sitio en varios dispositivos durante una sesión de pantalla compartida, rotando entre orientaciones vertical y horizontal para mostrar que el diseño responsivo se adapta correctamente.
Pruebas de QA en formularios de edición de nodos
Un tester de QA está verificando el comportamiento responsivo del contenido en borrador. En el formulario de edición del nodo, hace clic en un dispositivo en el desplegable de vista previa responsiva. El módulo activa el sistema de vista previa del nodo y muestra el contenido no guardado en el marco de vista previa responsiva, permitiendo probar cambios no publicados.
Configuración de dispositivo personalizado
Una agencia frecuentemente construye sitios para un cliente empresarial específico cuyos empleados usan un modelo particular de tablet. El administrador del sitio agrega un perfil de dispositivo personalizado que coincide con esas dimensiones exactas y densidad de píxeles, asegurando que las vistas previas representen con precisión los dispositivos objetivo.
Tips
- La vista previa solo muestra dispositivos que pueden caber dentro del ancho actual de su ventana del navegador. Si un dispositivo está deshabilitado/grisáceo, amplíe la ventana del navegador.
- Use la tecla Esc para cerrar rápidamente la superposición de vista previa responsiva.
- Haga clic en la etiqueta del dispositivo en el marco de vista previa para alternar la visualización de especificaciones detalladas del dispositivo.
- La vista previa respeta la meta etiqueta viewport del sitio - los sitios responsivos escalan diferente que los sitios de ancho fijo.
- Para usuarios del módulo Navigation (Drupal 10.3+), habilite el submódulo Responsive Preview Navigation para controles integrados en la barra superior.
- Las dimensiones del dispositivo se especifican en píxeles físicos, no píxeles CSS. Un iPhone XS de 1125x2436 a 3dppx se muestra como 375x812 píxeles CSS.
- El módulo oculta automáticamente la barra de herramientas, navegación y enlaces contextuales dentro del iframe de vista previa para una vista limpia.
Technical Details
Admin Pages 4
/admin/config/user-interface/responsive-preview
Página principal de administración para gestionar dispositivos de vista previa responsiva. Muestra una tabla arrastrable que lista todos los dispositivos configurados con sus dimensiones y estado. Permite reordenar dispositivos mediante arrastrar y soltar, alternar la visibilidad del dispositivo en la lista de vista previa, y proporciona operaciones para editar y eliminar dispositivos.
/admin/config/user-interface/responsive-preview/add
Formulario para crear un nuevo perfil de dispositivo para vista previa responsiva. Permite especificar nombre del dispositivo, dimensiones, densidad de píxeles y orientación predeterminada.
/admin/config/user-interface/responsive-preview/{device}/edit
Formulario para modificar la configuración de un perfil de dispositivo existente incluyendo dimensiones, densidad de píxeles y visibilidad.
/admin/config/user-interface/responsive-preview/{device}/delete
Formulario de confirmación para eliminar permanentemente un perfil de dispositivo del sistema.
Permissions 2
Hooks 4
hook_toolbar
Implementa hook_toolbar() para agregar la pestaña de vista previa responsiva a la barra de herramientas de Drupal. Agrega selector desplegable de dispositivos con controles de vista previa.
hook_theme
Implementa hook_theme() para registrar la plantilla de tema item_list__responsive_preview para renderizar la lista de dispositivos.
hook_form_alter
Implementa hook_form_alter() para agregar activación de vista previa responsiva basada en AJAX a formularios de edición de nodos, habilitando vista previa de contenido no guardado.
hook_preprocess_html
Implementa hook_preprocess_html() para eliminar barra de herramientas, navegación y enlaces contextuales al ver contenido en modo de vista previa responsiva.