Veremos como generar diferentes tamaños de las imágenes de nuestro contenido a través de estos dos módulos, imagefield y imagecache.

Crearemos un tipo de contenido llamado "Articulo" que tendra una foto. Pero deseamos mostrar una versión pequeña de la foto de 120 x 120 cuando se muestra el teaser del artículo (portada), y deseamos mostrar una versión reducida a una valor de 250 x 250 cuando se muestra el artículo completo (nodo).

Osea tendremos 3 tamaños para cada imagen:

La original, que será la de mayor tamaño
La versión reducida que será de 250 x 250, a este tamaño lo llamamos "medio".
La versión preliminar de 120 x 120, a este tamaño lo llamamos "preliminar".

Primero tenemos que entender cómo funciona imagecache.

Imagecache genera las versiones reducidas de las imagenes en distintos directorios, para nuestro ejemplo por cada imágen que subimos tendremos 3 versiones en el disco, la original, la tamaño medio y la tamaño preliminar.

Para nuestro ejemplo, nuestro sitio tiene definido que los archivos del sitio se guarda en files/example.com

La versión original se guardara en el directorio files/example.com/articulos

La versión "medio" se guardara en el directorio files/example.com/imagecache/medio/files/example.com/articulos

La versión preliminar se guardara en el directorio files/example.com/imagecache/preliminar/files/example.com/articulos

Estas imagenes las crea imagecache "on demand" cuando el navegador las solicita.

La versión teaser del artículo no incluirá a la imágen original sino mostrará la versión "preliminar" de la foto.

La página del artículo tampoco mostrará la foto original, sino la versión "medio" de la foto.

La versión original no se mostrará en el sitio, solo quedará almacenada por si queresmos algun día cambiar los tamaños de las imagenes medio y preliminar y regenerarlas nuevamente.

En resumen los pasos que seguiremos serán los siguientes:

1. Instalar y habilitar los modulos imagefield y imagecache.
2. Crear los presets "medio" y "preliminar" (configurar imagecache).
3. Definir nuestro tipo de contenido "Articulo".
4. Prueba y aclaraciones finales.

1. Instalar y habilitar los modulos imagefield y imagecache.

Aquí no hay nada fuera de lo común a instalar y habilitar un módulo.

2. Crear los presets.

Los presets son las operaciones que imagecache realizará sobre la imagen original para lograr los tamaños deseados.

Definiremos el preset "medio" que serán las operaciones que realizará imagecache para crear la imagen "medio" y también definiremos el preset "preliminar".

Ingresamos a la configuracion de imagecache (admin/settings/imagecache)

En "preset namespace" completamos "medio" y presionamos "Create preset"

En "Add new action" seleccionamos "Scale" y presionamos "Update preset"

Completamos:

Width: 250
Height: 250
Scale to fit: Outside dimensions

Y presionamos "Update preset".

Seleccionamos "Crop" y presionamos "Update preset".

Completamos:

Width: 250
Height: 250
X Offset: center
Y Offset: center
Peso: 1

Y presionamos "Update preset".

Aqui finalizamos la creacion del preset "medio" y se visualizará como se muestra en la siguiente imágen.

Creamos el preset "preliminar", los pasos son identicos al anterior salvo que el tamaño cambia a 120 x 120.

3. Definición del tipo de contenido "Articulo".

Hacemos clic en Añadir nuevo tipo de contenido (admin/content/types/add) y completamos:

Nombre: Articulo
Tipo: articulo

Y guardamos.

Hasta aqui solo definimos un tipo de contenido que solo contiene un titulo y un cuerpo (de mensaje). Pero nuestro Articulo necesita una foto, por ello agregaremos el campo foto.

Editamos el tipo de contenido Articulo

Hacemos clic en la solapa superior "añadir campo" y completamos:

Nombre: foto
Field type: tildamos image

Y presionamos Create field.

Competamos en:

Image path: articulos
Teaser preset: seleccionamos preliminar
Body preset: seleccionamos medio

Y guardamos los cambios.

Hacemos clic en la solapa "Display fields"

Seleccionamos en el field foto:

Teaser: preliminar
Full: medio

Y presionamos Enviar.

Finalizamos la configuracion.

4. Prueba y aclaraciones finales.

Ahora lo probamos agregando un contenido tipo articulo y al guardarlo tendremos que estar visualizando la página del artículo con la versión "medio" de la foto.

Si el articulo lo marcamos cómo promocionado a la portada, tendrá que esta mostrandose la imagen preliminar en portada.

Por último aclaro que imagecache no solo sirve en conjunto con imagefield, sino también puede redimiensionar otras imágenes como por ejemplo los avatars de los usuarios.