Tutorial: Galeria de imágenes con Drupal 7 y Colorbox

En este mismo blog, ya hace unos años comentábamos como crear una galeria de imágenes en Drupal 6. En esta ocasión, haremos algo similar pero en Drupal 7. Además, usaremos Colorbox, que nos permitirá darle un toque vistoso a la galeria, añadiéndoles transiciones y un pequeño navegador para ver las imágenes.

 

 

1.- Instalar módulos necesarios:

 

Partiendo de una instalación limpia de Drupal 7, instalaremos (y habilitaremos) los siguientes módulos.

 

  - Views

  - ctools

  - Colorbox

  - multiupload_filefield_widget

 

Además, Colorbox necesita añadir un plugin en la instalación de drupal, que podéis encontrar en colorbox. Para su correcto funcionamiento, debéis descomprimir la carpeta colorbox, y dejarla en la siguiente ruta: [Instalación-drupal-7]/sites/all/libraries/colorbox. Seguramente tendréis que crear la carpeta libraries, ya que por defecto no se encuentra creada.

 

2.- Crear un Estilo para las imágenes.

 

Para que todas las imágenes tengan las mismas dimensiones cuando mostremos la galería independientemente del tamaño original de la imagen, lo primero será crear un estilo (Configuration → Image Styles → Add Style). Lo nombraremos como 'galeria' y le aplicaremos el efecto 'Scale and crop' y le indicamos las nuevas dimensiones (Yo he utilizado 240px por 180px). Incluso podríamos entretenernos y aplicar otros efectos en la imagen (Desaturar imagen, Rotar, etc...)

 

 

 

3.- Crear Content Type 'galeria'

 

Crearemos un nuevo Content Type al que llamaremos Galeria (Structure → Content Types → Add content Type). Añadiremos un campo de tipo Image y con el wigdet Multiupload al que llamaremos Fotos. En el desplegable 'Number of values' pondremos 'Unlimited' para así poder añadir tantas fotos como queramos.

 

Nos vamos a la pestaña 'Manage Display' (Esto es opcional, pero así nos haremos una idea de como se ven nuestras imágenes) y modificamos los valores del campo Fotos para que las imágenes se muestren con nuestro estilo.

 

4.- Generar una galería:

 

Crearemos nuestra primera galería (Content → Add Content → Galeria). Le podremos un título y añadiremos tantas fotos como queramos en ella (Gracias al módulo multiupload_filefield_widget podremos añadirlas todas de golpe y no una a una). Cuando guardemos, veremos que en el contenido aparecen todas las fotos al tamaño indicado, pero se muestran una debajo de la otra y sin el efecto Colorbox. Para mostrarlo correctamente, crearemos una view.

 

5.- Crear view para mostrar la galería

 

Crearemos la view 'Galeria de imágenes' (structure → views → add new view) tal como se muestra en la siguiente imagen:

 

 

Es importante que la galería sea una Page de tipo Grid para que las fotos se muestren en una página en forma de cuadrícula.

 

Ahora, añadiremos el campo Fotos y lo configuraremos se la siguiente manera:

 

 

Guardamos la view, y nos dirigimos a la página creada en la view (en nuestro caso /galeria-de-imagenes) y podremos ver la galería de fotos, en una cuadrícula, y cuando pinchemos sobre una imagen, esta se abrirá con un vistoso efecto y desde allí podremos navegar por el resto de fotos.

 

He seguido todos los pasos, pero llego al punto de "Ahora, añadiremos el campo Fotos y lo configuraremos se la siguiente manera:" pero no se donde esta eso, hasta ahi todo bien, la galeria se muestra como tiene que ser, pero, no funciona el lightbox... será porque estoy trabajando en local? un saludo

Gracias por tu tiempo.
He instalado el módulo correspondiente pero no me funcionó, leyendo sobre un poco más encuentro que es para HTML5. Hay algún otro módulo que haga lo mismo que soporten todos los navegadores?

Ya encontré la forma de subir varias imágenes. Entre las 3 opciones que probé me quedo con el uso del modulo Plup, que realmente me permitió usar en mi campo imagen el control plupload.

Plupload funciona genial!

como sacan la ventana que viene después de
"Ahora, añadiremos el campo Fotos y lo configuraremos se la siguiente manera:"

Muy buen tutorial, pero te falta una cosa importantísima en el último paso: VACIAR EL CACHÉ (Menú Administración/configuración/Desarrollo/Rendimiento/>Vaciar caché)

A mi al menos no me ha funcionado hasta que no he vaciado la caché, y me he estado a punto de volver loco pues no es el único tutorial que obvia este paso.

En este momento existe dos módulos que pueden ahorrarles un poco de trabajo, que son el media, y el media gallery, van muy bien y nos ahorran la creación y configuración del tipo de contenido gallery

Seguí todos los pasos, sin embargo la galería me quedo de forma vertical ¿Que habrá pasado? ¿Como puedo cambiarla a horizontal?

Disculpame pero no entiendo ni me aparece el wigdet ni se que
"Añadiremos un campo de tipo Image y con el wigdet Multiupload al que llamaremos Fotos."
Obviamente al no haber una imagen descriptiva es imposible seguir para mi.
lastima no sirve para mi. volvere a buscar otro mejor explicado.

hola oye y como creo el campo fotos? hasta ahí me quede

como añado el campo fotos me urge????

Todo me sale bien, solo que al abrir las fotos no me sale para pasar las fotos por siguiente foto o alguna flechita

Hola, he creado un tipo de contenido llamado "baile", y quiero que dentro de este haya un/unos campo/s para insertar una galería de fotos. Es decir, que cuando añada un baile nuevo, ese baile tenga su propia galería. ¿Se puede hacer eso con este módulo?
Muchas gracias.

oigan les recomiendo juicebox, les da una mejor presentacion a su galeria de imagenes.

Clarísimo y muy práctico! Gracias!

Las librerías me salen en forma vertical, y no he podido pasarlas a horizontal, al parecer falta algo en el manual, ahhh por cierto el último paso se encuentra en la opción Estructura

yo tengo un problema con la libraries en si ya la puse en el lugar correcto pero en informes me dice que me falta las librerias

Hola, súper bueno, muy práctico sin nada complicado, pero estoy viendo pone una coma (,) después de cada imagen, y no sé como hacer para quitarla

Creo que saltastes algunas indicaciones porque no ubico algunas pantallas como por ejemplo:
Añadiremos un campo de tipo Image y con el wigdet Multiupload al que llamaremos Fotos

Para añadir el campo fotos:
En VIEWS, dentro del apartado FIELDS, apretáis AGREGAR, en el buscador introducís "FOTOS" y seleccionáis "CONTENIDO: FOTOS" y por ahí sigue el tutorial perfect ;-)

como hago para que cuado den click en la imagen se amplie tipo MODAL es decir se amplia a toda la pagina con fondo negro

Juan Manuel, de eso se encarga el formatter tipo "Colorbox".

Por si os sirve de ayuda, para el caso de las imágenes el widget es http://ftp.drupal.org/files/projects/multiupload_imagefield_widget-7.x-1...

Excelente y rápido, Los felicito.

Cuando termino la galeria no se me ven las imagenes

Hola,felicidades por tu desarrollo en drupal 7. He tenido un problema con la parte de las imágenes, en mi Drupal no me muestra las imagenes ordenadas de forma vertical y horizontal como en el tuyo, si nos que en el mio la imagenes están de forma vertical una debajo de otra, por favor una ayudita :) saludos

Hola Luz. El display que has utilizado es el de Grid?

mmmmm..., a que te refieres?? Hice todo paso a paso la insercion de imagenes en mi drupal, pero la cuestion es que todas las imagenes estan una debajo de otra

necesito un modulo que me permita cargar varias imagenes y me las muestre dentro del contenido de mi pagina es para subir fotos de rayos X

tengo que crear un odontograma que es la numeracion de los dientes de la boca,necesito un modulo que me permita como dibujar(no se bien estoy media perdida en esto) es que tengo que hacer una leyenda y con esa leyenda poder selecionar segun la imagen.

necesito informacion sobre los tabs o tabuladores para yo personalizados los modulos, es decir quiero separar la informacion en tabs o si tienen modulos

Solicitar una nueva contraseña como quitar esto en el inicio de sesión en drupal

hola saben si existe un modulo que te permita diseñar o dibujar en drupal, es que estoy haciendo un odontograma(es el diseño que utilizan los dentistas de los dientes para las consultas)

babydz09, para quitar el solicitar nueva contraseña ves a Public registration settings en "User Settings"

/admin/user/settings

El enlace a colorbox es erróneo, lleva al modulo views, un saludo =)

Enlace corregido Adrian! Muchas gracias!

Añadir nuevo comentario

Plain text

  • No se permiten etiquetas HTML.
  • Las direcciones de las páginas web y las de correo se convierten en enlaces automáticamente.
  • Saltos automáticos de líneas y de párrafos.
Enviando este formulario, aceptas las cláusulas de privacidad de Mollom.

Contacto

¿Te interesan nuestros servicios?

Contáctanos