Galerías de Imágenes en Drupal

Las galerías de imágenes son cada vez más comunes en los sitios dinámicos. Un diario, una revista o un simple blog seguramente querrán alojar una serie de imágenes categorizadas de alguna forma.

Este video ilustra el proceso de creación de estas galerías utlizando nodos con campos de imágenes. Views sirve de interfaz para mostrar las imágenes de cada galería, e ImageCache genera miniaturas automáticamente.

Al final del video se menciona la existencia del modulo LightBox 2, que permite mostrar las imágenes con un marco opaco. Efecto que se ve en muchos sitios webs actuales.

Duración: 
18.16 minutos
Complejidad: 
Intermedio

Compartir este material en...

Comentarios

Hola a todos, estoy sumergido en aprender este super cms, he estado mucho tiempo con flash y de verdad drupal es todo un mundo, es increible,,,!
Bueno colegas, he hecho mis pruebas en mi pc, con el local hosting y con los video tutoriales y gracias a un gran amigo he adelantado y sigo aprendiendo..

La pregunta es la siguiente , en mi locahost pude instalar todo bien y he podido hacer varias cosas, tengo un servicio de housting que trae la herramienta (FANTASTICO ) el cual trae durpal 6.10 , para instalar, lo he instalado y me dice (
El directorio sites/default/files no existe ) ya he copiado y los archivos si exinten estan el site , dafault y el setting.. , y no puedo terminar la instalacion , solo me falta lo de los permisos... ( 777 )

donde ? les otorgo los permisos .? para ver si es eso ?

un gran saludos a todos

jota el nuevo drupalero..!!
gracias

Te felicito, esta super bien..!! de esta forma ayudas a muchos..!! SALUDOS DESDE MADRID .!!

Muy bueno el tutorial. Muchas gracias. recien instalo Drupal sobre WAMP. voy a instalar los módulos y a ver como me va. saludos.

Felicidades por el tutorial... Es magnífico!!!
Tengo una duda: en el paso que realizo cuando cambio el Teaser y el Full node a redimensionar imagen y enlazar a nodo o imagen, me desaparecen las imágenes...

No sé porqué, pero si desactivo de nuevo estes cambios, vuelvo a ver las imágenes, pero claro, con el tamaño original, que es demasiado grande...

Y si vuelvo a activar esas opciones, ya no veo las imágenes...

Alguna solución???

Muchas gracias

Hola David:

Seguramente es un problema de los permisos del directorio files, image cache necesita para funcionar, tener acceso de escritura al directorio files.

Fijate en Administrar -> Reportes -> Reporte de estado, si uno de los errores no es "Directorio files no escribible" o algo así.

Si no, tal vez es la memoria, e imagecache no puede crear la miniatura.

Sea como sea, el error debería aparecer en los logs (Administrar -> Reportes -> Entradas recientes) de Drupal.

Espero que sea de ayuda.
Saludos

Hola Mariano...
Muchas gracias por la respuesta... Estuve mirando en: reportes-->información de estado, como me decías... No me aparecen esos errores, pero sí estos que te adjunto:

ImageAPI GD Memory Limit 40M
It is highly recommended that you set you PHP memory_limit to 96M to use ImageAPI GD. A 1600x1200 images consumes ~45M of memory when decompressed and there are instances where ImageAPI GD is operating on two decompressed images at once.

Upload progress No activado
Your server is capable of displaying file upload progress, but does not have the required libraries. It is recommended to install the PECL uploadprogress library (prefered) or to install APC.

Podría ser de alguno de estos?? Si es así, como soluciono?? Muchas gracias de nuevo!!

Buenas tardes Mariano...

Sigo dándole vueltas y acabo de encontrar tambien un nuevo error. En el vídeo, allá por el minuto 9:05, cuando creas el preset en ImageCache llamado redimensionar, sale un mensaje diciendo que se ha creado el directorio correspondiente con la ruta completa...

A mi este mensaje no me aparece. Y posteriormente, en el minuto 9:25 aparece una imagen de ejemplo redimensionada, que a min tampoco me aparece, claro...

No sé si podría servir de ayuda para saber como solucionar el problema...

Muchas gracias y hasta pronto

Que tal david... tal como lo mencionas, tu error es claramente por falta de memoria. El error te dice que tienes que configurar tu memoria a 96M. ¿Dónde se hace eso? pues sencillo: tienes que buscar un archivo (en tu servidor web) que se llame php.ini y luego en ese archivo buscar una linea que diga memory_limit = 40M y allí es donde tienes que cambiar y colocar memory_limit = 96M. El archivo pude estar ubicado en /etc/php5/apache2 o en otro lugar, dependiendo tu Sistema Operativo.
Cabe mencionar que luego de hacer el cambio, tienes que reiniciar el Apache, si estas en un sistema linux, pues tendrás que escribir en la terminal algo así como: # /etc/init.d/apache2 restart
Saludos!

Yo tambien tengo el mismo problema... solo me pasa en mi servidor local en el otro no.... porque sera!.... si ya cambie el limite de memoria.... y ejecuto el cron y sale

ImageAPI GD Memory Limit 32M
It is highly recommended that you set you PHP memory_limit to 96M to use ImageAPI GD. A 1600x1200 images consumes ~45M of memory when decompressed and there are instances where ImageAPI GD is operating on two decompressed images at once.

Pude sacar el error eses que tira de imagen api: de la siguiente manera:

Añadi las lineas siguientes:

ini_set('memory_limit', '96M'); a sus sitios / default / settings.php archivo

php_value memory_limit 96M en el archivo .htaccess en la raiz de drupal

SE SOLUCIONO PERO igual manera no puedo ver ni en el teser ni en el nodo la imagen - redimencion de imagen - la que se crea con image cache como explica mariano!... que puedo hacer!?¿

Hola Mariano,

por cierto felicitaciones por tu vídeo es muy bueno. Yo me estoy creando una galería de imágenes pero tengo porblemas con imagecache cuando creo un presente me aparece el enlace:

http://localhost/drupal_n/sites/default/files/imagecache/small/imagecach...

pero no me aparece la imágen "imagecache_sample.png", además si pincho en ella me aparece una página en blanco. Me dirigí a buscar la imágen en el servidor pero no hay ninguna imágen en esa ruta. Por lo que imagecache me crea bien los directorios de los nuevos presentes pero no me aloja las imágenes.

Necesito ayuda urgente, a ver si me puedes responder, gracias de antemano.

Saludos.

Quería agradecer enormemente el trabajo de Mariano, que me ha echado ya no sólo una mano, sino varias, a configurar bien las galarías de imágenes en mi sitio...

Quisiera saber si hay alguna forma de dejar en lugar de una página como "galería de galerías de imágenes", que apareciera en un bloque lateral con el tamaño de las imágenes en miniatura de forma que entrara en el tamaño de un bloque...

O ya será mucho pedir???

Muchas gracias y hasta pronto

Hola David:

En vez de crear un display del tipo página en la vista, deberías crear un bloque. Luego colocar este bloque en la región que quieras desde Administrar -> Construcción del sitio -> Bloques

Si, así consigo crearlo... Muchas gracias!!! El problema es qeu me salen con el mismo tamaño que configuré en ImageCache... Tengo alguna forma de hacerlas más pequeñas para el bloque, o tengo que hacerlas todas igual de pequeñas e al abrirlas ya se hacen de tamaño real???

Muchas gracias de nuevo por el grandisimo trabajo

Deberías crear un nuevo preset con imágenes más chicas y definir que en el bloque se muestren con ese preset.

En la Parte 3 de Un sitio en Drupal Paso a Paso explico como trabajar con campos con distintos valores en views utilizando la opción override

Vas a necesitar utilizar override porque en la página las imágenes se tienen que ver más grandes y en el boque más chicas.

Espero que sea de ayuda
Saludos

Ante todo me gustaría felicitarte por el artículo y el video tutorial.. muy bueno!!! Gracias. He seguido todos tus pasos y he llegado a formar una vista de varias galerias de manera exitosa.

Ahora bien, me gustaría que las fotos de las diferentes galerías salieran una al lado de la otra en lugar de una debajo de la otra... ¿como puedo controlar esto? ¿al crear el tipo de contenido galerías?

Gracias de antemano y un saludo cordial!!!

Creo que con CSS podrías lograr ese efecto. Deberías agregar al css de tu theme el código necesario para que las miniaturas floten a la izquierda.

En este artículo hablan un poco sobre eso http://www.desarrolloweb.com/articulos/2343.php

Saludos

Revisaré la documentación que me envías. Muchas gracias.

Buenos días, Mariano y resto de compas...

Lo que no entiendo muy bien es cual es el documento CSS que tengo que editar?? Tengo que adjuntarlo a algún sitio? Y si quisiera editar un CSS también de una views, podría??
Algún manual para torpes?
Mil gracias de nuevo

Hola PR y Mariano, muy bueno el sitio. Quisiera hacer esto mismo (poner las fotos en línea horizontalmente) y no he podido deducir cual es el archivo .css del theme, al cual que hay agregarle "display: inline; float:left;" a la clase "field-items". PR si has encontrado la solución o alguien que me pueda ayudar se lo agradecería.

Muchas gracias, y saludos.

Hola Atisbo,

para esto tienes que crear un fichero con estructura node-{type}.tpl.php en el directorio de temas de tu site. Este fichero accederá a las css del tema, que es donde defines los aspectos visuales. Para crear este fichero lo mejor es usar el node.tpl.php como referencia (copiarlo y renombrarlo).

Ahora bien, cuando creas un tpl todos los contenidos los vuelca en una única variable $content. Si quieres acceder a los contenidos por separado he visto esta url en otro foro: http://jodyhamilton.net/node-theming-field-deconstructing-node-content-d...

Un saludo cordial,

Leobel.

Hola Leobel y Atisbo:

@Leobel: creo que la solución es un poco más simple que eso. Pero muchas gracias por responder la pregunta, esto se está poniendo movido y viene bien la ayuda externa.

@Atisbo: En el artículo Un sitio en Drupal paso a paso. Parte 4 se describe la forma de agregar un nuevo archivo css a un theme determinado.


stylesheets[all][] = tu_hoja_de_estilo.css

Recordá limpiar el cache luego de agregar el nuevo archivo al theme.

Espero que sea de ayuda, saludos.

Hola Mariano, he visto tu artículo sobre temas en drupal, es muy bueno (como el resto de artículos). Muchas gracias.

Sin embargo en este caso no me queda claro como hacer para mostrar las imágenes una al lado de la otra una vez en el nodo. ¿Donde especifico que es para este nuevo tipo de contenido creado que quiero aplicar un css concreto?
y dentro del css...¿donde tengo las referencias a las fotos dentro del nodo para poder manipular su div?

de nuevo gracias por este buen site y un saludo!!!

Hola PR:

No lo tomes a mal, pero claramente hay un problema de conocimientos previos que deberías revisar para seguir con Drupal.

Recomiendo que leas artículos relacionados con CSS, que descargues Firebug y veas como está estrucutrado el Html que genera drupal.

Te dejo algunos links que pueden serte de ayuda.

Una vez que comprendas como funciona CSS, te va a ser muy simple resolver tu problema.
Saludos

Gracias Mariano, de verdad.

No es no el css con lo que tengo problema, en tu primera respuesta de este hilo ya me dejaste información valiosa sobre css con un ejemplo gráfico de una galería de imágenes.

el problema es que no se que hoja de estilos tengo que adecuar. Podría añadir una al site, pero.. ¿como sabe drupal que es esta hoja precisamente la que aplica al nuevo tipo de contenido creado (la nueva galería)?

No se si me hago entender :(
...

Estoy preparando un tema gracias a tu artículo sobre el tema zen, puedes ver lo que tengo aquí: http://www.re-orientation.com/node/8

y en la home, tengo una galeria desarrollada en concreto con este videotutorial: http://www.re-orientation.com/ ...pero como podrás ver si pulsas sobre alguna de estas dos galerias de pruebas, soy incapaz de poner las imagenes una al lado de la otra.

Un saludo y gracias por todo.

Buen dia gente, gracias por tomarse el tiempo de hacer este tutorial, lo e estado siguiendo y e tenido problema cuando agregan el preset-add scale, lo agrego sin problema pero cuando quiero ver la imagen como la del logo de drupal (9:25) no me la muestra voy al link q tiene adjunto y da un error de q el directorio no existe error 404 http://localhost/drupal6/sites/default/files/imagecache/Resize/imagecach... voy a la ruta y en efecto las carpetas no estan creadas en el directorio sites\default\files\images si se encuentran dos imagenes una con un .thumbnail pero no me las muestra al ir a la galeria, no se que tengo mal no tengo mucho tiempo con drupal y quisiera saber si es q hay q cambiar esta direccion o como puedo solucionar este problema, de antemano mil gracias por tomarse el tiempo de responder, feliz dia.

Tan sólo expresar mi grandísimo agradecimiento a Mariano no sólo por sus espectaculares video-tutoriales, sino por la ayuda extra que ofrece...
Felicidades por el sitio. Estoy aprendiendo enormemente de Drupal...

Saludos

muchas gracias por tomarte tu tiempo, el tuto esta muy bueno..........

lamentablemente tengo el mismo problema que algunos, no se me crean las imagenes en la carpeta imagecache espero pueda solucionarlo.............. cualquier ayuda es bien venida y muchas GRACIAS de nuevo

Hola, He seguido el tutorial al pie de la letra (que por cierto, es uno de los mejores tutoriales que he visto para Drupal), pero no salen las imágenes en la galeria.
He visto que el ImageCache crea los thumbs en una carpeta "imagefield_thumbs" dentro de sites/default/files. Es decir, que las imagenes se redimensionan.
Pero cuando voy a Display Fields y selecciono "Redimensionar image link to node" no se muestran las imagenes. He provado varias opciones, incluos con el Lightbox (que es con lo que quiero que funcione) pero en ningun caso se muestran los thumbs en la pagina, solo las imagenes enteras (habiendo seleccionado Image en el Display Field).
Me parece que el problema esta en que no encuantra los thumbs... Alguna idea de como solucionar esto?
Gracias

Ante que nada muy buen tutoría para drupal, es el mejor que he visto. Tengo el mismo problema que muchos, las imágenes thumbs son guardadas en la carpeta image_field y no encuentro la manera para que me lo redireccionar hacia la carpeta en donde busca imagecache, te quiero pedir una opinión ¿como puedo resolver ese problema?; Desde ya muchas gracias.

Hola a todos:

Parece ser que el video les fue útil a muchos. Gracias por sus comentarios.

Con respecto a los problemas que muchos dicen tener con las imágenes redimensionadas, voy a tratar de aclarar un poco el tema.

Primero, imagecache requiere que las url limpias estén activas. Controlen que eso esté activado.

Pero seguramente, la mayoría debe tener problemas con los permisos en el directorio files. Si Imagecache no puede crear el directorio imagecache, nunca podrá guardar los archivos redimensionados.

El directorio image_thumbs, no guarda las imágenes redimensionadas por imagecache. Este directorio es creado por imagefield para guardar las miniaturas que se observan al crear el nodo.

@Anónimo del 28 de mayo, @Sergi: Seguramente es un problema de URL Limpias.

@phoenix239: Tu problema parece más algo sobre los permisos. Revisá el artículo que se ha publicado el 29 de mayo para ver si te sirve de ayuda.

Para los demás que tengan problemas, por favor, especifiquen como está configurado su servidor, su versión de Drupal y que permisos tienen en los directorios files y files/imagecache.

Saludos y gracias por sus visitas.

Muchisimas gracias mariano.

Aunque aún no he limpiado las urls (porqué estoy haciendo una migración), he podido comprobar que efectivamente limpiandolas funciona todo!
Otra vez, muchas gracias por su tiempo y ayuda.

Saludos

Sergi

Hola!!

En primer lugar, darte las gracias por dedicar tu tiempo a enseñarnos, el tutorial ha sido increible.

Está genial!

El problema es que cuando acabo de hacer todo, intenté entrar en Site Building -> Modules y zasss

Me aparece la pagina en blanco, ya no puedo hacer nada...

Y no se por que, a ver si puedes echarme un cable con ello

Muchas gracias de nuevo, eres un crack!

Hola!! antes que nada DESCOMUNAL tu tutorial ! FELICIDADES .
Ahora tengo un problema una vez que llega el momento de crear un contenido (galería) el enlace me lleva a una pagina de error.
instale mal algún modulo ? o puede ser que al estar trabajando en un nivel de directorio más profundo que el normal en los servidores , me de error ?
gracias por la ayuda y de nuevo felicidades

po que no puedo agregar imagenes a mi pagina web drupal todo me tira error drupal no sirve o que

No te das idea lo que me sirvio esto, gracias

Enhorabuena por el tutoria!

Hola Mariano, ante todo felicitarte por el tutorial, así da gusto trabajar con Drupal.

Mi problema es como el de mucho que ya han escrito comentarios, pero después de leerlos no consigo dar con la soluciona. Yo tengo un Drupal 6, con las url limpias y ademas he puesto todo tipo de permisos en las carpetas, originalmente en 755 finalmente en 777.

Las carpetas me las crea bien, por tanto tiene acceso, pero las miniaturas no aparecen por ningún lado.

Alguna idea?

Gracias

Enric

Hola Enric:

Pueden ser problemas de memoria del servidor, o paquetes instalados. ¿El reporte de estado no indica ningún error? El reporte de estado está en Administrar -> Reportes -> Reporte de Estado.

A veces, si el servidor tiene poca memoria no puede procesar las imágenes, generalmente si pensan mucho (por ejemplo 2mb)

O tal vez te falta instalar la libreria gd.

Revisá eso y me contas.

Saludos

Puedes descargarte el módulo imageFlow desde el sito de Drupal: http://drupal.org/project/views_slideshow_imageflow

Yo llo he implementtado y va perfecto ... pero no puedo añadir el efecto de "ventana modal" al hacer click encima de una foto.
¿Será porke ImageFlow trabaja sobre elementos "image" y no elementos "foto"??
He conesguido el efecto deseado con los elementos "foto" de los nodos, pero no con los "Image" .. tan solo los images cuando enseño con imageflow !!!

¿alguien me puede ayudar?

Buenas a todos, Mariano, tengo un pequeño problema con la galería, lo que pasa es que solo la carga (muestra) al administrador, a los demás usuarios simplemente aparece en blanco la página.

Gracias por la información que me pueda brindar.

Hozkar.

Hola Hozkar:

Se me ocurren varias opciones:

Si la página es totalmente en blanco, son problemas de memoria del servidor.

Si se ve el encabezado y los menus pero la galeria no se ve, pueden ser los permisos de acceso a la vista. Revisa la pestaña de "Access" de la vista a ver si no tiene una restricción por ahí.

Si se ve el título, pero no todo lo demás. Posiblemente sea el modulo "content permission" que restringe la vista de todos los campos cck que no hayan sido habilitados desde los permisos de usuario.

Como las imágenes son en si campos de cck, solo el administrador podrá ver su contenido hasta que se especifique lo contrario. La solución para esto es desactivar el modulo Content Permissions" o configurar los permisos de forma adecuada.

Espero que sea de ayuda.
saludos
Mariano

Gracias Mariano, efectivamente era el módulo "Content Permissions" lo desactive y listo. todo funciona, muy bien.

Muchas gracias por la ayuda.

Att,
Hozkar

Muchas gracias, tutorial muy bueno, gran esfuerzo, concreto, practico.

Felicitaciones, claro, simple y completo.
Muchas gracias

Buenísmo tu video! Muchas gracias por compartir tu conocimiento.
Solo algo más: para aquellos que han tenido problemas, tal y como lo indica mariano, hay que tomar en cuenta:

  • Que para utilizar estos módulos, el servidor tiene que correr PHP5
  • Revisar la memoria limite que tiene php. Yo la tuve que aumentar a 96M. Esto se hace modificando el parametro memory_limit = 96M del archivo php.ini

Nuevamente, gracias!

Me sirvió de mucho, gracias!!!!

Páginas