Pasar al contenido principal

Qué son Modos de Vista en Drupal 8 y Cómo Utilizarlos

Enviado por Jorge Montoya el Dom, 23/02/2020 - 12:12

Los modos de vista en Drupal te permitirán renderizar (presentar en pantalla) una o varias entidades (nodos, por ejemplo) de determinada forma y basándose en un contexto.

Este tutorial demostrará la flexibilidad en el manejo del contenido mediante el uso de los modos de vista en Drupal con un ejemplo. Instalaremos y utilizaremos además los módulos Field Group y Display Suite. ¡Empecemos!

Paso #1. - Instalar los Módulos Requeridos

  • Abre la aplicación de terminal de tu máquina y ubícate en la raíz de tu instalación Drupal (el archivo composer.json se encuentra en este directorio.

  • Escribe:

composer require drupal//field_group

composer require drupal/ds

Modos de vista en Drupal - Pantalla de terminal
Modos de vista en Drupal - Pantalla de terminal
  • Clic sobre Ampliar.

  • Habilita Display Suite y Field Group.

  • Clic sobre Instalar.

Modos de vista en Drupal - Pantalla administrativa

El sistema te pedirá además habilitar el módulo Layout Discovery .

  • Clic sobre Continuar.

No es necesario instalar ni emplear más módulos.

Paso #2. - El Tipo de Contenido

Para fines de este tutorial, voy a crear un tipo de contenido llamado "Persona famosa" con los campos detallados en la tabla a continuación. Tu puedes seguir con el mismo tipo de contenido o crear otro campo por ejemplo "Autor". "Paciente" o incluso puedes crear otro tipo de entidad como "Miembro" (entidad Usuario) - recuerda que los modos de vista pueden ser aplicados a todo tipo de entidades y no solo nodos.

Imagen

  • Tipo: Imagen
  • # Valores permitidos: 1

Nacimiento

  • Tipo: Fecha
  • # Valores permitidos: 1

Muerte

  • Tipo: Fecha
  • # Valores permitidos: 1

Conocido por

  • Tipo: Texto (con formato, largo)
  • # Valores permitidos: 1

Infancia y juventud

  • Tipo: Texto (con formato, largo)
  • # Valores permitidos: 1

Obra

  • Tipo: Texto (con formato, largo)
  • # Valores permitidos: 1

Fallecimiento

  • Tipo: Texto (con formato, largo)
  • # Valores permitidos: 1

Trivia

  • Tipo: Texto (con formato, largo)
  • # Valores permitidos: 1

Descarga de archivo

  • Tipo: Archivo
  • # Valores permitidos: 1

Enlaces relacionados

  • Tipo: Enlace
  • # Valores permitidos: 1

Los campos:

  • Nacimiento

  • Muerte

  • Conocido por

se agruparán en un field group llamado Datos personales.

 

Modos de vista en Drupal - Pantalla administrativa

Paso #3. - Crear el Field Group

  • Clic sobre Gestionar presentación > Add field group.

  • Selecciona Conjunto de campos en la lista desplegable.

  • Escribe una etiqueta adecuada.

  • Clic sobre Guardar y continuar.

 

Modos de vista en Drupal - Pantalla administrativa
Modos de vista en Drupal - Pantalla administrativa
  • Desliza el fieldset por debajo del campo de imagen.

  • Oculta la etiqueta de la imagen.

  • Agrupa los campos dentro del fieldset iindentándolos.

  • Haz que las etiquetas dentro del fieldset sean en línea.

  • Clic sobre Guardar.

 

Modos de vista en Drupal - Pantalla administrativa

Nota que en el momento ya te encuentras configurando dos modos de vista activos en Drupal (Default y Resumen). El modo de vista Default muestra el nodo en su totalidad, mientras que el modo de vista Resumen, muestra el nodo en un formato compacto, como los resúmenes en la página principal de Drupal.

Paso #4. - Crear Contenido

  • Clic sobre Contenido > Añadir contenido > Persona famosa

  • Crea 4 a 5 nodos

Modos de vista en Drupal - Pantalla administrativa

Paso #5. - Crear Modos de Vista en Drupal Personalizados

  • Clic sobre Estructura > Tipos de contenido.

  • Selecciona Gestionar presentación para el tipo de contenido ‘Persona famosa’.

 

Modos de vista en Drupal - Pantalla administrativa
  • Desplázate hacia abajo y haz clic en Opciones de presentación personalizada.

  • Clic sobre Gestionar modos de vista.

Aquí puedes configurar los modos de vista existentes a lo largo de los diferentes tipos de entidad (bundles). También puedes crear modos de vista personalizados que se ajusten a tu diseño o requerimientos de información.

  • Clic sobre Añadir modo de vista.

 

Modos de vista en Drupal - Pantalla administrativa
  • Clic sobre Contenido.
  • Escribe un nombre apropiado para el modo de vista.

  • Clic sobre Guardar.

 

Modos de vista en Drupal - Pantalla administrativa
  • Crea 2 modos de vista adicionales.

Yo utilicé estos nombres:

  • Modo de vista Obra de vida

  • Modo de vista Trivia. 

 

Modos de vista en Drupal - Pantalla administrativa
  • Clic sobre Estructura > Tipos de contenido.

  • Selecciona Persona famosa > Gestionar presentación.

  • Desplázate hacia abajo y haz clic sobre Opciones de presentación personalizada una vez más.

  • Marca los 3 modos de vista que acabas de crear.

  • Clic sobre Guardar.

 

Modos de vista en Drupal - Pantalla administrativa
  • Clic sobre el modo de vista Datos personales.

  • Desplázate hacia abajo y selecciona Two column layout (en las opciones de Display Suite) en la lista desplegable.

  • Clic sobre Guardar.

  • Clic sobre Guardar una vez más (eventualmente) para mover los campos a una nueva columna.

  • Mueve el fieldset Datos personales hacia la parte superior de la columna izquierda.

  • Ubica los 3 campos correspondientes como tenga sentido.

  • Ubica la imagen en la columna de la derecha.

  • Cambia el Estilo de imagen a Medio.

  • Clic sobre Actualizar.

  • Mueve los demás campos a la sección Desactivado.

  • Desplázate hacia abajo y haz clic sobre Guardar.

 

Modos de vista en Drupal - Pantalla administrativa
  • Repite el proceso con las otros dos modos de vista, utilizando las opciones de diseño:

    • Three-column equal width

    • Three-column 25/50/25 

 

Modos de vista en Drupal - Pantalla administrativa
Modos de vista en Drupal - Pantalla administrativa

Paso #6. - Crear una Vista

  • Clic sobre Estructura > Vistas > Agregar vista.

  • Escribe un nombre apropiado para la vista.

  • Selecciona Contenido del tipo Persona famosa.

  • Marca Crear un bloque.

  • Cambia el número de Elementos por bloque a 1.

  • Marca Utilizar un paginador.

  • Clic sobre Guardar y editar.

 

Modos de vista en Drupal - Pantalla administrativa
  • Clic sobre la opción campos en la sección Formato .

  • Selecciona Contenido.

  • Clic sobre Aplicar. 

Modos de vista en Drupal - Pantalla administrativa
  • Selecciona el primer modo de vista.

  • Clic sobre Aplicar.

  • Clic sobre Guardar.

 

Modos de vista en Drupal - Pantalla administrativa
  • Clic sobre la sección Avanzado a la derecha de Views UI.

  • Clic sobre Use AJAX: No.

  • Marca Use AJAX.

  • Clic sobre Aplicar.

  • Clic sobre Guardar. 

Modos de vista en Drupal - Pantalla administrativa
  • Crea 2 bloques más con el mismo proceso. la única configuración que será diferente, será el modo de vista en la sección Formato

Modos de vista en Drupal - Pantalla administrativa
Modos de vista en Drupal - Pantalla administrativa

Paso #7. - Ubicar los Bloques

  • Crea un artículo con el título únicamente.

  • Clic sobre Guardar. 

Modos de vista en Drupal - Pantalla administrativa
  • Clic sobre estructura > Diseño de bloques.

  • Desplázate hacia la sección Contenido .

  • Clic sobre Colocar bloque.

  • Busca los 3 bloques. 

Modos de vista en Drupal - Pantalla administrativa
  • Clic sobre Colocar bloque.

  • Desmarca Mostrar título.

  • Restringe el bloque al artículo que acabamos de crear.

  • Clic sobre Guardar bloque.

Modos de vista en Drupal - Pantalla administrativa
  • Repite el proceso con los otros dos bloques.

  • Reubica los bloques por debajo del título.

  • Clic sobre Guardar bloques. 

Modos de vista en Drupal - Pantalla administrativa

Ahora puedes revisar el artículo.

Modos de vista en Drupal - Resultado final

¡Felicitaciones! Supongo que a esto le podremos llamar "Drupal coolness". Por favor coméntanos cómo piensas utilizar esta muy funcional característica de Drupal en el futuro.

Puntos clave