View mode, Twig y Vistas

Video de Youtube
URL de Video remoto

     En Drupal, además de poder trabajar con tipos de contenido a medida, cuyos campos y comportamiento, nos permiten obtener casi cualquier tipo de estructura posible; existe la opción de mostrar esos mismos contenidos, modificando su presentación o la información expuesta; con esta alternativa podremos aplicar cambios como, por ejemplo, estilos de CSS, dependiendo de los permisos de los usuarios, o descomponer nuestro proyecto en "componentes" reutilizables, que podremos modificar individualmente, sin tener que reescribir el tipo de contenido original.

     Esta alternativa es conocida como View Modo o "Modo de Vista" y básicamente nos permite recolocar, presentar u ocultar los campos de cualqueir tipo de contenido o entidad dentro de un proyecto de Drupal.

   Donde econtrar el Modo de vista en un contenido Drupal

     Drupal viene por defecto con dos tipos de contenido Artículo y Página básica, para ver el modo de vista de cualquiera de ellos, tendremos que acceder a la pestaña de Gestionar presentación del tipo de contenido que desamos consultar, en la url "/admin/structure/types/manage/article/display".

     Al acceder, por defecto, en la pestaña de un artículo verás algo parecido a la siguiente imagen, con los campos que trae una instalación nueva de Drupal.

Imagen
View Mode Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

   View Mode en vistas Drupal

     Una de las mejores formas de trabajar, utilizando View Modes, de los contenidos en Drupal, es através de las vistas. 

     Por defecto, a partir de Drupal 8, econtraremos una vista llamada Frontpage, encargada de mostrar los artículos creados, sin la necesidad de modificar nada más. 

     Para comprobarlo, sólo tenemos que añadir algunos artículos a nuestro proyecto Drupal, completando todos sus campos y a continuación, al visitar la página frontal, haciendo clic en el logo de Drupal, veremos un listado de todos nuestros artículos.

Imagen
View Mode Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

   Cómo utilizar View Modes en una vistas Drupal

     Si exploramos la configuración de la vista Frontpage, a la que podremos acceder desde la url "/admin/structure/views/view/frontpage", podremos entender muy fácilmente, como se emplea un View Mode, dentro de una vista de Drupal.

     Observando el apartado Formato, dentro de la página de configuración de la Vista Frontpage, comprobaremos que está configurada para Mostrar contenidos, con el View Mode Resumen. 

     Esto quiere decir, que si volvemos a la pestaña Gestionar Presentación, del tipo de contenido Artículo y buscamos el apartado Resumen, veremos que los campos activados corresponden a los que vemos en la página de inicio de Drupal, gracias a la vista Frontpage.

Imagen
View Mode Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony
Imagen
View Mode Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

   Cómo cambiar el View Mode en una vista Drupal

     Para añadir o modificar un View Modo dentro de una vista en Drupal, solo tendremos que hacer clic en el enlace que se refiere al modo de vista utilizado, en el apartado Mostrar, de la pantalla de configuración de la vista. 

     Al hacer clic, se abre un desplegable, con todos los View Modes, disponibles para la entidad o el contenido que estemos mostrando en la misma.

     En el caso de la vista Frontpage, por defecto está empleádose el View Mode Resumen, para asegurarnos de que entendemos como modificarlo, haremos clic sobre Resumen y a continuación seleccionaremos, cualquiera de las opciones disponibles, en mi caso, seleccionaré RSS y luego guardaré los cambios, antes de regresar a la página pricipal, para ver el resultado. 

Imagen
View Mode Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony
Imagen
View Mode Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

   Modo de vista personalizado

     Ahora que ya conocemos el objetivo de utilizar los Modos de vista (View Modes), podremos ir un poco más allá; vamos a crear y activar nuestro propio modo de vista, para que modifique nuestros contenidos.

     Para crear un modo de vista personalizado, iremos a la página de configuración de los modos de vista, para ello, tenemos varias opciones:

  • Llendo a la pestaña Gestionar Presentación, dentro del contenido que desamos modificar y desplegarnos hasta la parte inferior izqierda, para acceder mediante el enlace que encontraremos al final.
     
  • Accediendo a la url: "/admin/structure/display-modes/view"
     
  • Si tienes activado el módulo admin_toolbar, mediante el menú desplegable de administración.
Imagen
View Mode Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

      Una vez dentro de la página de configuración, haremos clic en el enlace Añadir una nueva modo de vista de Contenido, ubicado en la parte inferior de cada uno de los contenidos, bloques, paragraphs, media, etc.

     Luego rellenaremos el campo con el nombre para nuestro View Mode, ej.: ModoVistaPersonalizado y a continuación, guardaremos los cambios y volveremos a la pestaña Gestionar Presentación, para activarlo, dentro de nuestro contenido.

Imagen
View Mode Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Cuando hayamos guardado el nuevo View Mode, volveremos a la pestaña Gestionar presentación, nos desplazaremos hasta el final y a continuación, marcaremos el nuevo View Mode, que encontraremos dentro del listado.

Imagen
View Mode Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony
Imagen
View Mode Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

   Crear plantilla Twig para View Mode

     Requisitos:

  • Instalar un Theme personalizado. Para descubrir varias opciones disponibles HAZ CLIC AQUI
     
  • Activar el modo debug o depurador de Drupal. HAZ CLIC AQUÍ

     Cuando tengamos activado el modo Debug, seleccionaremos inspeccionar, desde el navegador, para ver las sugerencias generadas por Drupal, relacionadas con los posibles nombres para las plantillas de nuestros Modos de Vista.

     Al igual que con cualquier otra plantilla de un nodo en Drupal, copiaremos el modelo, cambiaremos el nombre y a continuación, podremos comenzar a personalizarla.

Imagen
View Mode Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony