En este tutorial vamos a poner en práctica una técnica para recortar nuestras miniaturas en WordPress “al vuelo”, consiguiendo enfocar y centrar las imágenes de la página principal de nuestro Blog.

Si bién con algunos toques de CSS siempre podemos ajustar el tamaño de nuestras miniaturas para maquetarlas adecuadamente, a la hora de querer que estén “recortadas” – esto es, privilegiando su centro y ganando en foco – el CSS empieza a ser algo más incómodo de utilizar.

TimThumb : Instalando nuestro script

Para preparar el terreno, nos bajaremos de aquí el script que servirá a nuestros propósitos, llamado Timthumb, y lo re-nombraremos timthumb.php.

Lo guardaremos dentro de nuestro tema, en una nueva carpeta : por ejemplo, “scripts”.

Dentro de la misma, y al lado de nuestro script, crearemos una segunda carpeta, dándole el nombre de “cache”. Es posible que más tarde nuestro servidor requiera que demos a ambas carpetas un permiso de lectura y escritura 777, el cual podemos cambiar desde nuestro programa ftp (como Filezilla). En principio, sin embargo, deberíamos poder prescindir de ello.

Iremos ahora a nuestro Índice (index.php, o home.php, según nuestro tema), y adjuntaremos el siguiente código allí donde queramos que la miniatura aparezca – por ejemplo, justo después del título del artículo, y antes del extracto :

<?php // Modificaremos más abajo anchura y altura de las imágenes, en el ejemplo están a 150 píxeles. ?>

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

<?php } ?>

Una vez esté instalado el script

Cuando todo esté listo, usaremos para nuestros propósitos los campos personalizados, con tal de imprimir una imagen por extracto gracias al código que hemos añadido, por ejemplo en nuestro índice o home.php, pero también en nuestras páginas de archivo.

De este modo, tras haber escrito nuestro artículo, nos dirijiremos a los campos personalizados para grabar la URL de la imagen que queramos utilizar, previamente subida a nuestro servidor a través del Gestor Multimedia en WordPress (pero no simplemente linkada).

Al campo personalizado le daremos el nombre de “foco”, y, como ‘valor’, la URL completa de la imagen a utilizar.

Nada más fácil. Ahora deberíamos poder disfrutar de imágenes automáticamente recortadas para nuestro índice.
No dudéis en plantear vuestras preguntas en los comentarios !