Antes de realizar cualquier tipo de actualización en tu proyecto de Drupal, es altamente recomendable, sacar una copia de tu base de datos actual, para evitar posibles pérdidas de información durante el proceso. Tienes varias opciones para extraer esta copia de la base de datos.
Para exportar la base de datos de tu proyecto Drupal, utilizando Drush, colócate en la carpeta raiz de tu proyecto, usando tu consola de comandos y a continuación, ejecuta el siguiente comando, sustituyendo el final, por el nombre que quieres para identificar tu copia de seguridad:
drush sql:dump --result-file=../mi_backup.sql
Si tienes activado el administrador de Base de datos PhpMyAdmin, puedes exportar tu base de datos, a través de su interfaz. Para ello, sólo tienes que acceder a PhpMyAdmin, y a continuación seleccionar la base de datos que necesitas exportar; luego seleccionas el botón exportar, desde el menú superior de PhpMyAdmin y haces clic en continuar.
El resultado será un archivo con la extensión .sql, que se descargará automáticamente.
Para extraeer una copia de tu base de datos, a través de los comandos MySql, deberás ejecutar la siguiente línea, sustituyendo los datos del usuario root, y tu bases de datos y el archivo.sql resultante.
mysqldump -u usuario -p base_de_datos > archivo.sql
Otra forma que nos ofrece Drupal, para exportar una copia de la base de datos, será a través del módulo Backup and Migrate, con el que podremos descargar, a través de la interfaz de Drupal, una copia completa de nuestro sitio web, en formato comprimido, que podremos importar en el entorno local o cualquier otro entorno que necesitemos.
Si quieres aprender a configurar y utilizar el Módulo Backup and Migrate 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.
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.
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
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.
Ahora que ya tenemos claro la línea de la plantilla donde podremos imprimir los valores deseados, nos falta tener en cuenta dos cosas:
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.
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:
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 }}
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:
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Í
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.
drush config-set system.theme default Subtheme_name -y
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Í
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.
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:
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
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).
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.
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.
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
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.
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.
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
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
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.
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.
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.
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.
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.
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.
