entidades

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:

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 tenemos la base de conocimiento suficiente, para crear y configurar, nuestra vista Catálogo usando Taxonomías, hoy abordaremos otros aspectos relacionados con el funcionamiento y personalización, no a nivel gráfico, sino a nivel de la interfaz de administración del usuario, para que puedas obtener el listado de categorías y de productos relacionados con ellas.

     Si quieres aprender sobre diseño Frontend en Drupal, tienes varios videos relacionados, donde te explico la creación de Themes personalizados para Drupal, utilizando Bootstrap 3, Bootstrap 4, o el diseño de Patrones con Emulsify; también el uso de javascript y otros módulos adicionales que te permitirán dar el aspecto que buscas en tus proyectos. 

     Para saber más sobre diseño Frontend en Drupal haz clic en el siguiente enlace: Básicos de Frontend para Drupal

     Cómo configurar las URL para las taxonomías

          Por defecto, Drupal trae en su configuración inicial un módulo llamado Path, cuyo objetivo es encargarse de las rutas con las que podrás acceder y navegar a través de tus proyectos. Pero en la mayoría de los casos, es necesario un módulo adicional, que nos permitirá personalizar las urls amigables, para que podamos cumplir con los requisitos del SEO. 

          Este módulo se llama Pathauto y lo tienes explicado en detalle en este artículo Módulos impresindibles: Pathauto; con él una vez activado, podremos configurar los patrones para las urls, que se generarán automáticamente, cada vez que vayamos creando nuevas Taxonomías, o cualquier otro tipo de contenido dentro de nuestro proyecto Drupal.

          Con el módulo Pathauto, podremos configurar nombre automáticos para las taxonomías, añadiendo simplemente el siguiente Token en el campo Patrón de Ruta: 

/[term:vocabulary]/[term:name]

     Una vez añadido estos tokens, en nuestro caso, que nuestra primera taxonomía o vocabulario se llama "Categoría", obtendremos urls del tipo (localhost/categoria/aceites).

     ¿Cómo hago si ya he creado las taxonomías antes del patrón?

          Por si no lo recuerdas, si haz creado las taxonomías o cualquier otro tipo de contenido, antes de configurar los patrones para las urls, sólo tienes que dirigirte a la dircción "/admin/config/search/path/update_bulk", dentro de tu proyecto y seleccionar las opciones para regeneración en masa.

     Personalización de la Taxonomía

          Al igual que el resto de tipos de contenido en Drupal, las taxonomías nos ofrecen la oportunidad de gestionar su presentación. Esto significa, que podremos añadir nuevos campos con imágenes, textos o cualquier otro elemento, añadiendo mayor atractivo y/o funcionalidades de cara al usuario.

         Podremos utilizar la opción de presentación que nos viene por defecto, o también podremos añadir, nuestra propio modo de presentación, desde la misma pestaña, una vez dentro de la taxonomía.

     Módulos complementarios muy útiles

          Paragraphs:

             Aunque no lo aplicaremos en este ejercicio, podríamos combinar el modo de vista de la Taxonomía, con el módulo Paragraphs, para generar páginas con un aspecto parecido al de la siguiente imagen, con elementos fácilmente configurables desde un mismo lugar, como en este caso, un carrusel, varios textos,y a continuación el listado de productos o servicios.

             Si todavía no conoces el Módulo Paragraphs haz clic en el enlace: Creación de contenidos con Paragraphs

          Fieldgroup:

              Otro de los módulos que puede ayudarte, en la configurar una interfaz de usuario mucho más atractiva y fácil de manejar, es el módulo FieldGroup, que te permitirá agrupar en Secciones o Pestañas, mostrando a los editores del sitio, sólo la información que necesitan para realizar sus tareas de mantenimiento, sin agobiarlos con información que no les hace falta.

         Si todavía no conoces el Módulo Field Group, haz clic en el enlace: Field Group

     Creación del listado de Productos/servicios

            Ya que hemos terminado con la configuración de nuestra taxonomía, llamada "Categoría", y que ahora conocemos diferentes formas, módulos y opciones para cambiar su configuración, gestión y aspecto, sólo nos queda añadir, el listado de productos o servicios, que se mostrará cada vez que entremos en una de estas "Categorías".

             Para crear este listado de productos o servicios, tendremos que generar una nueva vista, del tipo bloque, a la que pasaremos como parámetro el id de la Taxonomía correspodiente y marcaremos la opción de "Exigir relación", para que sólo se muestren los correspodientes en cada caso.

             Una vez configurada la vista con el listado de productos, lo último que tendríamo que hacer es configurar en el listado de bloques, para limitar nuestra nueva vista a las páginas con las taxonomías.

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

       En este artículo te voy a enseñar cómo crear un bloque del tipo catálogo, que podrás colocar en tu página principal o cualquier otra página, usando vistas y taxonomías.

     Prerrequisitos:

        Conocer cómo se crean contenidos y tipos de contenido en Drupal, te recomiendo ver los videos y documentacíon relacionados con Trabajando con contenidos y tipos

        Conocer el uso de las vistas, te recomiendo que dediques un tiempo a ver los videos y documentacíon relacionados con Trabajo con vistas en Drupal 9

        Conocer el uso de las taxonomías en Drupal,  te recomiendo que dediques un tiempo a ver los videos y documentacíon relacionados con Taxonomías, filtros y vistas en Drupal 9

     Cómo crear un catálogo usando Vistas y Taxonomías en Drupal 9

           Paso 1 - Crear el tipo de contenido

                Para este ejercicio, deberás haber creado al menos un tipo de contenido, al que en este ejemplo le llamaremos Producto, pero que en tu caso puede ser Noticia, Libro, Publicación, etc. ya que se trata de generar un listado de todos estos contenidos clasificándolos a través de sus categorías correspondientes, para ello, utilizaremos un vocabulario, al que llamaré Categoría, que deberá formar parte de los campos dentro de tu tipo de contenido.

               Si todavía no conoces cómo trabajar con contenidos y tipos de contenido, dedica un tiempo a mirar el video donde te lo explico y podrás entender más fácilmente el resto del ejercicio. Haz clic en el siguiente enlace para ver la documentación y video explicativo: Trabajando con contenidos y tipos

            Paso 2 - Generar contenidos categorizados

              Además, para que tenga sentido, generaremos varios contenidos, añadiéndoles diferentes Categorías, para comprobar que todo funciona según lo esperado. Si estás trabajando con un proyecto nuevo, puedes generar estos contenidos de prueba usando el Módulo Devel Generate, puedes ver cómo hacerlo en el siguiente enlace Cómo generar contenidos de Prueba con el módulo Devel

 

             Para categorizar los contenidos utilizaremos las Taxonomías o Vocabularios, cuya función en Drupal es exactamente esa, "clasificar". Así que añadiremos un nuevo vocabulario llamado "Categoría" y, a continuación, agregaremos el campo con el mismo nombre en nuestro tipo de contenido, seleccionando la opción de "Crear entidades referenciadas si no existieran previamente".

             Si todavía no conoces las taxonomías y cómo trabajar con ellas, dedica un tiempo a mirar el video donde te lo explico y podrás entender más fácilmente el resto del ejercicio. Haz clic en el siguiente enlace para ver la documentación y video explicativo:  Taxonomías, Filtros en vistas, Menús y CSS   

            Una vez creado el vocabulario y añadido como parte del tipo de contenido, podremos comenzar a clasificar nuestros contenidos, ya sea añadiendo previamente diferentes categorías desde la misma taxonomía o generando nuevos contenidos y añadiéndolas directamente, como parte de dicho proceso.

 

             Paso 3 - Crear la vista de Categorías

                  Existen varias maneras de crear catálogos utilizando Taxonomías, podemos crear una Vista tipo Página o podemos crear una Vista tipo Bloque, para incluirla dentro de una Página que hayamos creado paralelamente.

             Opción 1 - Creación de Página Categorías usando taxonomías

                   En este caso, vamos a crear una Vista del tipo Página, que configuraremos como nuestra página de inicio, mostrando el listado de la Taxonomía o vocabulario llamado "Categoría", el objetivo es conseguir el listado de las categorías para luego hacer que apunten a sus respectivos productos, al hacer clic sobre cualquiera de ellas.

                  Accederemos a la url "/admin/structure/views" y crearemos nuestra vista tipo página con el nombre "Catálogo", donde mostraremos las taxonomías del tipo Categoría, luego configuraremos el resto de datos correspondientes, como el tipo de la vista "Página" y la url de acceso; finalmente activaremos el paginador en caso de que tuviéramos muchas categorías. Podremos modificar estos parámetros o ajustarlos una vez creada la vista, en la pantalla de configuración.

            Ajustes de configuración de la vista

                 Al hacer clic en el botón "Guardar y continuar", de la parte inferior de la página, accederemos a la parte de la configuración interna, donde podremos realizar aquellos ajustes que nos hagan falta y, a su vez, comprobar que lo que se nos muestra es lo que esperábamos.

            Configuración del catálogo como página principal

                 Ya que hemos comprobado, que efectivamente se muestra el listado de las categorías en nuestra "Vista Catálogo", lo siguiente que deberíamos hacer es configurar nuestro sitio, para que la utilice como página principal.

                 Para ello nos dirigiremos al apartado de Configuraciones básicas del sitio , ubicado en "/admin/config/system/site-information", y colocaremos la url de nuestrra vista en el lugar correspodiente, tal y como te muestro en la siguiente imagen. Una vez realizado el cambio, podremos volver a nuestra página principal y comprobaremos que ha sido realizado el cambio.

              Añadir imágenes a las taxonomías

              Aunque hemos conseguido el resultado esperado, ya que tenemos configurada nuestra página "Catálogo" como página principal de nuestro sitio, y que se muestran las categorías que habíamos añadido previamente, todavía está muy lejos de lo que esperaríamos encontrar en una web de productos. Así que, a continuación añadiremos un campo del tipo imagen a nuestra taxonomía y de esta manera, podremos mostrar un aspecto más llamativo e impactante a nivel visual para nuestros usuarios.

              Para realizar este cambio, volveremos a la url de configuración de los campos en la Taxonomía accediendo a :

 "/admin/structure/taxonomy/manage/categoria/overview/fields"

y a continuación añadiremos un campo del tipo imagen, como lo haríamos en cualquier otro contenido de Drupal. Crearemos nuestro propio campo personalizado de imágenes para esta taxonomía y rellenaremos los campos correspodientes, una vez realizado el proceso, guardaremos los cambios y ya podremos añadir las imágenes de cada una de nuestras categorías.

                Ahora que ya hemos añadido el nuevo campo del tipo imagen, podremos acceder a cada una de nuestras Taxonomías y agregarle las imágenes que las harán más fáciles de identificar y atractivas a ojos de nuestros usuarios, llamándolos a la acción de clicar en ellas.

              Una vez añadidas todas las imágenes, tendremos que hacer lo mismos en la vista "Catálogo", para que podamos tenerlas en la página de inicio. En ese caso, accederemos a la configuración de la vista, añadiremos el nuevo campo "Imagen Categoría" y ajustaremos el formato de presentación de la imagen para que no se vea muy grande.

             Si volvemos a nuestra página de inicio, el resultado debería ser algo parecido a la siguiente imágen, que ya nos da una mejor idea del objetivo final, que será conseguir un catálogo atractivo y funcional, para presentar nuestros contenidos o productos.

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

      Con la incorporación del módulo Views o Vistas en el núcleo de Drupal a partir de la versión 8, se ampliaron considerablemente las posibilidades para crear nuevas formas de mostrar contenidos, añadiendo además, capacidad de interacción y versatilidad y una mayor facilidad de implementación a la hora de configurar nuestros proyectos.

Las vistas ofrecen la oportunidad de crear consultas a la base de datos, mediante la interfaz de usuario, para mostrar contenidos filtrados, limitados por diferentes categorías o con acceso a usuarios específicos, entre otras muchas formas de aplicación.

Es por ello, que una vez comprendidos los fundamentos relacionados con las vistas, podrás sacarle partido a una infinidad de posibilidades, sin tener que ser un experto en bases de datos, creación de consultas o programador avanzado.

Hoy te voy a mostrar cómo crear diferentes tipos de vistas, utilizando los filtros y otras opciones adicionales, que te llevarán a lograr páginas web mucho más atractivas y funcionales, para ti y tus posibles clientes. 

Prerrequisitos:

     Creación de un tipo de contenido. Para los ejemplos he creado un tipo de contenido "Empleado" con varios campos:

• Cargo u ocupación Texto (sin formato)
   
• Correo electrónico Correo electrónico
   
• Imagen Empleado Imagen
   
• Teléfono Texto (sin formato)

     Creación del vocabulario. Además, he creado una taxonomía o vocabulario "Departamento" y posteriormente el campo "Area o departamento" del tipo Referencia de entidad para poder clasificar a los empleados.

     Creación de varios empleados. Una vez configurado el tipo de contenido empleado con todos sus campos, el siguiente paso será añadir al menos (6) con todos sus respectivos campos llenos, para realizar los ejemplos. 

Ejercicios:

     Para crear una vista nueva, tendremos que dirigirnos al menú estructura/vistas/nueva vista

Si queremos modificar una vista existente, podremos hacerlo desde el quick edit de drupal, sin tener que navegar hasta estructura/vistas

Creación de vista tipo bloque con filtro simple

     Para crear una vista del tipo bloque, nos iremos a "estructura/vistas" y allí podremos crear una nueva vista, para este ejemplo crearemos una del tipo bloque, que nos muestre el contenido del tipo empleados, y dejaremos el resto de valores que nos vienen por defecto.

     El siguiente paso sería modificar los títulos para que, por ejemplo al activarlo podamos encontrar más fácilmente el nombre dentro del listado de bloques; además aprovechamos para añadir la imagen del empleado y luego recolocamos las posiciones.

Una vez que tengamos nuestra vista actualizada, con todo lo que deseamos mostrar en la página principal, nos iremos a "estructura/diseño de bloques", donde seleccionaremos el área de colocación y activaremos nuestra vista tipo bloque para que se muestre solamente en la página principal.

Creación de vista tipo página con filtro simple

     En este ejercicio, en lugar de crear una vista con campos, como la anterior, utilizaremos un nuevo "View Modo" o "Modo de visualización" personalizado, que añadiremos en el tipo de contenido Empleado, de esta manera podremos cambiar la forma de presentación de los datos sin la obligación de realizar cambios en los archivos twig de nuestro tema.

     La creación de la vista tipo página será parecida a la del tipo bloque, pero en el apartado FORMATO, en lugar de mostrar campos, tendremos que seleccionar CONTENIDO y posteriormente el modo de vista que hemos creado previamente "empleados con departamento", desde el listado que se mostrará al hacer clic sobre el modo de vista que está por defecto.

     Otro de los cambios que realizaremos en esta vista, es añadir un filtro más, para que sólo se muestren los empleados de un departamento específico. Una vez completada la configuración de la vista, activaremos el enlace del menú para que podamos acceder desde cualquier parte de la web a este contenido.

     Tan pronto como terminemos la configuración de nuestra segunda vista y guardemos los cambios, podremos dirigirnos a la página principal, para comprobar que tenemos un nuevo elemento en el menú principal, que nos llevará a la vista en la que sólo se muestran los empleados que forman parte del departamento que hemos seleccionado previamente.

     Recuerden, que los departamentos son un vocabulario que añadimos utilizando taxonomías y por esta razón, al añadir dicho campo en el apartado de filtros, podremos mostrar específicamente los contenidos que cumplan con esta relación.

Modificación de vista página con filtro expuesto

     En este último ejercicio, hemos añadido un filtro en la vista del tipo página, que creamos anteriormente, con la característica de ser FILTRO EXPUESTO, en lugar de ser un filtro único, de esta forma, ofreceremos a los usuarios, mediante la selección de dicho filtro, cuáles contenidos verán según sus necesidades.

     Los filtros expuestos nos permiten implementar, consultas dinámicas en nuestros contenidos sin que tengamos que complicarnos en el desarrollo de código complejo o tener conocimientos acerca del manejo de base de datos.

     También podremos ampliar las opciones disponibles en los filtros de las vistas de Drupal, con la implementación del módulo Better Exposed Filters que nos permite algunos extras interesantes, que explicaré en próximos videos. 

     Al momento de escribir este artículo, desgraciadamente este módulo sigue en proceso, por lo que todavía no es del todo estable para instalarlo en Drupal 9, posiblemente sea incorporado como una de las mejoras del núcleo de Drupal en posteriores versiones.

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 el potencial que nos ofrece el módulo "Vistas" o "Views", integrado en el núcleo de Drupal a partir de la versión 8, y que además hemos aprendido a Cómo trabajar con vistas en Drupal 9 y nos aventuramos creando nuestra primera Vista mostrando contenidos relacionados pasándole parámetros, para la que utilizamos un campo referenciado, que nos permitió, crear esa relación entre varios contenidos manualmente; llegados a este punto, nos encontramos con la incógnita siguiente: ¿Cómo podríamos crear una vista de contenidos relacionados, basándonos específicamente, en los términos o taxonomías que comparten?.

     Las taxonomías o términos de Drupal, se crearon específicamente para categorizar o clasificar nuestros contenidos, facilitándonos de esta forma, la configuración de relaciones entre ellos y por consiguiente, simplificando el uso de "Vistas" dinámicas, donde podríamos mostrar contenidos que compartan uno o varios términos.

     Por esta razón, hoy vamos a explicar cómo crear vistas de contenidos relacionados, que comparten términos o taxonomías, pasando como parámetros, el id del contenido principal, con el cual haremos la relación y posteriormente, el id del término o términos que comparte con otros contenidos, permitiéndonos de esta forma, la construcción de una vista, tipo bloque, que mostrará todos los contenidos relacionados cada vez que accedamos a la página el contenido principal.

Requisitos:

• Trabajando con contenidos y tipos
   

• Cómo trabajar con vistas en Drupal 9
   

• Taxonomías, Filtros en vistas

     Como relacionar contenidos usando taxonomías en una vista Drupal 9

     Paso 1 Creación de contenidos y taxonomías:

          Para que puedas realizar este ejercicio, lo primero que deberías crear son las taxonomías o términos, con los que relacionarás tus contenidos, y luego añadir el campo correspondiente, del tipo Taxonomía, dentro de tus tipos de contenido, para que puedas configurarlos al momento de crearlos o posteriormente.

     Paso 2 Creación de la vista contenidos relacionados:

          Como ya tienes todos los contenidos con los que vamos a trabajar, es el momento de crear una vista, del tipo bloque, a la que llamaremos "Artículos relacionados", porque en nuestro ejemplo, hemos decidido utilizar los artículos que trae por defecto Drupal.

          La idea en este ejercicio, es que al entrar en cualquier artículo, veremos una columna a su izquierda, donde se mostrarán todos los artículos que compartan el mismo término o taxonomía. 

     Una vez creada la vista, del tipo bloque, lo siguiente que haremos es añadir, en los filtros contextuales, un primer filtro en el que vamos a utilizar el ID del contenido, para eliminarlo del listado de resultados una vez que entremos en él.

     Una vez hayamos añadido la opción del valor predeterminado, sin salir de la misma pantalla, nos desplazamos haca la parte inferior, y haremos clic en el más que aparece justo debajo de "TÍTULO ADMINISTRATIVO" y marcaremos la opción excluir.

     Ya podemos hacer clic en el botón aplicar y podremos añadir el siguiente Filtro Contextual, esta vez, será el id de la taxonomía que nos permitirá crear el listado de contenidos que comparten el o los mismos términos o taxonomías.

     Al igual que en el ejemplo anterior, nos moveremos hacia la parte inferior de la pantalla, pero esta vez marcaremos la opción "Permitir múltiples valores", ya que nos interesa filtrar por uno o varios términos o taxonomías.

     Después podremos hacer clic en el botón guardar de la vista y ya podremos continuar con el siguiente paso, que consiste en la activación del bloque para que se muestre dentro de los artículos.

     Paso 3 Activación del bloque:

          El último paso consiste en activar nuestra "Vista tipo bloque", para ello nos moveremos a la url "/admin/structure/block", y en la pantalla de configuración seleccionaremos la zona o área donde mostraremos nuestro bloque, en mi caso he optado por el "Sidebar First", para mostrarlo en la columna izquierda del artículo.

     Ya podemos entrar a cualquiera de nuestros artículos, y si hemos añadido correctamente las taxonomías en varios artículos, veremos en la parte izquierda nuestra vista con los artículos relacionados.

• 1era. Parte
   
• 3ra. Parte

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

     Como ya hemos mencionado en anteriores ocasiones, uno de los módulos más potentes y funcionales de Drupal, es el encargado de gestionar las vistas, conocido cómo Views; que nos sirve para crear, entre otras cosas, todo tipo de consultas a la base de datos, utilizando la interfaz gráfica, sin la necesidad de tener conocimientos avanzados, sobre Mysql, bases de datos o ejecución de código para este tipo de resultados.

     Una de las opciones más empleadas al momento de trabajar con vistas, es la implementación o configuración de filtros, si te interesa crear una vista en la que muestres contenidos relacionados con un vocabulario o término específico, te invito a que revises el artículo en el que explico Cómo crear Vistas con filtros en Drupal 9, donde encontrarás varios ejemplos, paso a paso, además del video explicativo para que puedas entender y aplicar fácilmente los filtros más básicos de las vistas.

     En esta ocasión, vamos a conocer otras opciones más avanzadas, disponibles también desde la interfaz de Views, para que podamos crear vistas dinámicamente, utilizando el paso de parámetros desde la url, con la ayuda de los "Filtros Contextuales", a los que podremos acceder desde la parte derecha superior de la pantalla de gestión de vistas una vez estemos dentro de una de ellas.

Requisitos:

• Creación tipos de contenido
   

• Taxonomías, Filtros en vistas, Menús y CSS

 

Cómo pasar parámetros en las vistas con Drupal 9

     Paso 1 Creación de contenidos:

          Para este ejercicio vamos a necesitar la creación de dos tipos de contenido "Artista" y "Canción", además necesitaremos crear un vocabulario o "Taxonomía", con el nombre "Género musical". 

          El objetivo es crear varios artistas, con sus respectivas canciones añadidas y en cada canción, a su vez, podremos ver el género musical al que pertenece y el año en que fue publicada.

          En el caso del tipo de contenido "Artista", tendrás que añadir dos campos, "Fotografía artista", que será un campo del tipo "Imagen" y luego tendrás que añadir un campo del tipo "Referencia de entidad", para poder conectar a cada artista con sus respectivas "Canciones", que son nuestro segundo tipo de contenido.

          En el tipo de contenido "Canción", tendrás que añadir el campo "Año", del tipo "Texto (sin formato)", para rellenar con el año del lanzamiento de la canción y posteriormente, tendrás que añadir un campo del tipo "Referencia de entidad", conectado al vocabulario o "Taxonomía" llamado "Género musical"

Paso 2 Creación vista Artistas del Tipo Página:

     La primera de las vistas que vamos a crear será del tipo página y en ella mostraremos las imágenes de los artistas con el nombre de cada uno. Luego al hacer clic sobre la imagen o el nombre del artista, accederemos a la "Ficha", donde mostraremos la información relacionada con sus canciones.

     Ya sabemos que para crear vistas, tendremos que acceder en el menú superior a "Estructura/Vistas/Agregar Vista", una vez estemos en la pantalla de creación de las vistas, seleccionaremos el tipo de contenido "artistas" y crearemos una vista del tipo página, dejando todos los parámetros por defecto.

     Una vez dentro de la vista, realizaremos algunas modificaciones, como el cambio en los títulos de administración y añadir un enlace para poder acceder desde el menú principal.

     Dentro de esta vista, estamos trabajando con "Contenidos", en lugar de "Campos", por lo que si queremos modificar la forma en que se presenta la información, dentro de esta vista, tendremos que hacer las modificaciones en el "Modo de vista", dentro del contenido "Artista"; específicamente, modificaremos el Modo de vista "Resumen".

     Por eso nos iremos al menú ·Estructura/Tipo de Contenido/ Artista/ Gestionar Presentación", y una vez allí, haremos clic en la pestaña correspondiente al Modo de vista "Resumen", donde podremos desactivar y modificar todos los campos que hagan falta para conseguir el resultado esperado.

Paso 3 Creación Vista Bloque usando Filtros Contextuales

     La siguiente parte del ejercicio, nos lleva a crear una Vista del tipo Bloque, en la que vamos a mostrar el listado de canciones, con la información adicional, sobre el año de publicación de la canción y el Género al cual pertenece.

     Lo primero que haremos es volver a la pantalla de creación de las vistas y, esta vez, añadiremos una del Tipo Bloque, en lugar del Tipo página que utilizamos en la vista anterior.

     Cómo queremos mostrar las canciones de los artistas y éstas son un campo referenciado, dentro del tipo de contenido "Artista", tendremos que seleccionarlo como tipo de contenido, para poder acceder luego a sus canciones.

     Una vez dentro de la pantalla de configuración de la vista, realizaremos unas cuantas modificaciones, como el "Nombre del Bloque", para poder facilitarnos su activación posteriormente.

     Si guardamos la vista, y la activamos tal como la tenemos hasta este momento, yendo a "Estructura/Administrar Bloques", veremos que, al volver hacia la ficha del artista, se nos muestran todas las canciones, pero sin diferenciar de qué artista se trata. Por esta razón, tendremos que editar la vista y añadir un tipo de filtrado específico con los llamados "Filtros Contextuales", que nos permitirán, en este caso, filtrar el contenido, usando como referencia el "Id" o identificador del contenido, para poder imprimir los campos que están específicamente relacionados con él.

Paso 4 Correcciones en la ficha del artista:

     El último paso que nos queda, para concluir con el ejercicio, es modificar el "Modo de Vista Default", que es el que se nos muestra al entrar en cualquier contenido, en este caso, cuando accedemos a la "Ficha del artista", así que realizaremos los cambios parecidos a los del Modo de Vista Resumen, para que sólo se muestre la imagen y el nombre de cada artista.

Otras modificaciones extras:

     Aunque no lo cuento en el video, porque ya sabes cómo modificar el "Modo de Vista", en cualquier tipo de contenido, en el caso de las canciones, para que tu ejercicio quede exactamente igual al mío, he modificado el "Modo de Vista Default", del tipo de contenido "Canción". En la pestaña editar, del contenido "Canción", desactivé la pestaña que publica la fecha de publicación y creación del tipo de contenido.

• 2da. Parte
   
• 3ra. Parte