Sliders Flexibles con Views Slideshow

Si has trabajado con Drupal seguramente en algún momento has tenido la necesidad de crear un slider dentro de tu sitio web y a la hora de buscar un módulo que realice esta funcionalidad nos encontramos con un muchas opciones pero ¿Cuál vale la pena aprender y utilizar? http://drupal.org/node/418616 Hoy les presento uno de mis favoritos, Views slideshow, este módulo está basado en la librería para sliders Jquery Cycle y nos permite alimentar nuestros sliders con contenido generado por un view, los que brinda bastante flexibilidad sobre el contenido que vamos a desplegar además de otras funcionalidades que con ayuda de algo de css y javascript podemos crear casi cualquier tipo de slider. En este tutorial voy a mostrar como desarrollar el slider que se encuentra aquí. Para esto lo primero que necesitamos hacer es instalar los módulos que vamos a necesitar: Views (7.x-3.0-beta3) Views Slideshow (7.x-3.0-alpha1) Chaos tool suite (7.x-1.0-alpha4) Libraries (7.x-1.0) Ya lo he mencionado antes en el blog pero siempre me gusta hacerlo, cuando están desarrollando o administrando sitios hechos en Drupal, Drush ahorra mucho tiempo, si quisiéramos instalar estos módulos con drush simplemente tendríamos que escribir:

drush dl views views_slideshow ctools libraries

Drush nos va a ir preguntando de forma interactiva que versión de cada módulo queremos instalar. Del mismo modo podemos habilitar los módulos simplemente escribiendo en consola:

drush en -y views ctools views views_slideshow libraries views_ui

Utilizamos '-y' para responder siempre y cuando se hagan preguntas durante la instalación. De otra menera, podemos entonces ir a /admin/modules y activar los módulos que necesitemos. Además de esto vamos a necesitar la librería Jquery Cycle para que Views Slideshow funcione por lo que vamos a /sites/all/libraries (si no poseen la carpeta, pueden crearla) creamos el folder 'jquery.cycle' y descargamos dentro de el jquery.cycle.all.js o jquery.cycle.min.all.js si lo desean comprimido, estos scripts los podemos encontrar en http://jquery.malsup.com/cycle/. Una vez tengamos estos módulos activados debemos proceder a crear el tipo de contenido (en admin/structure/types/add) que queremos utilizar para el slider, en este caso vamos a llamarlo 'Views Slider Content' y vamos a agregarle un campo que sea una imagen.  Luego de esto nos dirigimos a image styles y creamos los estilos que queremos utilizar, en nuestro caso, para este slider creamos uno con las dimensiones 940 × 464 que llamamos big_viewsslideshow_image y otro con las dimensiones 220 × 145 que llamamos small_viewsslideshow_image, el primero para la imagen grande del slider y el segundo para las imágenes pequeñas que se van a usar como paginador del slider. Después de esto vamos a agregar algo de contenido para hacer nuestras pruebas. Ahora podemos proceder a crear nuestro slider, vamos a admin/structure/views/add y creamos la vista con las siguientes opciones: Show: Content of Type: Views Slider Content sorted by: Newest First Gancho en Create a Page Page Title: Views Slideshow Demo 1 Path: views-slideshow-demo-1 Display Format: Slideshow of Fields Items to display: 4 Ahora hacemos click en "Continue and Edit" Ejemplo:  Borramos el campo que se crea por defecto "Content: Title" y agregamos los siguientes campos en el mismo orden: Content: Views Slideshow Image (utilizando Image Style: views-slideshow-big)  Content: Views Slideshow Image (utilizando Image Style: views-slideshow-big), este lo vamos a utilizar para el paginador, debemos esconderlo.  Content: Title, este campo también lo utilizaremos para el navegador por lo que debemos esconderlo. Una vez terminamos esto hacemos click sobre Settings de Format: Slideshow y Agregamos en "Bottom Widgets" un "Pager" y escojemos "Pager Type: Fields", marcamos los dos campos que escondimos y además marcamos a "Activate Slide and Pause on Pager Hover" para que cuando el mouse pase por encima de estas imágenes pequeñas la imagen principal del slider cambie. Despues de esto nuestro slider está casi listo, ahora con css vamos a colocar las imágenes y los títulos donde deben ir. Si miramos el html generado cada uno de estos paginadores está contenido en un div con la clase 'views-slideshow-pager-field-item', a esta clase le agregamos las siguientes propiedades en nuestro css:

.views-slideshow-pager-field-item {
  position: relative;
  float: left;
  margin: 20px 20px 0px 0px;
}

#views_slideshow_pager_field_item_bottom_views_slideshow_demo_1-page_3 {
  margin-right: 0px;
}

Con esto logramos que en el paginador las imágenes y el título queden justo debajo de la imagen grande, ahora vamos a acomodar, estilizar y ponerle fondo al título:

.views-field-title {
  text-shadow: 0 0 1px transparent;
  width: 220px;
  background-color: black;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);
  -moz-opacity: 90;
  -khtml-opacity: 0.9;
  opacity: 0.9;
  text-align: center;
  padding: 5px 0 5px 0;
  position: absolute;
  bottom: 20px;
  color: white;
  bottom: 20px;
}

Y así terminamos de construir nuestro slider. Cualquier pregunta que tengan pueden escribirla en los comentarios y con gusto los ayudo.