Desarrollo de un slider en Drupal

Tener un slider donde se vean varias imágenes (con o sin texto) en la cabecera de la página web resulta muy atractivo visualmente. Tanto que p.ej en muchos temas de WordPress y Drupal se incluye esta funcionalidad en forma de módulo (Drupal) o plugin (WordPress). De esta forma un usuario sin conocimientos de programación puede configurar el slider.

Pero a mí como desarrollador me gusta mas la idea de controlar las cosas mas que dejarlas en manos de terceros (sobretodo si el módulo  no esta los suficientemente maduro), así que para Drupal pensé que no seria muy difícil meter un slider y poder editar y añadir slides.

Maqueta Html/CSS/Javascript

El caso es que partimos de una maqueta Html/CSS con el código javascript necesario para ver un slider. La librería escogida para el slider es una bastante sencilla y gratuita. Se trata de SlidesJ, que recientemente se ha actualizado para hacer el slide responsive entre otras cosas. Yo he utilizado una versión mas antigua (1.1.9) pero el funcionamiento es similar en la nueva versión.

El código de marcado html para el slider en el header es el siguiente

Se trata de seguir un marcado determinado para que el script funcione, esto es un div que contenga otro div con la clase slides_container donde tenemos diferentes divs con la clase slide (que es lo que se animará). El caption es opcional y muestra como añadir animaciones extras una vez se ha completado la transición. Finalmente ponemos un marco en forma de imagen png.

El código javascript necesario para montar el slider es éste (se añade la función slides al objeto jquery del div contenedor)

En el  css fijamos la posición absoluta del marco del slider (#frame) y del contenedor de los slides (#slides).

Todo este código esta sacado de la documentación de SlideJS (de la versión antigua)

En definitiva quedaría de esta forma:

nomes_mascotes_slider

El código de ésta maqueta te lo puedes descargar aquí

 Generación de los slides dinámicamente en Drupal

Esta claro que necesitamos un tipo de dato para gestionar los slides, así pues el tipo de dato es en este caso muy simple y consta de una imagen y un texto (caption)

tipo de dato slide cabecera

Creando una vista de tipo bloque para ese tipo de dato en forma de lista sin formato, obtenemos una lista ordenada por post date. Y reescribiendo el contenido caption y excluyendo el campo imagen  de la vista tenemos exactamente el marcado que necesitamos

vista slides cabecera
Ahora sólo falta enchufar esta vista en todas las páginas. Para ello una posibilidad es tener una región en nuestras plantillas drupal para las páginas, donde meteremos un bloque con la vista que hemos generado anteriormente. Hay otros planteamientos, como obtener programáticamente la vista con la función views_embed_view y meterla en una variable dentro del hook preprocess_page para leerla después en la plantilla.

Lo cierto que éste planteamiento tiene el inconveniente de que hay que sobrescribir unas cuantas plantillas, mas que nada para eliminar el marcado que añade drupal (algún que otro div) .

A pesar de que la vista se puede configurar para reducir el marcado extra, al final no me quedó otra que sobrescribir unos cuantos tpl específicos para la vista y su bloque correspondiente.

Para facilitarnos el encontrar un nombre adecuado para nuestros tpl en el apartado Advanced -> Theme de la vista, Drupal nos facilita esa información

vista slides cabecera theming

Entonces en las páginas tenemos una región concreta para meter exclusivamente el bloque de la vista.

Por supuesto esta región tiene que estar definida en el archivo .info de nuestro tema, pero además es conveniente también sobrescribir el tpl para esta región concreta para que conecte exactamente con nuestro marcado y así tener control absoluto sobre el renderizado de html. El nombre de la plantilla es muy sencillo region–header_slides.tpl.php (region seguido de el identificador de la región). No hay que olvidarse de poner el bloque correspondiente a la vista en esta región en la página de configuración de bloques

bloque slides cabecera

Al final cuantas plantillas tenemos que sobrescribir?

Serán 4 las plantillas tpl a  sobrescribir, las podemos poner todas en una misma carpeta para mayor claridad en nuestro tema

header_slides_override

Pueden parecer muchas, pero la sobrescritura es trivial. En orden serian:

  •  region–header_slides.tpl.php

     
  • block–views–vista-slides-de-cabecera-block.tpl.php

     
  • views-view–vista-slides-de-cabecera.tpl.php

     
  • views-view-unformatted–vista-slides-de-cabecera.tpl.php

 Qué hemos conseguido?

Tenemos un slide que se genera dinámicamente en función de los header slides que hayamos definido. Al tener este tipo de dato podemos incluir fácilmente en un bloque los links para añadir un nuevo slide de cabecera y listar los existentes para modificarlos o eliminarlos.

Qué es lo siguiente?

Primero limitar el número de slides que pueden existir, no tiene sentido tener muchos header slides. Luego se puede añadir un gadget para reordenar los header slides en vez de que el orden venga definido por la fecha de creación.