Reemplazar timthumb por WP Smart Image II

Recientemente me decidí a comenzar a utilizar WP Smart Image II en lugar de TimThumb u otros scripts similares para optimizar los themes y el uso de los recursos. Estos scripts, en sitios con muchas visitas y gran cantidad de imágenes, pueden representar un problema debido a que generan archivos temporales, sobrecargan el servidor con muchas llamadas al script y pueden no funcionar bien con algunos sistemas  de cache.

Por ello quería mostrarles cómo utilizar WP Smart Image II (WPSI) en el lugar de los anteriores scripts, aprovechando el sistema de miniaturas de WordPress y optimizando el uso de nuestras imágenes al máximo.

Plugins

• Descargaremos WPSI del repositorio oficial y lo instalaremos en nuestro WordPress.
• Luego conseguiremos Max Image Size Control, también disponible en el repositorio oficial.
• Finalmente buscamos Regenerate Thumbnails para el caso de que tengamos un blog con muchas entradas y necesitemos volver a generar todas las miniaturas. Existen otras opciones disponibles.

Como primera medida activamos WPSI y nada mas. Es un plugin orientado a desarrolladores, por lo que veremos su magia directamente en nuestro theme. Les recomiendo ver su Tabla de Parámetros para un uso mas exhaustivo.

En cuanto a Max image Size Control lo utilizaremos para crear nuevos tamaños de miniaturas sin modificar ninguno de los tamaños actualmente disponibles en WordPress. Si necesitamos un solo tamaño personalizado, llenamos el campo Custom 0 (cero). Si con éste no basta, pasamos a usar Custom 1, y asi sucesivamente. Podemos tildar crop para que efectúe un corte en la miniatura y no que utilice una redimensión.

Finalmente, cuando ya tengamos todo cocinado, utilizamos Regenerate Thumbnails para que WordPress vuelva a generar todos los tamaños de miniaturas incluidos los generados vía Max Image Size Control.

El código

Y la parte mas fácil es reemplazar nuestro viejo código de TimThumb:

<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID, "thumbs", true ); ?>&h=160&w=240&zc=1" alt="<?php the_title(); ?>" /></a>

Por esto:

<?php wpsi('size=custom0&type=url'); ?>

Si además necesitamos detectar si existe o no una imagen puesto que en base a ello cambiamos nuestro estilo, los invito a que lean el artículo Cómo saber si una entrada tiene imágenes sin usar custom fields anteriormente publicada en SummArg. Esperamos les sea de utilidad!