Views | Personalizar vistas con plantillas (Parte 2)
Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI
Ahora que ya conocemos todos los requerimientos para poder modificar nuestras vistas, utilizando las plantillas Twig, vamos a explicar, el proceso de modificación de las vistas.
Cómo modifcar una vista de Campos con formato Lista desordenada
Lo primero que debemos tomar en cuenta es que para modificar el aspecto de una vista, podremos utilizar más de una plantilla, ya que dentro de ellas tenemos varios elementos, como el estilo para la vista en sí, que podría ser en cuadrículas (Grid), lista html, tabla o lista (Lista ordenada o Lista desordenada).
Cada uno de estos estilos tiene su propia plantilla y con ella podremos configurar diferentes maneras de presentar los resultados.
Pero además de reescribir el aspecto de la vista en general, podemos modificarla en función del estilo para sus filas, que cambiarán en función de si presentamos los contenidos, los campos de los contenidos o el resultado de la búsqueda.
Al igual que para la vista general, tendremos disponibles una plantilla que nos permitirá modificar, tanto el conjunto de datos mostrados (Filas de la vista), como a nivel individual.
Dónde podemos encontrar las plantillas para las vistas
A partir de Drupal 8, el módulo Views se integró como parte de su núcleo, por lo tanto, nos viene instalado por defecto y todas las plantillas, al igual que el resto de módulos integrados en el núcleo, podremos encontrarlos en la ubicación: web/core/modules
Por lo tanto, todas las plantillas para modificar cualquiera de las vistas, estarán alojadas en la ubicación:
web/core/modules/views/templates
Cómo especificar la vista afectada por la plantilla
Al trabar con plantillas debemos tener en cuenta que podremos modificar, todos los tipos de contenido o vistas similares o podremos modificar sólo algunos tipos de contenido o vistas en concreto.
Para modificar una vista concreta, tendremos que añadir al nombre de la plantilla, el nombre máquina de nuestra vista; para ello, a continuación del nombre de la plantilla, añadiremos dos guiones ( -- ), seguidos del nombre máquina de nuestra vista.
Por ejemplo, en nuestro caso, nuestra vista es de tipo Campos (Fields), así que la plantilla que tendremos que seleccionar será la llamada views-view-fields.html.twig, si sólo queremos que la plantilal afecte a nuestra vista factura, debemos copiarla dentro de la carpeta templates de nuestro subtema, y renombrarla de forma parecida a la siguiente:
views-view-fields--facturas.html.twig
También podremos añadir el nombre de sistema, que encontrarmos al editar la vista, en el apartado de Avanzados, para ello, añadiremos un guión medio más y luego, sustituiremos los guiones bajos por guiones medios:
views-view-fields--facturas--page-1.html.twig
Una vez nombrada correctamente la plantilla para nuestra vista, y estando guardada dentro de la carpeta templates de nuestro tema, borraremos la cache de Drupal, si exploramos la vista, haciendo clic derecho y seleccionando explorar o presionando la tecla F-12, deberíamos ver un resultado como el siguiente:
Entonces, haremos la siguiente prueba para verificar tenemos control sobre el aspecto de la vista, la idea es saber en qué línea añadiremos los cambios deseados.
Para ello, vamos a copiar la siguientes líneas sustituyendo el contenido de la plantilla:
{% for field in fields -%}
{{ field.separator }}
{%- if field.wrapper_element -%}
<{{ field.wrapper_element }}{{ field.wrapper_attributes }}>
{%- endif %}
{%- if field.label -%}
{%- if field.label_element -%}
<{{ field.label_element }}{{ field.label_attributes }}>{{ field.label }}{{ field.label_suffix }}</{{ field.label_element }}>
{%- else -%}
{{ field.label }}{{ field.label_suffix }}
{%- endif %}
{%- endif %}
{%- if field.element_type -%}
<{{ field.element_type }}{{ field.element_attributes }}>{{ field.content }}MODIFICAR-1</{{ field.element_type }}>
{%- else -%}
{{ field.content }}MODIFICAR-2
{%- endif %}
{%- if field.wrapper_element -%}
</{{ field.wrapper_element }}>
{%- endif %}
{%- endfor %}
Si guardamos los cambios y accedemos a la vista, podremos comprobar la línea exacta donde se afectara la información mostrada en la vista:
En nuestro caso, hemos añadido las palabras MODIFICAR-1 y MODIFICAR-2, en las líneas donde se imprime el contenido de los campos, para saber en cuál de ellas tendremos acceso a los datos mostrados.
Cómo imprimir los valores de los campos en la plantilla
Ahora que ya tenemos claro la línea de la plantilla donde podremos imprimir los valores deseados, nos falta tener en cuenta dos cosas:
- Sólo podremos imprimir en la plantilla los campos que se muestran en la vista, por lo tanto, primero los agregaremos en la pantalla de configuración de la vista y así luego podremos imprimirlos en la plantilla.
- Podremos configurar el valor del campo desde la pantalla de configuración de la vista, antes de imprimirlo mediante la plantilla.
Para poder imprimir el valor de los campos de la vista, dentro de la plantilla, añadiremos el nombre del campo, siguiendo esta estructura:
{{ fields.nombre_del_campo.content }}
Esto nos permitirá crear cualquier tipo de estructura, combinando los campos, sin importar el orden en que se muestren dentro de la configuración de la vista.
PRUEBA 1 - Impresión de campos con plantilla
Para comprobar todo lo anterior, ahora lo que haremos será copiar el siguiente código, sustituyendo todo el contenido de nuestra plantilla por los valores correspondientes a tu vista y a continuación, refrescaremos el cache de Drupal para ver los resultados.
{% for field in fields -%}
{{ field.separator }}
{%- if field.wrapper_element -%}
<{{ field.wrapper_element }}{{ field.wrapper_attributes }}>
{%- endif %}
{%- if field.label -%}
{%- if field.label_element -%}
<{{ field.label_element }}{{ field.label_attributes }}>{{ field.label }}{{ field.label_suffix }}</{{ field.label_element }}>
{%- else -%}
{{ field.label }}{{ field.label_suffix }}
{%- endif %}
{%- endif %}
{%- if field.element_type -%}
<{{ field.element_type }}{{ field.element_attributes }}>
<div class="caja" style="border: 2px solid; padding: 10px 5px">
<div class="imagen">
{{ fields.field_imagen_reforma.content }}
</div>
<div class="detalles">
<h1>{{ fields.title.content }}</h1>
<span>{{ fields.field_fecha_de_inicio.content }}</span><br/>
<span>{{ fields.field_fecha_de_entrega.content }}</span>
</div>
</div>
</{{ field.element_type }}>
{%- else -%}
{{ field.content }}
{%- endif %}
{%- if field.wrapper_element -%}
</{{ field.wrapper_element }}>
{%- endif %}
{%- endfor %}
Para ver mejor el resultado de los datos, cambiaremos el estilo de la vista por Cuádricula (Grid) en lugar de Lista sin formato, deberías ver algo parecido a lo siguiente:
Seleccionado el estilo GRID y dejando todo lo demás por defecto, el resultado será el siguiente:
La vista de Facturas, ahora presenta algo de estructura, pero se ven duplicados todos los resultados, ya que sólo deberían mostrarse las cinco facturas que tenemos creadas en el contenido.
Esto se debe a que por defecto, Drupal depura los elementos que necesita de sus plantillas, de esta manera si dejáramos la plantilla por defecto y sólo configuráramos la interfaz de usuario, obtendríamos el mismo resultado en ambos lados, pero como en nuestro caso estamos reescribiendo la plantilla, necesitaremos eliminar todo lo innecesario para nosotros.
Copia el siguiente código, sustituyendo todo lo que tenías antes en tu plantilla:
<div class="caja" style="border: 2px solid; padding: 10px 5px">
<div class="imagen">
{{ fields.field_imagen_reforma.content }}
</div>
<div class="detalles">
<h1>{{ fields.title.content }}</h1>
<span>{{ fields.field_fecha_de_inicio.content }}</span><br/>
<span>{{ fields.field_fecha_de_entrega.content }}</span>
</div>
</div>
Ahora si guardas los cambios y borras nuevamente la cache de Drupal, al visitar la vista, deberías obtener el resultado esperado:
Cómo imprimir las etiquetas de los campos
Ahora que ya sabemos que dejaremos en las plantillas personalizadas para las vista, solamente los valores que necesitemos imprimir, echamos en falta las etiquetas que ya hemos activado en la configureación de la vista, pero que no vemos en nuestro resultado final.
Para imprimir las etiquetas, en caso de que lo necesites, lo único que tendrás que hacer es añadir la estructura siguiente, que consta del nombre del campo, sustituyendo el final por la palabra label en lugar de content.
{{ fields.nombre_del_campo.label }}
Por lo tanto, si quieres imprimir los campos con sus etiquetas, además del valor correspondiente a cada uno de ellos, deberías añadir la siguiente estructura
{{ fields.nombre_del_campo.label }} {{ fields.nombre_del_campo.content }}
PRUEBA final - Impresión de campos con plantilla
Copia y sustituye el código de la plantilla por el siguiente, para comprobar que se imprimen todos los campos, con algunas de las etiquetas añadidas en la configuración de la vista:
<div class="caja" style="border: 2px solid; padding: 10px 5px">
<div class="imagen">
{{ fields.field_imagen_reforma.content }}
</div>
<div class="detalles">
<h1>{{ fields.title.content }}</h1>
<strong>{{ fields.field_fecha_de_inicio.label }}</strong><br/>
<span>{{ fields.field_fecha_de_inicio.content }}</span><p>
<strong>{{ fields.field_fecha_de_entrega.label }}</strong><br/>
<span>{{ fields.field_fecha_de_entrega.content }}</span>
</div>
</div>
El resultado final, debería ser algo parecido a la siguiente imagen:
