Timthumb es un script PHP, desarrollado por Darren Hoyt, que resulta muy útil para redimensionar imágenes usando PHP. Se utiliza bastante en templates para WordPress, para crear los thumbnails de los posts. Además permite hacer crop de las imágenes para que no pierdan las proporciones al ser redimensionadas. Necesita que la librería GD esté cargada, cosa que casi todos los hostings tienen.
Para empezar a usar el script solo tienes que bajartelo desde el SVN de Google Code. Una vez descargado, muévelo a tu servidor web. La primera vez que lo uses, el script creará un subdirectorio con el nombre «cache». En este subdirectorio se almacenarán los thumbnails realizados para no tener que redimensionar las imágenes cada vez que se realiza una petición. El subdirectorio «cache» tiene que tener permisos de escritura y ejecución para que todo funcione bien (por supuesto, de lectura también). Una vez todo esté en sus sitio puedes empezar a usar el script de esta manera tan sencilla:
<img src="/scripts/timthumb.php?src=/images/imagen_grande.jpg&h=150&w=150&zc=1" alt="thumb" >
Las opciones que tiene el script son las siguientes:
- w: anchura del thumbnail
- h: altura del thumbnail
- zc: zoom crop (0 o 1)
- q: quality (por defecto es 75, y lo máximo es 100)
Ejemplos de Timthumb
He realizado algunos ejemplos usando una imagen de un balón de futbol. El tamaño original de la imagen es de 1280×1024. Vamos a ver el efecto del script sobre la imagen:
Redimensión a 150×150 sin zoom crop
<img src="/scripts/timthumb.php?src=/images/balon_grande.jpg&h=150&w=150" alt="thumb" >
Redimensión a 150×150 con zoom crop
<img src="/scripts/timthumb.php?src=/images/balon_grande.jpg&h=150&w=150&zc=1" alt="thumb" >
Como se puede observar, el zoom crop hace su faena y evita que la imagen se distorsione, aunque sea a costa de perder un trozo de imagen en el lateral. Si quieres que la imagen ocupe menos espacio puedes jugar con el parametro «q», que por defecto se establece a 75, pero lo puedes reducir para bajar la calidad del thumbnail y que ocupe menos espacio.
Redimensionar solo la altura
<img src="/scripts/timthumb.php?src=/images/balon_grande.jpg&h=150" alt="thumb" >
Indicando solo la altura, se redimensiona la imagen manteniendo las proporciones.
Posición del crop
El crop, por defecto se hace en la parte central de la imagen, pero en imágenes grandes puede ser que al hacer crop se elimine la parte de la imagen menos apropiada. Para evitar esto Studio-XL ha desarrollado una modificación del script. Se puede descargar desde su sitio. Su script funciona exactamente igual, pero añade la opción de especificar el parámetro «cropfrom». Cropfrom puede tener los siguientes valores:
- middle
- middleleft
- middleright
- topleft
- topright
- topcenter
- bottomleft
- bottomright
- bottomcenter
El resultado de aplicar estos parámetros es el siguiente:
Cropfrom topleft
<img src="/scripts/timthumb.php?src=/images/balon_grande.jpg&h=150&w=150&zc=1&cropfrom=topleft" alt="thumb" >
Cropfrom topright
<img src="/scripts/timthumb.php?src=/images/balon_grande.jpg&h=150&w=150&zc=1&cropfrom=topright" alt="thumb" >
Un script muy fácil de usar que sin duda nos puede ayudar a crear plantillas más creativas.