Usar TimThumb en tu theme de WordPress

No pocas veces vemos un theme de WordPress que deseamos usar pero, lamentablemente, todavía no posee ningún script para facilitarnos la tarea de subir imagenes y redimensionarlas o recortarlas para ser reutilizadas en el home del theme. En la mayoría de los casos, veremos que es muy simple identificar en el theme la porción de código a reemplazar para aminorarnos el trabajo. Si usamos TimThumb, debemos tener presente que hay que usar Campos Personalizados (es facil, no se asusten).

Preparando Archivos y Carpetas

Descargá el archivo TimThumb.php, cuyo autor es darrenhoyt.com (autor del famoso theme Mimbo). Subilo a la carpeta del theme al que le vamos a colocar el script. Creá una carpeta dentro de tu theme llamada /cache/ y asignale permisos 777.

Si vas a utilizar el editor de themes de WordPress, asigná permisos 777 a los archivos del Theme y luego retornalos a 644. Sino trabajá desde tu equipo utilizando Notepad ++ y subiendo los archivos con tu FTP favorito.

Editando el Loop

El archivo index.php o el home.php de tu theme necesita de alguna imagen de tamaño especial para funcionar. Cierto? Queremos eliminar la necesidad de hacer algún crop o resize especial para la portada por cada nota. En mi caso modifiqué el theme CSS Gallery y en su index.php la parte del loop que necesitaba modificar era la siguiente:

<?php while (have_posts()) : the_post(); ?>

<div class="item" onmouseover="this.className='item2'" onmouseout="this.className='item'">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<p><a href="<?php $values = get_post_custom_values("url"); echo $values[0]; ?>" title="<?php the_title(); ?>">
<img src="<?php $values = get_post_custom_values("thumbs"); echo $values[0]; ?>" alt="<?php the_title(); ?>" /></a></p>

Allí llama al custom field en el que nosotros indicamos la ruta de la miniatura resizeada (de un modo bastante rústico y semi-manual). Nosotros tenemos que indicarle la ruta con la que trabaja el script TimThumb. Reemplazamos la línea en donde llama a la imagen (en rojo) por esto:

<img src="<?php bloginfo( 'template_directory' ); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID, "thumbs", true ); ?>&amp;w=225&amp;h=144" alt="<?php the_title(); ?>"  class="borderimg" /></a> </p>

El Theme utiliza miniaturas de 255 x 144 px, por lo que hay que solicitar al script ese tamaño para nuestra portada, siendo w=Ancho (wide) y h=Alto (height).

Veamos otros ejemplos para setear la imagen extraidos de c.hadcoleman.com

Mostrar Solo Imagen

<?php if ( get_post_meta($post->ID, 'thumb', true) ) { ?>
	<div class="postthumb">
		<img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="100" height="57" />
	</div>
<?php } ?>

Mostrar Imagen con Link al Post

 <?php if ( get_post_meta($post->ID, 'thumb', true) ) { ?>
	<div class="postthumb">
		<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="150" height="150" /></a>
	</div>
<?php } ?>

Mostrar Imagen e Insertarle Link a URL personalizada

<?php if ( get_post_meta($post->ID, 'imglink', true) ) { ?>
	<div class="postthumb">
		<a href="<?php echo get_post_meta($post->ID, "imglink", $single = true); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php } ?><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>"  /><?php if ( get_post_meta($post->ID, 'imglink', true) ) { ?></a><?php } ?>
	</div>
<?php } ?>

Insertando las imagenes desde los Campos Personalizados

Como último paso deberemos hacer uso de los Campos Personalizados (Custom Fields) cuando escribamos un post. Seleccionemos cualquier imagen de nuestro artículo y entremos a la solapa editar de modo de poder ver la URL a la imagen

Copiamos ese enlace, cerramos la pantalla de opciones de la imagen y vamos al pié de la página de edición del post, a la sección de Campos Personalizados.

Insertá el nombre del campo personalizado tal cual lo generaste en la nueva URL de tu index.php. En nuestro caso es “thumbs” como podemos ver:

<img src="<?php bloginfo( 'template_directory' ); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID, "thumbs", true ); ?>&amp;w=225&amp;h=144" alt="<?php the_title(); ?>"  class="borderimg" /></a> </p>

Si utilizaras el último ejemplo brindado, en donde aparece otro campo mas para la URL personalizada, insertamos “imglink” de nombre al campo y al lado la URL en cuestión.

Espero les sirva!