viernes, 15 de febrero de 2013

Crear un slideshow simple con Drupal

Una cosa muy habitual en las páginas web es la creación de slideshow,. Generalmente se utilizan slideshow ya escritos en javascript que te descargas de las páginas de sus creadores.
Con Drupal se pueden realizar slideshow utilizando los módulos adecuados. Así que al lío.
Para ello necesitamos estos módulos:
-views
-chaos tools
-libraries
-Views slideshow
-views cycle.
Estos módulos se encuentran en la página web de drupal.



 
Además necesitaremos un archivo en javascript para dar los efectos al slideshow, este archivo se puede descargar de www.malsup.com/jquery/cycle.
De este enlace se descargará el archivo jquery.cycle.all.js que deberemos colocar en el directorio:
- /sites/all/libraries/jquery.cycle/
Si no lo tenemos, que sera lo mas seguro, lo creamos tal cual.

Un consejo, para instalar los módulos es recomendable activar el módulo "update manager", facilita mucho las cosas, permitiendo instalar los módulos deirectamente desde la pestaña módulos del panel de administración.

Una vez instalados los módulos y colocado el archivo de jquery en su sitio, empezaremos a introducir las fotos.





Para subir las fotos a drupal lo primero es crear un tipo de contenido que sea una imagen. Para ello vamos a Estructura-Tipos de contenido y pulsamos en añadir tipo de contenido.
1- Le damos un nombre al tipo de contenido - fotos_slide
2- Eliminamos el campo que pone body
3-Agregamos un nuevo campo que llamamos por ejemplo fotos_gr y el tipo de campo sera img.
Le damos a guardar y en la siguiente pestaña guardar tambíen.

Nos aparece un menu con las opciones de campo, en este menú se puede añadir el texto explicativo del nuevo elemento, el tamaño máximo, en fin, varias opciones que podemos configurar a nuestro gusto. Una vez realizadas las opciones le damos a guardar y cerramos.

Ahora toca introducir las fotos en drupal, para ello solo tenemos que ir a añadir contenido y pulsar en agregar contenido, y elegimos el que acabamos de crear de fotos-slideshow.  Tenemos que subir las fotos una por una.

Ahora tenemos que crear el slideshow, para ello vamos a Estructura-Views y pulsamos en añadir una views nueva.

Nos aparecerá un menú
1- Le ponemos un nuevo nombre al view
2- Elegimos si vamos a crear una página o un bloque, yo prefiero crear un bloque a una página, de tal manera que luego puedo colocar el slideshow donde quiera.
3-Le ponemos titulo al bloque
4- En display format colocamos slideshow of fields
Le damos a continue y edit.

Ya tenemos el slideshow creado pero todavía no le hemos indicado que es lo que tiene que enseñar en el. Ah y tampoco se a guardado ahora seria un buen momento de darle a guardar.

Para añadir las fotos es muy sencillo en el nuevo menú del bloque views buscamos donde pone campos y le damos a agregar, nos aparecerá un checklist, buscamos el campo que ponga "contenido fotos_gr", pulsamos en apply (all displays). En opciones de configuración quitamos la pestaña create a label y le  damos a guardar.

Ahora bajo el titulo Fields (campos) tenemos dos elementos y solo queremos el que acabados de creara así que el otro lo eliminamos.

En preview veremos ya el slideshow.

Ahora podemos configurar los efectos de transición entre imagenes, esto lo hacemos con el plugin jquery que hemos instalado al principio. para configurarlo solo hay que pulsar en las opciones de Formato.

Aparecen muchas opciones, abajo del todo viene el counter de fotos, si lo queremos arriba o abajo, en definitiva opciones a configurar, se va probando hasta que encontremos una configuración que nos guste. Le damos a Apply (all displays).

Guardamos el bloque una vez terminado.

Ya tenemos el slideshow hecho solo hay que añadir el bloque a la página que queramos dentro de nuestra web.

nota: Al no escribir el blog en drupal, no he podido meter un ejemplo del slideshow real, el que aparece al principio es simplemente un gif animado del slideshow.


No hay comentarios:

Publicar un comentario