SummArg | Cursos y recursos para webmasters

28/09/2009

Indicar la posición del Crop con Timthumb

Hace poco veíamos cómo utilizar Timthumb en nuestro theme para que recorte automáticamente una imagen indicada en un custom field, lo que nos facilitaba las cosas cuando usabamos algún layout tipo magazine.

También es cierto que Timthumb corta por defecto en el medio, y si trabajamos con muchas fotografías de plano americano, por ejemplo, nos decapitará al objetivo. Por ello la gente de Studio-XL desarrolló una modificación para indicarle a Timthumb cómo debe recortar.

Nos explican paso por paso cómo efectuar la modificación sobre el archivo Timthumb.php nosotros mismos, pero también nos ofrecen descargar la versión modificada para comenzar a trabajar sin más.

Uso de la posición del crop con Timthumb modificado

El uso de timthumb necesita de formular algo como esto:

src=/images/whatever.jpg&h=150&w=150&zc=1

Ahora necesitaremos agregar un parámetro mas:

src=/images/whatever.jpg&h=150&w=150&zc=1&cropfrom=topleft

Las posiciones que agrega esta modificación son:

  • middle
  • middleleft
  • middleright
  • topleft
  • topright
  • topcenter
  • bottomleft
  • bottomright
  • bottomcenter

Si retomamos la guía para implementar Timthumb en nuestro Theme, ahora deberíamos agregar esto para que nuestra imagen sea recortada.

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

Indicar posición por medio de Campos Personalizados

Indicar desde la plantilla la posición para hacer el recorte es muy incómodo, ya que no podríamos elegir diferentes posiciones por imagen. Obligatoriamente tenemos que definir un campo personalizado que nos permita elegir desde cada post el tipo de corte.

Llamemos al nuevo Campo Personalizado “crop” (todo en minúsculas) y demoslé un valor del listado que especifiqué más arriba. Nos quedarán dos campos personalizados como sigue:

Ahora vayamos al template en el que estemos usando este script (en mi caso es index.php, pero recordá que puede ser home.php o también en category.php). Ubicá la porción de código relacionada al script y modificalo para que te quede así:

<img src="<?php bloginfo( 'template_directory' ); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID, "thumbs", true ); ?>&w=225&h=144&zc=1&cropfrom=
<?php echo get_post_meta( $post->ID, "crop", true ); ?>
" alt="<?php the_title(); ?>"  />

Agregamos el parámetro “cropfrom” y con get_post_meta llamamos al campo personalizado “crop” para que el valor podamos manejarlo tranquilamente desde cada post.

Quizás necesites limpiar el directorio cache para visualizar las nuevas miniaturas a medida que las vayas modificando.

Si te resulta muy dificil recordar cómo se llama cada posición del recorte en inglés, podés abrir el archivo timthumb.php, buscar cada nombre del listado de posiciones y reemplazarlo por su equivalente en español.

Espero que les resulte facil de colocar en sus blogs o al menos les sea esclarecedor. Aparentemente la nueva versión de WordPress será más amigable con el manejo de las imagenes y posiblemente esto quede obsoleto, pero mientras tanto es muy util.

Descargar o Modificar Timthumb MOD

Dejar un comentario