Es posible que te hayas encontrado con la necesidad de imprimir algún contenido, dentro de un paragraphs en un sitio multi-idioma.
En mi caso me tocó hacerlo con el witget de Turitop, para un sitio en dos idiomas, así que comparto el ejemplo por si te hace falta.
La solución es implementar una preprocess function:
Para extraer la url de un campo media e imprimirlo en tu plantilla Twig, tanto si el campo está en el primer nivel del Paragraphs o dentro de un Paragraphs, que está anidado en otro.
Los ejemplos se puedes aplicara contenidos, productos o paragraphs en Drupal.
Si estás tratando de implementar algún carrusel para Drupal 10, siguiendo ejemplos que haz encontrado en internet, esto te ayudará a corregirlo.
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.
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.
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.
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.
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.
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:
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.
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.
Requisitos:
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.
Si estás acostumbrado a trabajar con Boostrap, es posible, que algunas ocasiones, tengas que ajustar el tamaño de las imágenes, para que se adapten al contenedor dentro de una tarjeta .card, de bootstrap.
Debido a que estamos trabajando con Bootstrap 5, para la creación de nuestra Landing Page personalizable en Drupal 8/9/10, hoy utilizaremos las clases de Bootstrap 5 compatibles con Flexbox; de esta manera, nuestro diseño quedará adaptado a múltiples dispositivos (Responsive), sin la necesidad de manipular nuestra hoja de estilos.
Si analizamos el comportamiento que esperamos obtener para la visualización de nuestra Landing Page, al acceder desde un ordenador, veremos que en la parte central, los elementos deberían presentarse dentro de tres columnas, las dos primeras para la imagen e información del producto, y la última, a todo el ancho del contenido, donde se muestra el formulario para la realización de los pedidos.
Al acceder a la Página Oficial de Bootstrap, en el apartado de Utilidades, dedicado a FLEX HAZ CLIC AQUI, podremos explorar el listado de clases y sus comportamientos, para facilitarnos la aplicación de casi todas las opciones necesarias en nuestros diseños resposivos, sin demasiados cambios en las hojas de estilos css.
Si ya conocías Bootstrap, sabrás que, añadiendo una o varias clases dentro de cualquier contenedor o etiqueta html, obtendrás el mismo resultado que si aplicaras varias líneas de código css; esto implica un ahorro considerable dentro de las tareas de diseño, además de ofrecer una amplia documentación y varios ejemplos, que podrás encontrar, tanto dentro de la página oficial, como el muchas otras disponibles en internet.
Ahora que ya sabemos cómo documentarnos, sobre el uso de las clases de Bootstrap y Flexbox, volvamos a explorar el archivo node--landingpage--full.html.twig, responsable de mostrar nuestra plantilla.
Recuerda, que hemos creado esta plantilla, gracias a que activamos el modo Debug o Depurador de Drupal, explicado en capítulos anteriores del curso.
Si prestamos atención en el código que forma, la parte superior de la plantilla, donde hemos añadido ya la imagen de cabera y el texto que aparece justo debajo de ella, encontraremos algunas de las clases de Bootstrap y Flexbox que acabamos de comentar.
{% if content.field_cabecera_landing|render is not empty %}
<div class="d-flex container-fluid" lc-helper="background" style="height:50vh;background:url({{ file_url(content.field_cabecera_landing[0]['#media'].field_media_image.entity.uri.value) }}) center / cover no-repeat;">
{% endif %}
</div>
<div class="container p-5 bg-light" style="margin-top:-100px">
<div class="row">
<div class="col-md-4 text-center align-self-center">
<div class="lc-block border-end border-2 ">
<div editable="rich">
<p class="display-4 text-secondary">WHY?</p>
</div>
</div><!-- /lc-block -->
</div><!-- /col -->
<div class="col-md-8">
<div class="lc-block ">
<div editable="rich">
<p class="display-4">{{ label.0 }}</p>
</div>
</div><!-- /lc-block -->
</div><!-- /col -->
</div>
d-flex: Es la primera de las clases que deberíamos añadir en nuestra etiqueta HTML, para poder emplear la combinación de Flex y Boostrap; añadirla es el equivalente a escribir la propiedad display: flex, dentro de nuestra hoja de estilos.
container / container-fluid: tiene la misma funcionalidad que ya conoces de Boostrap, y que en este caso, añadirá la propiedad padding, configurada por defecto para Drupal, cuando utilizamos el tema basado en Boostrap.
p-5: Esta clase es la encargada de modificar la propiedad padding, tienes varios valores disponibles, además de la opción de utilizarla, especificando si quieres aplicar un padding-top pt-5, o padding buttom pb-5, por ejemplo.
align-self-center: esta clase, como su nombre lo indica, se encargará de centrar los elementos, dentro del contenedor.
col-md-4: esta es una de las clases que ya deberías conocer, por versiones anteriores de bootstrap, encargada de adaptar el tamaño de la columna, en los dispositivos de tamaño medio (Tablets, Ipads, etc.)
Si quieres profundizar más sobre las clases disponibles y su implementación, te recomiendo visitar la página oficial de Boostrap. HAZ CLIC AQUI.
Es el momento de continuar con el resto de cambios necesarios, para seguir ajustando nuestra Landing Page, hasta conseguir que se parezca a nuestra propuesta de diseño.
En esta ocasión, vamos a sustituir en nuestra plantilla, todo el espacio que ocupa el texto central, para dejarle paso, a dos nuevas filas, donde añadiremos los campos correspondientes, encargados de mostrar las imágenes e información de los productos, además del formulario para los peidos.
He añadido un para de clases adicionales, sólo para que sea más fácil de entender, donde colocaremos cada uno de los elementos.
El resultado final, con el nuevo cambio, debería ser parecido al siguiente código:
<div class="row contenido-central">
<div class="col-md-12">
<div class="row info-productos">
LOS PRODUCTOS AQUI
</div>
<div class="row formulario-pedidos">
EL FORMULARIO AQUI
</div>
</div>
</div>
</div>
Ahora ya tenemos claro, cuál debería ser la estructrura para conseguir el resultado esperado en mi Landing Page, el problema con el que nos encontramos, es que nuestra plantilla sólo tienes dos campos, con los que podamos jugar, field_cabecera_landing y field_contenidos_landing, ya que hemos optado, por el uso de paragraphs, para facilitar la personalización de sus contenidos.
Si volvemos a la parte del código donde imprimimos nuestra imagen, podremos concluir, que lo que necesitamos para obtener el resto de valores de nuestra página, es añadir la variable que imprime el campo global de los paragraphs y a continuación, añadir las plantillas correspondientes, para cada uno de los elementos contenidos dentro de éste.
Lo primero que deberíamos hacer será remover la parte del código donde estarán las imágenes, información y el formulario, para añadir dentro sólo el campo global de los paragraphs.
Por ahora, nuestra plantilla principal, node--landingpage--full.html.twig, debería quedar con el suguiente resultado:
<div class="row contenido-central">
<div class="col-md-12 p-5">
{{ content.field_contenidos_landing }}
</div>
</div>
</div>
Una vez añadido el código anterior, si visitamos nuestra Landing Page, deberíamos ver en pantalla, algo parecido a la siguiente imagen:
Si todo ha ido correctamente, y ves en pantalla un resultado parecido al anterior, es el momento de inspeccionar los elementos y crear las plantillas correspondientes a cada paragraphs, para cotinuar con el resto de modificaciones.
El código final de la plantilla general para la landing (node--landingpage--full.html.twig), que incluye además, el campo de selección para el color, gracias al módulo Color Field, será :
{{ attach_library('bootstrap_barrio/node') }}
{%
set classes = [
'node',
'node--type-' ~ node.bundle|clean_class,
node.isPromoted() ? 'node--promoted',
node.isSticky() ? 'node--sticky',
not node.isPublished() ? 'node--unpublished',
view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
'clearfix',
]
%}
<article{{ attributes.addClass(classes) }}>
<header>
{{ title_prefix }}
{% if label and not page %}
<h2{{ title_attributes.addClass('node__title') }}>
<a href="{{ url }}" rel="bookmark">{{ label }}</a>
</h2>
{% endif %}
{{ title_suffix }}
{% if display_submitted %}
<div class="node__meta">
{{ author_picture }}
{% block submitted %}
<em{{ author_attributes }}>
{% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
</em>
{% endblock %}
{{ metadata }}
</div>
{% endif %}
</header>
<div{{ content_attributes.addClass('node__content', 'clearfix') }}>
{% if content.field_cabecera_landing|render is not empty %}
<div class="d-flex container-fluid" lc-helper="background" style="height:50vh;background:url({{ file_url(content.field_cabecera_landing[0]['#media'].field_media_image.entity.uri.value) }}) center / cover no-repeat;">
{% endif %}
</div>
<div class="container p-lg-5" style="margin-top:-100px;
background-color: {{ content.field_color_fondo_landing.0 }}"
>
<div class="row">
<div class="col-md-4 text-center align-self-center">
<div class="lc-block border-end border-2 ">
<div editable="rich">
<p class="display-4 text-secondary">WHY?</p>
</div>
</div><!-- /lc-block -->
</div><!-- /col -->
<div class="col-md-8">
<div class="lc-block ">
<div editable="rich">
<p class="display-4">{{ label.0 }}</p>
</div>
</div><!-- /lc-block -->
</div><!-- /col -->
</div>
<div class="row contenido-central">
<div class="col-md-12 p-md-5">
{{ content.field_contenidos_landing }}
</div>
</div>
</div>
</div>
</article>
El código correspondiente a la parte superior, donde mostramos la imagen del producto, acompañada de un título y un párrafo, (paragraph--bloque-imagen-y-textos.html.twig) será:
{%
set classes = [
'paragraph',
'd-lg-flex',
'paragraph--type--' ~ paragraph.bundle|clean_class,
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
not paragraph.isPublished() ? 'paragraph--unpublished'
]
%}
<style>
@media (min-width: 992px) {
.field--name-field-imagen-producto {
width: 550px;
}
}
</style>
{% block paragraph %}
<div{{ attributes.addClass(classes) }}>
{% block content %}
<div class="row no-gutters d-flex">
<div class="imagen-producto d-sm-column">
{{ content.field_imagen_producto }}
</div>
</div>
<div class="row no-gutters d-flex">
<div class="texto-producto d-sm-column">
<h2>{{ content.field_texto_superior.0 }}</h2>
<p>{{ content.field_textos_producto.0 }}</p>
</div>
</div>
{% endblock %}
</div>
{% endblock paragraph %}
Para la plantilla, encargada de modificar el aspecto gráfico correspondiente al formulario, que además incluye la etiqueta html <hr />, con algunos estilos en línea, (paragraph--bloque-formulario.html.twig), será:
{%
set classes = [
'paragraph',
'd-flex flex-column',
'paragraph--type--' ~ paragraph.bundle|clean_class,
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
not paragraph.isPublished() ? 'paragraph--unpublished'
]
%}
{% block paragraph %}
<div{{ attributes.addClass(classes) }}>
{% block content %}
<hr style="height: 5px; background-color: #333333;margin-top: 40px; margin-bottom: 40px"/>
<div class="titular text-align-center flex-row"><h2>{{ content.field_titulo_formulario }}</h2></div>
<div class="formulario">
{{ content.field_formulario_bloque }}
</div>
{% endblock %}
</div>
{% endblock paragraph %}
Hoy hemos decidido que estamos dispuestos a seguir aprendiendo Drupal, porque nos apasiona obtener nuevos conocimientos, que solucionarán posibles retos en nuestro futuro próximo, o porque nos encanta ampliar nuestras posibilidades, tanto a nivel laboral como personal. Ya que la puesta en marcha de proyectos web, podrían representar el inicio hacia una carrera prometedora.
Ahora que ya tenemos claro Cómo crear un módulo en Drupal 9, en esta ocasión nos vamos a concentrar, en la creación de una plantilla personalizada, con el objetivo de tomar el control sobre la presentación de los datos relacionados con el mismo. Para lograr nuestro propósito, tendremos que implementar uno de los "hooks" o funciones prefabricadas de Drupal que nos permitirán lograr toda clase de objetivos, en este caso será function hook_theme, la que se encargará registrar las implementaciones de un tema o "theme", dentro de nuestro tema o módulo personalizado.
En este capítulo vamos a crear un módulo personalizado, al que añadiremos un controlador, que nos imprimirá en pantalla una página y posteriormente, también añadiremos mediante la function hook_theme en el archivo ( MIMODULO.module ) los datos y configuraciones que nos permitirán pasar por parámetros el título y otros contenidos que mostraremos en ella.
Finalmente, añadiremos el archivo routing ( MIMODULO.routing.yml ), para poder acceder a esta página una vez haya sido activado nuestro módulo personalizado. Este ejemplo te permitirá conocer la manera en que podrás implementar plantillas personalizadas en tus módulos.
- Cómo crear un módulo en Drupal 9
Lo primero que deberías saber es cómo crear un módulo personalizado. Esencialmente para este ejemplo, lo que necesitarás será una carpeta con el nombre de tu módulo y dentro el archivo con el nombre del módulo y la extensión, eje.: "mimodulo.info.yml"
En el archivo MIMODULO.module es donde podremos implementar los hooks o funciones de php en Drupal, en este ejemplo utilizaremos la function hook_theme, que se encarga de registrar las implementaciones del tema dentro de un módulo o tema personalizado, esto quiere decir, que las implementaciones declaradas por este hook o función especifican cómo un arreglo o array de renderización particular debe ser renderizada como HTML.
Los párametros que utilizaremos en este ejercicio, estarán dentro de un array que nos devolverá la función y son, el nombre de la función y dentro de de ella, las variables que pasaremos posteriormente al controlador, para crear la página que imprimiremos una vez activado el módulo.
Dentro de las variables, a su vez, tendremos un array de items, donde colocaremos todos las noticias que queremos presentar en la página una vez renderizada y el título de la página que será del tipo String.
<?php
/**
* Implement hook_theme().
*/
function listado_noticias_theme($existing, $type, $theme, $path) {
return [
'listado_noticias' => [
'variables' => ['items' => [], 'title' => '' ]
]
];
}
El Controlador o Controller es quien nos permitirá crear la página que se mostrará, una vez activado nuestro módulo, al renderizar los datos que hemos definido previamente en nuestra function hook_theme.
Para que pueda generarse nuestra página, vamos a añadir a nuestra clase controlador, un método al que llamaremos "page()", y dentro tendremos dos arrays, uno que contendrá el listado de noticias que vamos a recorrer usando nuestra function hook_theme, y otro con los datos que obtendremos al conectar con la información recibida desde la function hook_theme.
Una vez creada nuestra clase controller con el nombre ListadoNoticiasController.php, dentro tendremos la siguiente estructura de código.
<?php
namespace Drupal\listado_noticias\Controller;
use Drupal\Core\Controller\ControllerBase;
class ListadoNoticiasController extends ControllerBase {
public function page(){
$items = [
['title' => 'Noticia 1'],
['title' => 'Noticia 2'],
['title' => 'Noticia 3'],
['title' => 'Noticia 4'],
];
return [
'#theme' => 'listado_noticias',
'#items' => $items,
'#title' => 'Listado de noticias'
];
}
}
El primer array, es un array de objetos, ya que cada noticia podrá tener tantos elementos como queramos especificar, para este ejemplo, sólo añadiremos el título, pero puedes añadir tantos como necesites, siempre tomando en cuenta la estructura ( "clave" => "valor" ), ya que los objetos, en realidad también son arrays.
$items = [ ['title' => 'Noticia 1'], ['title' => 'Noticia 2'], ['title' => 'Noticia 3'], ['title' => 'Noticia 4'], ];
El segundo array, que tendremos dentro de nuestro método "page()", es el que nos devolverá nuestro método al llamarlo, contendrá los parámetros necesarios para renderizar los datos recibidos desde la function hook_theme, y que harán posible la impresión en pantalla, de nuestros contenidos en formato de una página, al activar el módulo.
En el primer parámetro del array, estamos llamando a nuestra función tema, que configuramos usando la function hook_theme, el segundo parámetro son los items, que hemos definido como una de las variables que pasamos y el último, será el título de la página, que también definimos mediante la función.
Esto hará posible, que posteriormente podamos recorrer el primer array de items y mostrarlos en la plantilla correspondiente, que todavía no hemos creado.
return [ '#theme' => 'listado_noticias', '#items' => $items, '#title' => 'Listado de noticias' ];
Una vez terminada la configuración de los datos que vamos a presentar en nuestra página, al invocar el método "page()", necesitaremos un modo de acceso, mediante url, para que podamos acceder a esta página y ver sus datos.
En esta tarea nos ayudará el archivo listado_noticias.routing.yml , dentro de este archivo vamos a definir la url hacia nuestra página, el namespace para que drupal pueda encontrar en nuestro controlador el método que mostrará los datos y finalmente los permisos asociados a nuestro contenido, que serán los permisos por defecto, para que cualquier usuario que entre a la web, pueda verlo sin problemas.
Es muy importante respetar los espacios al escribir los datos dentro del archivo rounting, se recomienda evitar la tecla tab para hacerlo y en su lugar, es mejor la barra espaciadora del teclado, contando con dos espacios a cada nueva línea que vayamos añadiendo.
listado_noticias.listado:
path: '/listado-noticias'
defaults:
_controller: '\Drupal\listado_noticias\Controller\ListadoNoticiasController::page'
requirements:
_permission: 'access content'
La última fase de este desarrollo, antes de activar el módulo, será la creación de nuestra plantilla, para dar formato a la presentación de los datos, una vez activado nuestro módulo.
Para los nombres de las plantilla, se debe utilizar el guión medio "-", en lugar del guión bajo "_", y el nombre que debemos utilizar será el mismo de nuestra función tema, que hemos declarado en el function hook_theme.
Por lo tanto, el nombre que tendremos que utilizar en este ejemplo será "listado-noticias.html.twig", además, colocaremos nuestras plantillas dentro de una carpeta llamada templates, siguiendo con la estructura habitual de drupal para todos sus módulos.
Ahora que ya tenemos la plantilla creada, sólo resta imprimir los valores usando las dobles llaves, ej.: {{ title }} y en el caso de las noticias, crearemos un "ciclo for", para poder recorrer el array de items y acceder a todos sus datos relacionados.
<h3>{{ title }}</h3>
<ul>
{% for noticia in items %}
<li>{{ noticia.title }}</li>
{% endfor %}
</ul>
Ya podemos activar nuestro módulo y luego al acceder a la url que hemos definido dentro del archivo listado_noticias.routing.yml, veremos nuestra página con todos los datos que habíamos configurado.
El lenguaje Twig es una evolución, adaptada a todo público, que facilita su aplicación, a pesar de que no tengas muchos conocimientos sobre programación php.
Twig es amigable tanto para el diseñador como para el desarrollador al adherirse a los principios de PHP y agregar funcionalidad útil para entornos de creación de plantillas.
Las características clave son...
Rápido: Twig compila plantillas en código PHP optimizado simple. La sobrecarga en comparación con el código PHP normal se redujo al mínimo.
Seguro: Twig tiene un modo de caja de arena para evaluar el código de plantilla que no es de confianza. Esto permite que Twig se use como lenguaje de plantilla para aplicaciones en las que los usuarios pueden modificar el diseño de la plantilla.
Flexible: Twig funciona con un lexer y un analizador flexibles. Esto permite al desarrollador definir sus propias etiquetas y filtros personalizados y crear su propio DSL.
Twig es utilizado por muchos proyectos de código abierto como Symfony, Drupal8, eZPublish, phpBB, Matomo, OroCRM; y muchos marcos lo admiten, así como Slim, Yii, Laravel y Codeigniter, solo por nombrar algunos.
Te dejo los enlaces, para que puedas comenzar a utilizar Twig, en tus plantillas de Drupal, tanto de contenidos, como de las vistas
Puedes encontrará más información sobre Twig, en su Página Oficial. HAC CLIC AQUÍ
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:
