Thumbs en condiciones: como en Gmail y Facebook

Había algo de nuestro CMS que me llevaba asqueando desde hace bastante tiempo: la generación de thumbs… asi que hemos mejorado el sistema, aquí explico cómo funciona y cómo está programado.

Allá por febrero de 2006 programamos una mini-aplicación que capturaba la primera foto del posts y la dividía en pequeñas cuadrículas, entonces tu elegías el trozo que más te gustaba y esa era tu thumb. Todo lo espliqué en un post que titulé Las thumbnails más rápidas a este lado del Mississippi… en su momento estaba muy orgulloso.

Por desgracia la Ley de Murphy parece aplicarse con mucha frecuencia en esto de las thumbs y era bastante frecuente que el cuadrado no cayese en el mejor sitio: cortaba un trozo de cara, dejaba fuera una oreja…

Así que hemos evolucionado, ahora -como se puede ver en la imagen- se captura la primera imagen del post y se muestra un recuadro sobre ella que mantiene las proporciones que tendrá la thumb final.

El recuadro se puede mover y cambiar de tamaño, una vez que tienes las coordenadas del corte puedes pulsar en «Probar» y te muestra el resultado y cuando estás convencido le das a «Guardar»… a partir del primer corte el programa te genera tres thumbs en distintos tamaños y pasa al siguiente post automáticamente.

Calculo que puedes hacer con facilidad unas 10 thumbs por minuto, por lo que el proceso de publicación no se ralentiza. Los nuevos tamaños de las thumbs son: 120 x 90 pixels (antes era 120 x 120 pixels), 70 x 53 pixels (nuevo), 50 x 38 pixels (antes 50 x 50 pixels)

Como se puede ver hemos aprovechado para cambiar la proporciones de las thumbs y hacerlas apaisadas, que quedan bastante más estéticas que cuando eran cuadradas.

Programación

Para poder hacer esto hemos utilizado el excelente script programado por Angus Turnbull DragResize 1.0. Básicamente es un js que te permite animar un DIV, cambiándolo de tamaño y posición, en principio la redimensión es totalmente libre y no puedes mantener un ratio de proporciones, pero en el foro encontramos una modificación del código que si te permite restringir las proporciones: algo esencial para las thumbs.

El div se deja transparente y se coloca una foto alineada con él desde el punto 0,0. De esa manera cuando mueves el DIV las coordenadas coinciden con las de la foto.

Con una función javascript recuperas los valores del DIV cada vez que dejas de moverlo, esas serán las pautas de corte que tendrás que aplicar a la foto. Para este último paso nosotros usamos AspJpeg, aunque supongo que habrá programas similares y gratuitos en PHP y demás.

Puedes ver como funciona aquí >>

En el ejemplo no está la parte del corte, pero si está hecha la parte `más creativa´… la de Angus Turnbull 🙂

Otras aplicaciones

Esto resulta imprescindible para los avatares de los usuarios, algo que ya teníamos hecho y que ahora vamos a actualizar, visto que por mucho que adviertas que la foto debe ser de 70×70 pixeles, el personal termina subiendo fotos de 3 megas y de todos los tamaños…

Asi que esto viene muy bien para que si alguien sube una foto que no cuadra con el tamaño solicitado le puedas mostrar una sencilla pantalla donde podrá recortar el mismo su foto on-line: igual que en Gmail, Facebook y otras redes sociales.

Nota mental – aprender mucho Javascript, convertirme en Angus Turnbull