Módulos imprescindibles: ImageCache

Mostrar imágenes en una página web es una de las acciones que más ancho de banda consume en el servidor web, y la optimización de esta carga es uno de los puntos clave para que una web vaya rápido, y se reduzca el tráfico consumido. Es por esta razón por la que el módulo ImageCache es tan imprescindible en una instalación de Drupal que utilice imágenes.

¿Qué es ImageCache y para qué sirve?

ImageCache permite generar imágenes de diferente tamaño y dimensiones a partir de una original. A través de un interfaz gráfico de usuario se pueden programar una serie de modificaciones, llamadas presets, que serán cacheadas y permitirán mostrar una misma imágen de muchas maneras diferentes. Almacena estas versiones en ficheros a modo de caché, por lo que si en algún momento no se encuentra la imagen solicitada, se generará dinámicamente. Es muy útil, por ejemplo, para mostrar una imagen de un tamaño menor en el preview de una noticia y una versión ampliada en la noticia completa sin necesidad de subir varios ficheros. También puede utilizarse, gracias a su interfaz con Views para generar galerías de imágenes con miniaturas, o gracias a otros módulos que extienden la funcionalidad de ImageCache, es posible manejar las imágenes del perfil del usuario, sobreponer texto encima de la imágen, marcas de agua, versiones con colores alterados, etc.

¿Con qué módulos interactúa ImageCache?

  • ¿Qué módulos necesita? Para instalar ImageCache, necesitamos haber habilitado antes los módulos ImageAPI y uno de los motores de manejo de imágenes, ImageMagik o GD, y además el módulo Transliteration, que sanitiza el nombre de los ficheros subidos, de esta forma los nombres de las imágenes manejadas por ImageCache no tendrán problemas de caracteres extraños.
  • ¿Qué módulos utilizan ImageCache? Existen multitud de módulos que utilizan ImageCache, el principal seguramente es Views, ya que tiene total integración cuando se crean imágenes utilizando ImageField de CCK, por lo que cuando creamos una vista podemos asignarle el aspecto que queramos a través de las presets que hayamos definido previamente en el interfaz de usuario. El Taxonomy Image permite asociar imágenes a las taxonomías de nuestro sitio y además utiliza ImageCache si lo tenemos instalado. Otros módulos que utilizan ImageCache son Ubercart, para mostrar el catálogo de una tienda online, módulos de galerías de imágenes (Galleria, Fast Galery, HighSlide), o de efectos de jquery (jQuery Lightbox, Thickbox) entre otros muchos.
  • ¿Qué módulos extienden las funcionalidades de ImageCache? Utilizando ImageCache, hay otras extensiones para Drupal que permiten extender las funcionalidades de éste, probablemente el más completo es ImageCache Actions, que permite, entre otras cosas, añadir marcas de agua a las imágenes, ponerles texto, modificar los colores, aclararlas y oscurecerlas, bordes redondeados... Otros módulos son ImageCache javascript crop, que sirve para recortar imágenes al subirlas, o ImageCache Effects, muy similar al Actions, pero menos completo en cuanto a opciones. Todos estos módulos suelen utilizar las librerías GD y el soporte a ImageMagik suele estar más limitado.

Principales usos de ImageCache

  • Visualización de datos con ImageCache y Views Todos los campos creados con CCK se exponen en la creación de las vistas y en ellas se nos da la opción de mostrar las imágenes con los diferentes presets que hayamos configurado.
  • Integración de ImageCache en Panels De forma similar a las vistas, también podremos seleccionar los presets de ImageCache en la creación de Panels.
  • Las funciones de theme e ImageCache También es posible utilizar ImageCache en las funciones de theme que mostremos por código, utilizando un código similar al siguiente: Donde nombre_del_preset debe ser un preset que hayamos creado previamente en el interfaz de ImageCache y ruta_de_la_imagen es el path donde hemos guardado la imagen a mostrar.

¿Cómo funciona?

  • Instalación. El proceso de instalación de ImageCache es similar al de otros módulos, se debe descargar de la página del proyecto, descomprimir en el directorio sites/all/modules (o en sites/misitio.com/modules si usamos multisite) y habilitar desde la pantalla de administración de módulos (Administer » Site Building » Modules). Pero se nos plantean varios requerimientos extra:
    • Además de ImageCache, necesitamos instalar y habilitar el módulo ImageAPI.
    • Debemos tener soporte para las librerías GD o ImageMagik en nuestra instalación de php. He hablado con anterioridad de cómo lidiar con las librerías GD en Ubuntu y también como configurar un entorno web de desarrollo con GD habilitado en Mac OS X.
    • Será necesario que configuremos tanto el directorio de ficheros como el temporal (Administer » Site Configuration » File System) de nuestra instalación con permisos de escritura y lectura para todos para que ImageCache pueda trasladar las copias de las imágenes que genera la primera vez que el usuario las visita.
  • Crear un Preset. Para crear un preset que nos sirva de formato para la imagen que queremos mostrar, podemos seguir estos pasos:
    • Accedemos a la interfaz de ImageCache, en Administer » Site Building » ImageCache. Imagecache-interfaz.png
    • Seleccionamos la opción Add New Preset y le asignamos un nombre formado por caracteres alfanuméricos, subrayados y guiones. Le damos a Create New Preset. Imagecache-anadir_preset.png
    • Ahora debemos elegir los efectos que necesitamos para este formato de imágen, redimensionado, escalado, rotación... Si hemos instalado ImageCache Actions o ImageCache Effects, habrá muchos más. Imagecache-anadir_action.png
    • Para el ejemplo elegimos escalar y cortar, "Add Scale and Crop".
    • En este momento se genera el directorio destino de las imágenes resultantes. A continuación seleccionamos el tamaño para el escalado y corte, bien relativo con porcentaje, o absoluto sin porcentaje, en píxeles. La opción de peso es utilizada cuando añadimos más de una acción y define el órden en el que se aplican estas acciones. Para añadir la que hemos configurado, se presiona Add Action Imagecache-configurar_action.png
    • En la parte inferior de la pantalla podemos ver un icono de Drupal a modo de previsualización para ver si el resultado es el esperado. Se puede configurar la acción a realizar mediante el link Configure o podemos añadir más acciones haciendo click en New Actions. Imagecache-previsualizacion.png
    • Con el botón Update Preset guardamos nuestra preset y ya está lista para usar.
  • Integración con Views. La funcionalidad más útil de ImageCache probablemente sea la integración con el módulo Views, ya que nos permite listar imágenes asociadas a nodos en el preset que queramos, al añadir un campo de tipo imágen, podemos seleccionar uno de los presets ya existentes para mostrar la imágen con un determinado formato.
    • Creamos la vista en Site Building » Views , después le damos a Add add_view.png
    • Seleccionamos las opciones básicas de la vista, nombre, descripción y el tipo de datos a mostrar, en nuestro caso, Nodo. view_options.png
    • En la interfaz de las vistas, ImageCache entra en acción en la sección Fields o Campos. view_ui.png
    • Pulsando el + en Fields, podemos seleccionar los campos que necesitamos, bajo el Grupo 'Content' se encuentran los campos expuestos por CCK, seleccionamos el de imágen que nos interese y lo añadimos. field_add.png
    • Entre las opciones del campo, la última de todas es Format, en la que podremos definir el modo en el que se muestra la imágen, entre estos modos están los presets definidos en las opciones de ImageCache. imagecache_presets_view.png
    • El resto de creación de la vista lo dejo como ejercicio para el lector ;).
  • Integración con Panels. Del mismo modo que en Views, CCK expone todos los campos creados para los tipos de contenido como opciones que se pueden añadir en el contenido de un Panel, y al añadirlos, se muestra un desplegable de formato idéntico al de Views, en el que podemos seleccionar el preset que más nos convenga para mostrar las imágenes dentro del Panel.

Ejemplo en video: Creación de un tipo de contenido con soporte de imágenes y uso de ImageCache en una View

Porque todo se entiende mejor cuando se ve, os dejo un pequeño ejemplo de creación de un preset de Imagecache y un tipo de contenido con CCK que incluye soporte de imágenes a través de filefield. También cómo se muestran imágenes en una View usando ImageCache. Nota importante: Blip.tv no soporta todavía los subtítulos automáticos, por lo que antes de reproducir el video es conveniente que pulseis en CC y seleccionéis Spanish. Adjunto los subtítulos del video, por si alguien se anima a traducirlos a otros idiomas, me los pasa y los incorporo al screencast

Otros recursos sobre ImageCache

categorías: 
drupal: 

Comentarios

Ahhhhhh como no conocia el modulo Transliteration, volviendome loco con hacks y existia!!!!

Gracias Pedro!!!

Muy buen artículo!

No conocia el módulo Translitaration, lo probaré.

Gracias Pedro por tu artículo.

Gracias a todos!, Transliteration es un auténtico salvavidas cuando las imágenes del sitio tienen nombres con acentos y cosas "raras".

Gracias Pedro por este artículo...

(estructura y explicación perfectas...)

Lo estoy leyendo en Gran Bretaña, un precioso dia de lluvia intensa (los de aquí dicen que es un dia normal en agosto ... ;-) y que yo prefiero dedicar a aumentar mis conocimientos de Drupal...

Saludos
Isaac el Cec

Muchas gracias Jaume!
Veo que estás muy viajero últimamente ;)

Saludos, muy buen articulo, mi problema es el siguiente, yo estoy creando una vista de bloque para mostrar las ultimas noticias de mi sitio, ahora bien, cuando instalo imagecache y creo el preset no se me crea la carpeta "nombre_preset" por supuesto cuando escojo en mi vista mostrar las imagenes del preset no me trae nada, probe y cree la carpeta a mano y coloque la imagen pero no funciona que podra ser, ando como loco, ya revise los permisos de la carpeta imagecache y estan bien escritura lectura etc, muchas gracias

Por lo que comentas, yo diría que son problemas de permisos en tu carpeta de files, deberías asegurarte que tiene permisos de escritura para todos (777) y que además el directorio configurado como temporal (por defecto /tmp, pero puedes cambiarlo a uno que puedas cambiar) también debe tener permisos 777, puesto que imagecache lo utiliza para la transferencia del fichero final a la carpeta de imagecache.

Te recomiendo este estupendo artículo de Cuenco digital sobre permisos de directorios:
http://cuencodigital.com/articulos/permisos_de_directorios.html

Que buen post, no tienes idea lo mucho que me sirvió, mil gracias!

[...] diferentes acciones (escalar, redimensionar, cortar, etc) Tenéis un artículo muy completo en el blog de Pedro. Transliteration. "Limpia" los nombres de urls y ficheros. Token API para reeamplazo de [...]

Hola, acabo de ver un video que tienes (Creación de un tipo de contenido con soporte de imágenes y uso de ImageCache en una View), es muy bueno, pero estoy buscando la solución a mi problema, es el siguiente:
Creo el tipo de contido con imagenes, esta con tamaño de 150 x 150, preset y el full, 250 x 250, hasta ahí todo bien, aparece de primero el título, imagen, cuerpo y bien. Pero el texto aparece debajo de la imagen, cómo hago para que aparezca al lado de la imagen, como si la imagen llevara un align=left, que hago. Se debe ver como en un diario, la imagen pequeña y el texto al rededor de la misma.

Gracias.

Tendrías que aplicarle un estilo CSS al listado a nivel de plantilla en el que ese elemento tuviera align=left o un float.
También puedes echarle un vistazo a este módulo: <a href="http://drupal.org/project/semanticviews">Semantic Views</a>

Hola, amí tambien me pasa lo mismo cuando creo un preset del imagecahe para que la imagen se muestre reducida no me funciona. Además cuando creo el preset no muestra la imagen de Drupal como ejemplo, me fui a la ruta que él indica pero no hay nada, y no sé como solucionarlo. Todo lo tengo en el cpanel. Alguien me puede ayudar por favor

<p>
Si vas a la ruta donde se supone que est&aacute; la im&aacute;gen y realmente no est&aacute;, es muy posible que tu problema no sea con el imagecache, por ejemplo si la ruta que genera imagecache es como esta:</p>
<p>
http://cambrico.net/sites/cambrico.net/files/imagecache/header/blog_imag...
<p>
<br />
La im&aacute;gen original estar&aacute; aqu&iacute;:</p>
<p>
http://cambrico.net/sites/cambrico.net/files/drupal-wordle.png</p>
<p>
<br />
Si no ves la imagen original, el problema lo tienes cuando subes los ficheros o en los permisos de los directorios</p>

Me pasa lo mismo que drupalera... la imagen redimensionada no se genera esta en blanco... puedo subir imagenes pero al aplicar el imagecache para redimensionar esta desaparece... Permisos parece que se tienen. Lo he realizado en local con wampserver 2.0, drupal 6 y nada. Veo que le pasa a mucha gente pero no encuentro ninguna solución.

[...] Imagecache, m&oacute;dulo imprescindible de drupal [...]

Hola...

Drupalera y Markus? ... <cite>tu también, hijo mio?</cite>

Pregunta clave: ¿Servidor compartido?...
(en mi servidor compartido, cuando se crean los "presets" se crean tambien las carpetas correspondientes (normalmente debajo de "files/imagecache")... y según la configuración del servidor, estas carpetas tiene una propiedad y unos permisos NO ADECUADOS ...

Si cuando creais un nuevo "preset" no estais viendo la imagen del logo DRUPAL en la parte inferior afectada por las transformaciones... es que tenéis algún problema. Por lo tanto, como en los sistemas "LEAN", no continuéis haciendo nada mas hasta que no hayais arreglado el problema !!! (y que como en el 99% de los casos, es un asunto de propiedad y permisos)

Saludos
isaac.el.cec

Me temo que yo también...

Como le pasa a Drupalera y Markus tengo problemas con imageCache. Voy a intentar explicarme lo mejor posible para que algún sabio nos pueda dar una solución mas concreta ya que parece que somos muchos con este problema.

Todos los módulos necesarios los tengo instalados correctamente. views, cck, imageapi, filefield, imagefield e imagecache.
Sigo los pasos de este tutorial (por cierto, muchas gracias pedro) y no hay ningún problema hasta que "imageCache" tiene que generar los archivos.

Al instalar "imageCache" la carpeta "default/files/imagecache" se crea correctamente (permisos 775 en todas). Pero la carpeta con el nombre del preset dentro de "imagecache/" no se crea. Por lo tanto, la imagen "imagecache_sample.png" de ejemplo no se muestra a la hora de configurar el preset. Tampoco se crean la carpetas ni las imágenes cuando aplicamos el preset a las imágenes que mostramos las views.

Por ahí decís que debe de ser problema de permisos, pero muchos estamos en alojamientos compartidos y tenemos poca capacidad de maniobra (necesitamos saber en concreto que pedir para que nos hagan caso). Yo, después de probar en muchos alojamientos encontré uno que "aparentemente" va bien. Todos los módulos de subir imágenes, archivos y galerías me funcionan correctamente, como digo los permisos están todos a "775". Para mi que el problema lo tiene únicamente "imageCache".

Agradecería cualquier ayuda.

Hola a todos,

Yo tambien he tenido el mismo problema que ustedes, y por mas que busque en internet, no encontre la solucion a esto, a pesar de ser un problema comun, ya que muchos lo mencionan, nadie responde si encontro o no una solucion. Por esta razon, les comparto lo que hice, para que me funcionara. Es posible que esto no les funcione a todos.

Revisando en admin/site building/modules me di cuenta que en ImageCache tenia activado ImageAPI/ImageMagick al mismo tiempo que ImageAPI/ImageGD2, y aqui estaba el problema. Parece ser que ImageCache no sabia si debia utilizar las librerias GD o ImageMagick, por lo que desactivando ImageCacha/ImageMagick, se resolvio el problema.

Saludos

Excelente tutorial pedro. Ya tiene tiempo que esoy buscando como lograr hacer esto que muestras en el post.

soy relativamente nuevo con Drupal y estoy convencido de que es un gran CMS.

Como puedo hacer que las imagenes subidas al servidor les cambie el nombre del archivo en nuemor correlativos ( como se hace en todas las web)

gracias por este tutorial de como instalar en drupal el modulo de imagecache me a venido muy bien para proyecto que tengo drupal para poder tener vistas en miniatura muy buen tutorial.

Añadir nuevo comentario

 
 
 

Creative Commons License
Excepto donde se indique lo contrario, el contenido de este sitio está sujeto a una licencia de Creative Commons.