template

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:

1. 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.
2. 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:

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

     Entre los módulos más utilizados y potentes con los que cuenta Drupal, por defecto a partir de Drupal 8, el el módulo Views o Vistas, que nos permite crear consultas de todo tipo, através de su interfaz de usario.

     Ya hemos explicado varias de las maneras de configuración de vistas en anteriores capítulos, pero hoy nos concentraremos en la manera de reescribir los resultados que se muestran, para que podamos darle un aspecto específico, manteniendo el control de su aspecto y de la manera en que se presentarán los datos.

     Si quieres aprender más sobre el uso de las vistas HAZ CLIC AQUÍ

     Cómo personalizar la plantilla para una vista

   Paso 1 - Crear un tema personalizado

     Para  que Drupal reconozca nuestras plantillas, tendremos que crear un tema personalizado. Para ello podremos elegir entre varias opciónes:

     Subtema basado en Radix, HAZ CLIC AQUI

     Subtema basado en Bootstrap 3, HAZ CLIC AQUI

     Subtema basado en Boostrap Barrio, HAZ CLIC AQUÍ

     Cómo crear un Subtema basándonos en Bartik o cualquier otro tema del Core de Drupal 

     Si queremos crear un subtema, de la forma más sencilla, podremos utilizar cualquiera de los que trae Drupal por defecto, por ejemplo el Tema Bartik. Para crear un subtema, basándonos en cualquiera de los del core, sigue estos pasos:

     1.- Colócate en la carpeta themes, a continuación, añade una carpeta custom, donde deberás alojar cualquiera de tus temas personalizados. Luego, dentro de ella, crea una nueva carpeta con el nombre de tu Subtema.

     2.- Dentro de la carpeta de tu Subtema, crear un archivo, con el mismo nombre de tu carpeta, terminado en .info.yml, es decir, si tu Subtema se llama mitema, entonces, crearás un archivo llamado mitema.info.yml y a continuación, copia y pega el siguiente código dentro de él.
 

name: Subtema Bartik
description: Subtema creado a partir de Bartik

type: theme
core_version_requirement: ^8 || ^9

base theme: bartik

     3.- Finalmente Actívalo desde la interfaz de Drupal, para que sea tu tema por defecto. Para tus plantillas, añadirás, una carperta Templates y si quieres que tenga el mismo logo de Drupal, como en este ejemplo, sólo tendrás que copiarlos desde el Tema Padre.

1. También puedes activar el tema y configurarlo como tema por defecto, a través de la consola, ejecutando el siguiente comando de Drush:
    

   drush config-set system.theme default Subtheme_name -y

   Paso 2 - Activar el modo Debug o Depurador

     Si vamos a trabajar con archivos de Drupal, en este caso, con las plantillas Twig, tendremos que conocer el nombre de la o las plantillas que afectan al contenido que vamos a modificar. Para ello, activaremos el modo depurado de Drupal, que nos permitirá conocer la ubicación de las Plantillas Modelo, así como el nombre que tendremos que ponerle, en caso de querer modificar un tipo de contenido, un bloque, una vista, etc.

     Para saber cómo activar el Modo Depurador o Debug, HAZ CLIC AQUÍ

     Paso 3 - Crear la vista que vamos a modificar

    Cuando trabajas con vistas, podrás decidir varias maneras de mostrar sus contenidos y de acuerdo con la opción que elijas, tendrás que utilizar la plantilla relacionada con el tipo de contenido, o la plantilla que afecta directamente el tipo de vista con el que haz decidido trabajar.

     En este artículo trabajaremos con el tipo de contenido Factura, un tipo de contenido con varios campos de texto, fechas y un campo imagen, para que sea más gráfico el ejemplo.

     Así que seleccionaremos el tipo de contenido que vamos a mostar y, a continuación, en el selector para elegir nuestra vista, seleccionaremos "Campos", de esta forma, podremos trabajar directamente con la plantilla llamada views-view-fields.html.twig.

   Paso 4 - Confirmar las sugerencias de plantillas

     Cuando hayas activado el Modo Debug o depurador, tendrás que borrar la cache de Drupal y te recomiendo actualizar la base de datos; para ello, podrás utilizar la interfaz o los comando de Drush:

drush cr

drush updb

     A continuación, podrás comprobar las sugerencias para los nombres de las plantillas, haciendo clic derecho y seleccionando Explorar, o presionando la tecla F12; el resultado será algo parecido a lo siguiente: