Recortando automáticamente nuestras miniaturas

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 !

Comentarios
  1. Hola Ignacio, me gustan mucho tus trucos y tutoriales :)

    Escrito el09/08/2009
  2. Man… entendí todo a la perfección
    Pero me surgió un problema, la miniatura también sale al entrar al post, osea aparece en el index y tambien al entrar al post, y lo que yo qusiera es que al entrar al post se muestre al imagen con tamaño real y no vuelva a aparecer el thumbnail.

    Escrito el14/08/2009
  3. Ignacio

    Saludos NaNo ! Veo que en tu página solventatse el problema ? Sinó, a veces puede ocurrir que el post final utilice index.php como template. Para evitar este tipo de reciclage que WordPress hace, lo mejor es copiarlo aparte y nombrarlo single.php, y borrar de él el código de TimThumb. Así tienes un template para cada cosa : índice y artículo.

    Escrito el16/08/2009
  4. Tengo problemas con la subida de miniaturas redimensinadas en featured y los post del theme Premiumnews; en un blog que estoy montando para nuestra web
    He hecho de todo (eso creo; al menos, llevo varios días ya) y no va.
    Incluyo las líneas d error y las partes del script a que corresponden…

    Warning: finfo_open() [function.finfo-open]: Failed to load magic database at ‘/usr/share/misc/magic’. in /home/megadanc/public_html/WP/wp-content/themes/premiumnews/thumb.php on line 326

    Warning: finfo_file(): supplied argument is not a valid file_info resource in /home/megadanc/public_html/WP/wp-content/themes/premiumnews/thumb.php on line 327

    Warning: finfo_close(): supplied argument is not a valid file_info resource in /home/megadanc/public_html/WP/wp-content/themes/premiumnews/thumb.php on line 328

    lineas del script a las que se refiere
    ==============================================
    // use PECL fileinfo to determine mime type
    if (function_exists(‘finfo_open’)) {
    $finfo = finfo_open(FILEINFO_MIME);
    $mime_type = finfo_file($finfo, $file);
    finfo_close($finfo);
    ===============================================

    Warning: Cannot modify header information – headers already sent by (output started at /home/megadanc/public_html/WP/wp-content/themes/premiumnews/thumb.php:326) in /home/megadanc/public_html/WP/wp-content/themes/premiumnews/thumb.php on line 424
    Warning: Cannot modify header information – headers already sent by (output started at /home/megadanc/public_html/WP/wp-content/themes/premiumnews/thumb.php:326) in /home/megadanc/public_html/WP/wp-content/themes/premiumnews/thumb.php on line 425
    Warning: Cannot modify header information – headers already sent by (output started at /home/megadanc/public_html/WP/wp-content/themes/premiumnews/thumb.php:326) in /home/megadanc/public_html/WP/wp-content/themes/premiumnews/thumb.php on line 426
    Warning: Cannot modify header information – headers already sent by (output started at /home/megadanc/public_html/WP/wp-content/themes/premiumnews/thumb.php:326) in /home/megadanc/public_html/WP/wp-content/themes/premiumnews/thumb.php on line 427
    Warning: Cannot modify header information – headers already sent by (output started at /home/megadanc/public_html/WP/wp-content/themes/premiumnews/thumb.php:326) in /home/megadanc/public_html/WP/wp-content/themes/premiumnews/thumb.php on line 428
    Warning: Cannot modify header information – headers already sent by (output started at /home/megadanc/public_html/WP/wp-content/themes/premiumnews/thumb.php:326) in /home/megadanc/public_html/WP/wp-content/themes/premiumnews/thumb.php on line 429

    lineas del script a las que se refiere
    ===============================================
    header(“Content-Type: image/png”);
    header(“Accept-Ranges: bytes”);
    header(“Last-Modified: ” . gmdate(“D, d M Y H:i:s”, filemtime($cache_file)) . ” GMT”);
    header(“Content-Length: ” . $fileSize);
    header(“Cache-Control: max-age=9999, must-revalidate”);
    header(“Expires: ” . gmdate(“D, d M Y H:i:s”, time() + 9999) . “GMT”);
    ===============================================

    Gracias por la ayuda.

    Escrito el28/10/2009
  5. Hola Javier, para dar y obtener soporte es mejor usar el foro.

    Escrito el29/10/2009
  6. javier, ese es un problema en el archivo thumb.php, habla con tu hosting para que te lo solucionen!

    Escrito el03/12/2009
  7. Y como le hago para aplicarle a una imagen externa, por ejemplo una imagen alojada en tinypic?…

    Escrito el14/08/2010
  8. Estoy utilizando imágenes externas, y la url me sale de esta forma:

    http://mi-web/wp-content/themes/mitheme/scripts/timthumb.php?src=http://i33.tinypic.com/35he3yg.jpg&h=150&w=150&zc=1

    La imagen no se muestra, espero tu ayuda, muchas gracias…

    Escrito el14/08/2010
  9. Nuevamente a molestar, abri el enlace de la imagen con firefox, y me dise que las imágenes externas no están permitidas, alguien me puede decir a que se debe?…

    Escrito el15/08/2010
  10. Hola Fliberty, te recomiendo usar esta nueva técnica, con las últimas versiones de WP es mucho más fácil: http://www.todowp.org/wordpress-2-9-y-la-funcion-post-image/

    Escrito el16/08/2010
  11. Que tal Ignacio, la verdad es que esa función si la utilizo, y la utilización del thimthumb lo quiero para recortar imágenes que irán en otra ubicación y en un ancho y alto específicos pero que no se distorsione, encontré un script en php se llama resizer, el problema es que cada vez que carga la imagen recortada se genera un caché del recorte que posteriormente no se elimina automáticamente, así que ya te imaginarás el final.
    Muchas gracias, y espero que me puedan ayudar…

    Escrito el16/08/2010

DEJA TU COMENTARIO