Display Suite
Display Suite te permite tomar control total sobre cómo se muestra tu contenido utilizando una interfaz de arrastrar y soltar.
ds
Install
composer require 'drupal/ds:8.x-3.32'
Overview
Display Suite proporciona una forma potente y flexible de controlar cómo se muestran el contenido, los usuarios y otras entidades en Drupal. Extiende el Field UI del núcleo para dar a los constructores de sitios más control sobre las visualizaciones de entidades, permitiéndoles seleccionar diseños, crear campos personalizados y aplicar plantillas de campo.
Con Display Suite, puedes seleccionar diferentes diseños para tu contenido (1-4 columnas, apilados, variantes fluidas), arrastrar y soltar campos en diferentes regiones, crear campos dinámicos (campos Token, Twig, Block o Copy) y controlar la salida del marcado HTML con plantillas de campo. Se integra con Views para proporcionar opciones avanzadas de estilizado de filas de entidades con modos de vista alternantes, agrupación y renderizado de idiomas.
Display Suite funciona como una capa sobre el sistema de visualización de entidades del núcleo de Drupal, almacenando su configuración como ajustes de terceros en las visualizaciones de entidades. Proporciona su propio sistema de plugins para crear campos DS personalizados que pueden mostrar valores calculados, bloques o cualquier contenido personalizado.
Features
- Interfaz de arrastrar y soltar para organizar campos en regiones de diseño en la pantalla Manage Display
- Múltiples diseños integrados incluyendo diseños de 1, 2, 3 y 4 columnas con variantes apiladas, fluidas y de ancho igual
- Creación de campos personalizados: campos Token, campos Twig, campos Block y campos Copy para reutilizar definiciones de campos existentes
- Plantillas de campo (Default, Minimal, Expert, Reset) para controlar la salida del marcado de campos individuales con contenedores, clases y atributos
- Integración con Views mediante el plugin DS Entity Row que soporta modos de vista alternantes, agrupación, campos delta y control avanzado de renderizado
- Clonación de diseños para copiar configuraciones de visualización entre modos de vista
- Modo de emergencia para desactivar temporalmente el renderizado de Display Suite
- Gestión de clases CSS para regiones y campos
- Soporte de Token y Twig para contenido dinámico en campos personalizados
- Integración con Layout Discovery para usar cualquier diseño registrado
Use Cases
Creación de un diseño de artículo con múltiples columnas
Utiliza Display Suite para crear un diseño de dos o tres columnas para tipos de contenido de artículos. Navega a Admin > Structure > Content types > Article > Manage display, selecciona un layout de DS (por ejemplo, Two column stacked), luego arrastra tus fields a las regiones apropiadas (header para el título, columna izquierda para el contenido principal, columna derecha para metadatos como autor y fecha, footer para etiquetas). Guarda y visualiza un artículo para ver el nuevo diseño.
Agregar un field computado personalizado
Crea un Twig field en Admin > Structure > Display Suite > Fields > Add twig field. Nómbralo 'Reading Time', selecciona el tipo de Entity 'Node', e ingresa código Twig como '{{ (entity.body.value|striptags|split(' ')|length / 200)|round }} min read'. Este field puede entonces colocarse en cualquier display de Node para mostrar el tiempo estimado de lectura.
Incrustar un Block en el display de Entity
Usa un Block field para incrustar un Block directamente en el display de tu Entity. Ve a Admin > Structure > Display Suite > Fields > Add block field, selecciona un Block (por ejemplo, un Block de View de contenido relacionado o un Block personalizado), luego coloca este field en el display de tu Entity como cualquier otro field.
Crear teasers alternados en Views
En un listado de Views, usa el formato DS Entity Row y habilita 'Alternating view mode'. Configura diferentes view modes para filas impares y pares (por ejemplo, Teaser y Teaser Alternate) para crear variedad visual en los listados de contenido.
Controlar el markup de fields con la plantilla Expert
Habilita las plantillas de field en la configuración de DS, luego en Manage Display, haz clic en el engranaje de configuración de un field y selecciona la plantilla 'Expert'. Configura los wrappers externos (div, span, etc.), agrega clases personalizadas como 'field-featured', establece atributos y agrega HTML de prefijo/sufijo para un control completo sobre la salida del field.
Selección de view mode por Node
Habilita el submódulo DS Switch View Mode, crea múltiples view modes para Nodes (por ejemplo, Full, Full with sidebar, Landing page), luego al editar un Node, usa la sección 'Display settings' para seleccionar qué view mode debe usarse al visualizar ese Node específico.
Clonar configuración de display
Después de configurar un diseño complejo para un view mode, usa la función 'Clone layout' para copiarlo a otro view mode. En Manage Display, cuando no hay ningún layout seleccionado, elige un view mode de origen del menú desplegable Clone layout para duplicar la configuración.
Tips
- Usa la opción 'Disable layout CSS styles' cuando tu Theme proporcione su propio sistema de grid responsive para evitar conflictos de CSS.
- El Reset layout y Reset field template producen contenido con markup mínimo - útil cuando deseas control completo vía CSS/JS o cuando produces salida hacia una API.
- Los Token fields se procesan en tiempo de renderizado, por lo que funcionan bien para contenido dinámico como 'Publicado hace X tiempo' o contenido condicional basado en valores de fields.
- Los Twig fields tienen acceso al objeto Entity completo, haciéndolos poderosos para displays computados complejos sin escribir código personalizado.
- Los Copy fields te permiten reutilizar una definición de DS field en múltiples tipos de Entity sin recrearla.
- La plantilla Expert field soporta reemplazo de tokens en clases y atributos de wrapper para estilizado dinámico basado en datos de la Entity.
- Usa ui_limit en fields personalizados para restringirlos a bundles o view modes específicos, manteniendo la Field UI más limpia.
- Al depurar, la pestaña Markup de DS Devel muestra la salida HTML real, lo cual es invaluable para theming y solución de problemas.
- El hook ds_classes_alter permite a los módulos o Themes agregar clases CSS conscientes del contexto de forma dinámica.
- DS almacena la configuración como third-party settings en los displays de view de Entity, haciéndola completamente exportable con la gestión de configuración del core.
Technical Details
Admin Pages 9
/admin/structure/ds
Página principal de administración de Display Suite que lista todos los tipos de entidad y bundles. Proporciona acceso rápido para gestionar la configuración de visualización de cada bundle de entidad.
/admin/structure/ds/settings
Configura los ajustes globales de Display Suite incluyendo valores predeterminados de plantillas de campo, modo de emergencia y opciones de gestión de clases.
/admin/structure/ds/classes
Define clases CSS personalizadas que pueden aplicarse a regiones de diseño y campos en las páginas de Administrar visualización.
/admin/structure/ds/fields
Gestiona campos personalizados de Display Suite incluyendo campos Token, campos Twig, campos de bloque y campos de copia.
/admin/structure/ds/fields/manage_token
Crea un campo personalizado que usa reemplazos de Token para mostrar contenido dinámico.
/admin/structure/ds/fields/manage_twig
Crea un campo personalizado usando sintaxis de plantilla Twig para contenido dinámico avanzado.
/admin/structure/ds/fields/manage_block
Crea un campo personalizado que renderiza un plugin de bloque dentro de las visualizaciones de entidad.
/admin/structure/ds/fields/manage_copy
Crea un campo que copia la salida de un campo de Display Suite existente.
/admin/structure/ds/emergency
Controles de emergencia para desactivar temporalmente el renderizado de Display Suite en todo el sitio. Útil para depurar bucles infinitos o problemas de visualización.
Permissions 3
Hooks 7
hook_ds_fields_info_alter
Altera las definiciones de campo de DS antes de que se almacenen en caché. Úselo para modificar propiedades de campo o agregar nuevos campos programáticamente.
hook_ds_pre_render_alter
Altera el array de renderizado de la entidad antes de que DS lo procese. Se llama antes de aplicar el diseño.
hook_ds_layout_settings_alter
Altera la configuración de diseño al guardar desde el formulario de Field UI.
hook_ds_layout_region_alter
Altera las regiones disponibles y las opciones de región en la página de visualización de Field UI.
hook_ds_label_options_alter
Altera las opciones de visualización de etiquetas disponibles para los campos.
hook_ds_classes_alter
Altera la lista de clases CSS disponibles para regiones o campos.
hook_ds_views_row_render_entity
Hook avanzado para controlar el renderizado de filas de entidad en Views DS. Debe habilitar 'Advanced view mode' en la configuración de filas de Views.
Troubleshooting 7
Después de seleccionar un layout, debes guardar el formulario Manage Display. Si los fields desaparecen, fueron movidos a la primera región - arrástralos a las regiones apropiadas y guarda nuevamente.
Usa el modo de emergencia en /admin/structure/ds/emergency para deshabilitar temporalmente Display Suite. Esto a menudo indica una View incrustada en un display de Entity que referencia a la misma Entity.
Los fields de DS solo aparecen cuando se selecciona un layout de DS. Asegúrate de haber elegido un layout del menú desplegable en Layout settings en la página Manage Display.
Verifica la configuración 'Limit field' del field. Asegúrate de que la combinación bundle/view mode coincida con tus límites configurados (por ejemplo, article|* para todos los view modes de artículos).
Las plantillas de field deben habilitarse en la configuración de Display Suite (/admin/structure/ds/settings). Marca 'Enable field templates' y guarda.
Display Suite se deshabilita automáticamente cuando Layout Builder está habilitado para un display. Deshabilita Layout Builder en la configuración del display de Entity para usar DS en su lugar.
Algunas opciones de fila de Views como 'Use view mode of display settings' requieren que el submódulo DS Switch View Mode esté habilitado. El view mode avanzado requiere implementar hook_ds_views_row_render_entity().
Security Notes 4
- Los Token y Twig fields pueden producir HTML sin procesar. Asegúrate de que solo los administradores de confianza tengan permiso para crear y editar estos fields.
- La función 'Field permissions' de DS Extras agrega control de acceso granular pero debe probarse exhaustivamente ya que crea permisos para todos los DS fields.
- Los Block fields renderizan Blocks arbitrarios en contexto de Entity - verifica que los Blocks no expongan datos sensibles cuando se renderizan en contextos inesperados.
- Al usar tokens en plantillas Expert field, ten en cuenta que los datos controlados por el usuario podrían inyectarse si no están debidamente sanitizados.