6.9. Theming de Views en Drupal. Crear un slideshow tipo Owl Carousel con miniaturas.

Muy a menudo, la plantilla predeterminada de Views no se ajusta a nuestras necesidades, por lo que podemos sobrescribir las plantillas de Views. Desafortunadamente, no existe una interfaz gráfica para buscar la plantilla deseada en Views, pero podemos usar patrones para redefinir plantillas.

Más sobre patrones en este artículo:

6.6. Trabajo con plantillas en Drupal. Qué son las plantillas en el núcleo de Drupal.

En particular, nos interesa esto:

A continuación se presentan los posibles nombres de plantilla para sobrescribir:

Nombre de la vista - foobar (nombre de máquina)
Formato de visualización - unformatted (lista sin formato, se pueden agregar otros)
Estilo de visualización - fields
Nombre de la visualización — page

views-view--foobar--page.html.twig
views-view--page.html.twig
views-view--foobar.html.twig
views-view.html.twig

views-view-unformatted--foobar--page.html.twig
views-view-unformatted--page.html.twig
views-view-unformatted--foobar.html.twig
views-view-unformatted.html.twig

views-view-fields--foobar--page.html.twig
views-view-fields--page.html.twig
views-view-fields--foobar.html.twig
views-view-fields.html.twig

El plugin Owl Carousel 1.x no tiene la capacidad de mostrar miniaturas en la galería. Por lo tanto, utilizaremos Owl Carousel versión 2.x, que sí ofrece soporte para miniaturas. Si no deseas profundizar en la redefinición de plantillas, escribir CSS y código JavaScript, puedes simplemente instalar el módulo Views Slideshow:

https://www.drupal.org/project/views_slideshow

O el módulo Flex Slider:

https://www.drupal.org/project/flexslider

Con ellos puedes configurar un slideshow rápidamente sin necesidad de conocimientos de CSS o jQuery.

Nosotros practicaremos la redefinición de plantillas de Views y la inclusión de librerías jQuery.

Para comenzar, descarga e incluye la librería Owl Carousel 2.x:

https://github.com/OwlCarousel2/OwlCarousel2

Quizás encontraste Owl Carousel 1.x:

https://github.com/OwlFonk/OwlCarousel

No nos sirve, ya que no soporta miniaturas y requiere código adicional.

Copia la carpeta owl-carousel (donde se encuentra el archivo owl.carousel.min.js) en la carpeta de tu tema, ahora vamos a incluir los archivos CSS y JS del carrusel. Agrega las siguientes líneas al archivo .libraries.yml de tu tema:

global-styling:
  version: 1.x
  css:
    theme:
      owl-carousel/owl.carousel.css: {}
      owl-carousel/owl.theme.css: {}    
      owl-carousel/owl.transitions.css: {}
      css/style.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
    owl-carousel/owl.carousel.min.js: {}
  dependencies:
    - core/jquery

No moví los archivos JS dentro de la carpeta /js, ni los CSS dentro de /css, pero puedes hacerlo; solo recuerda corregir las rutas de las imágenes en los archivos CSS si las colocas en la carpeta images.

Para aplicar los cambios es necesario limpiar la caché.

Ahora crea un tipo de contenido llamado galería y añade un campo de imagen.

Crea una nueva vista donde se muestre solo el campo de imagen del nuevo tipo de contenido.