views

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

Views | Personalizar vistas con plantillas (Parte 2)

Video de Youtube
URL de Video remoto

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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

   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:

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony
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:

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony
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:

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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:

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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:

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Seleccionado el estilo GRID y dejando todo lo demás por defecto, el resultado será el siguiente:

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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:

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

   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:

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

Views | Personalizar vistas con plantillas (Parte 1)

Video de Youtube
URL de Video remoto

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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony
  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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

   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:

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas y Taxonomías | Creación de un catálogo con vistas (Parte 2)

Video de Youtube
URL de Video remoto

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).

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     ¿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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

          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

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas y Taxonomías | Creación de un catálogo con vistas (Parte 1)

Video de Youtube
URL de Video remoto

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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

               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

 

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

             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".

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

             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.

 

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

             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.

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

            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.

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

            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.

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

              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.

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

                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.

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

              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.

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

             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.

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Views Drupal | Uso de filtros dentro de una vista

Video de Youtube
URL de Video remoto

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:

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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. 

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

Ejercicios:

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

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

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

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

Views | Vistas con taxonomías y Cotenidos relacionados

Video de Youtube
URL de Video remoto

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:

     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. 

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Drupal Views | www.drupaladicto.com - Consultor especializado en drupal y symfony

Views | Vistas con parámetros en Drupal 9

Video de Youtube
URL de Video remoto

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:

 

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.

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

          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"

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

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.

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

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.

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

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.

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

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.

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Vistas Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Views | Trabajando con Vistas, Carrusel y Cuadrícula

Video de Youtube
URL de Video remoto

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 todo proyecto realizado con Drupal, es muy importante que entendamos cómo instalar e implementar nuevos módulos, que harán nuestros proyectos más funcionales y/o atractivos a clientes y usuarios; además, que esté a nuestro alcance el conocimiento necesario, para mostrar los contenidos utilizando el módulo Views, que ahora está integrado en el núcleo de Drupal y que ofrece la posibilidad, entre otras, de mostrar contenidos en diferente forma y con varias opciones, cuya configuración puede hacerse utilizando su interfaz, sin que exista la necesidad de conocer cómo funcionan las consultas de bases de datos.

     En Drupal existen dos tipos de módulos, los contribuidos y los personalizados. Los módulos contribuidos o Contrib, son aquellos que podemos descargar desde la página oficial de Drupal y al igual que los Themes, se deberán colocar en su carpeta específica. 

     En el caso de utilizar el gestor de paquetes Composer, éste se encargará automáticamente, al igual que con los Themes, de crear una carpeta llamada Contrib, que estará ubicada dentro de la carpeta modules, que trae la instalación de Drupal por defecto.

     Si vamos a trabajar con módulos personalizados, lo recomendable sería crear otra carpeta con el nombre Custom, al mismo nivel de la carpeta Contrib y así obtendríamos una mayor organización del código que facilitará las tareas de mantenimiento.

curso drupal 8  | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Al igual que haríamos para instalar los Themes, con los módulos tenemos tres maneras de descargarlos, las dos primeras ya las vimos en el capítulo de Themes, que consistían en copiar el enlace del módulo en este caso y luego pegarlo en el campo correspondiente a instalar módulo, dentro de la url "/admin/modules/install" y una vez pegado el enlace, hacíamos clic en el botón Instalar Módulo.

curso drupal 8  | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Otra de las maneras que existe para instalar un Módulo, es la de descargar el archivo comprimido directamente desde la página oficial correspondiente, y luego desde esta misma ventana cargar el archivo descargado usando el botón Seleccionar archivo y a continuación hacer clic en el mismo botón instalar.

 

     Pero al tercera forma es la recomendada a partir de la versión 8, se trata de utilizar el gestor de paquetes Composer, eso nos reduce considerablemente las preocupaciones sobre las dependencias de los módulos descargados y nos facilitará las tareas de actualizaciones, tanto si se trata de los módulos, themes o el mismo núcleo de Drupal.

curso drupal 8  | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Módulo Views o Vistas:

          Este es uno de los módulos más importantes que tiene Drupal y que fue integrado en el núcleo, a partir de la versión 8. El módulo Views nos permite crear consultas a la base de datos de Drupal, utilizando la interfaz de usuario, lo que significa es que no es un requisito contar con conocimientos avanzados sobre administración de bases de datos, cración de tablas, etc.

          A grandes rasgos, el concepto de crear una vista sería, piensa en el o los tipos de contenidos que quieres mostrar, luego si necesitas filtrar de algún modo esos contenidos, para que cumplan con unas condiciones específicas y a continuación, dónde y cómo lo quieres presentar.

          Para crear una vista, tendremos que ir a la url "/admin/structure/views", o si ya tienes instalado el módulo Admin Toolbar, entonces sólo necesitarás acceder a los botones del menú superior tal y como te muestro en la imagen.

curso drupal 8  | www.drupaladicto.com - Consultor especializado en drupal y symfony

          Como en nuestro proyecto Drupal estamos implementando un Subtheme basado en Bootstrap Barrio, podremos descargar y activar un módulo que aumentará nuestras opciones con las vistas, se trata del módulo contribuido Views Bootstrap, lo utilizaremos para crear un carrusel y unas cuadrículas, sin complicarnos la vida con grandes horas buscando el código necesario.

curso drupal 8  | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Así que si volvemos a la pantalla de las vistas, ahora podremos elegir entre varias nuevas opciones como el carrusel de Bootstrap que no vienen por defecto en el módulo Views y que nos facilitarán enormemente cualquier tarea como esa.

curso drupal 8  | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Para este ejercicio, nuestro propósito será lograr construir un carrusel tal y como se presenta en la Página Oficial, como ya hemos creado en nuestro proyecto, todos los elementos que necesitaremos, lo que nos faltará será construir la estructura utilizando Views y el Módulo Views Bootstrap que hemos activado

curso drupal 8  | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Tras añadir todos los campos necesarios y hacer algunos ajustes en la configuración de nuestra vista, tanto en los campos como en la configuración del propio carrusel que nos ofrece el módulo...

curso drupal 8  | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Ya tendremos nuestro carrusel funcionando, listo para mostrarlo en la página principal. Para ello nos iremos a la administración de bloques, en la url "/admin/structure/block" o utilizando el menú superior en el caso de que tengas instalado en módulo Admin Toolbar, y una vez allí, seleccionaremos el área dónde queremos que se muestre nuestra Vista tipo Bloque... y a disfrutarlo!!!

curso drupal 8  | www.drupaladicto.com - Consultor especializado en drupal y symfony

     El siguiente proceso consistirá en crear otro bloque, del tipo Cuadrícula, donde mostraremos los servicios destacados, aprovechando, al igual que en el ejemplo anterior, que ya tenemos creados dichos servicios con todos los campos que vamos a necesitar.

curso drupal 8  | www.drupaladicto.com - Consultor especializado en drupal y symfony